What is VICE's primary brand color?

VICE doesn't have one. The captured homepage ships zero saturated brand color in its chrome — no held-in-reserve accent for CTAs, no hazard red, no electric blue. Ink black appears 1942 times (text 991, border 945, background 6), paper white 288 times, and a graphite gray 18 times as muted text. The WordPress base CSS declares a vivid purple #9b51e0, luminous orange #ff6900, vivid red #cf2e2e, and a handful of other preset accents — but none of these render on the captured marketing surface. Where Cloudflare paints the hero in Kumo orange and The Atlantic reserves hazard red for the Subscribe pill, VICE refuses both moves and lets the editorial photography carry every chromatic moment.

What typeface does VICE use, and what should I use as a substitute?

VICE runs three voices: VICE Grotesk (the proprietary in-house grotesk, declared in CSS as --wp--preset--font-family--vice-grotesk) for every spoken display, heading, and navigation tier; Source Code Pro for every UPPERCASE timestamp, byline, and category tag at 11px; and Helvetica Neue 19px / 500 in a single scope — the Members-only promo strip body copy. Display sits at 50px weight 900, h2 at 40px / 700, navigation at 16px / 900 UPPERCASE. The closest open-source substitute for VICE Grotesk is Space Grotesk at weights 700 and 900, or Hanken Grotesk at the same weights. For Source Code Pro, the original is open source — use it directly. Helvetica Neue substitutes to system-ui or Helvetica without adjustment.

Why doesn't VICE have a brand accent color?

VICE's editorial voice rejects the SaaS-marketing convention of a held-in-reserve brand accent. The homepage runs as a print-zine surface where the photography — provocative, often confrontational, intentionally raw — carries every chromatic moment, and any brand-chrome accent would compete with the editorial imagery. The CSS exposes WordPress preset palettes (vivid purple, luminous orange, vivid red) as theme-color fallbacks, but the rendered page uses ink-on-paper monochrome exclusively. The closest analogy in the directory is Patagonia, which also ships a near-monochrome marketing surface — but Patagonia's restraint reads as a brand of stewardship while VICE's reads as a brand of refusal.

What is Source Code Pro doing on a youth-culture publication?

Source Code Pro at 11px UPPERCASE is VICE's typographic fingerprint — it appears 96 times in the captured page and is the most-occurring single typographic signature. It carries every timestamp, every byline credit, every category tag below a photograph (BTS, NEWS, TECH, CULTURE, MOTHERBOARD). The choice deliberately quotes mid-century newsroom teletype rather than digital code — monospace signals editorial metadata, not technical content. The convention dates back to VICE Magazine's print era, where mono captions sat below photo plates and credited the photographer in tracked caps; the website ports the same metadata system into the digital grid. The pairing — VICE Grotesk at weight 900 paired with Source Code Pro UPPERCASE — is what distinguishes a VICE page from any other photo-led publication.

VICE Design System

VICE's homepage as a DESIGN.md file.

About VICE DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source vice.com

News & Publishing

VICE's homepage looks like a print zine ported to desktop scale and refusing every web-native softening move. The canvas is pure white, the ink is pure black, and the page ships zero saturated brand color anywhere in the captured chrome — no orange, no red, no electric blue, no held-in-reserve accent. Hero section titles run at 50px VICE Grotesk weight 900, the heaviest weight in the proprietary grotesk's variable axis; h2 article headlines drop to 40px / 700; navigation labels sit at 16px weight 900 UPPERCASE. The metadata layer — every timestamp, byline, and category tag — runs in Source Code Pro at 11px UPPERCASE, the same monospace that VICE has used since the early-2010s magazine site. The brand voice is grotesk-weight authority paired with monospace metadata, and the chromatic restraint is so absolute it borders on confrontational.

The DESIGN.md file packages the system into a structured spec. Inside: 8 color tokens organized around pure-ink black, paper white, a single graphite gray for muted body text, a hairline neutral, and a handful of declared-but-absent WordPress preset accents (vivid purple, luminous orange, vivid red) that exist in the CSS but never render on the marketing surface; 11 typography tokens running VICE Grotesk at three weights (500, 700, 900) plus Source Code Pro at 11px and a single Helvetica Neue 19px tier for body promo strips; a 2-step radius scale (0px on every card, 9999px only on the Members-only pill); a 10/40px spacing rhythm; and 14 component definitions covering the print-zine card, the UPPERCASE category-tab row, the heavy 6x6 block-offset shadow, and the inverted black promo band.

Feed this file to Claude, Cursor, or any AI coding agent that reads structured tokens and it reproduces VICE's specific moves: ink-on-paper monochrome chrome with photography carrying every chromatic moment, VICE Grotesk at weight 900 for display authority, Source Code Pro UPPERCASE metadata, zero corner radius on cards, and a single hard 6x6 block-offset shadow as the only elevation tier. The one disciplined move worth borrowing only if your editorial voice can support it: the willingness to ship a marketing surface with no brand accent color at all. VICE gets away with it because the photography is the brand; on a SaaS site it would read as undecorated rather than confrontational.

What makes it distinct

No chromatic voltageVICE's marketing surface ships zero saturated brand color; ink black and paper white carry every chrome element, with photography doing all chromatic work
VICE Grotesk display at weight 900the proprietary grotesk runs at the heaviest weight available in the family, the inverse of editorial-weight-500 restraint at Cloudflare or Spline
Source Code Pro UPPERCASE metadata11px monospace at 96 occurrences carries every timestamp, byline, and category tag — VICE's typographic fingerprint
Print-zine gridevery card has zero corner radius, pills appear only on the Members-only flag at 9999px, and a hard 6x6 block-offset shadow appears as the only elevation move
Helvetica Neue as a third voicebody running text shifts from VICE Grotesk to Helvetica Neue at 19px / 500 inside the Members promo strip, the only place a system-sans appears

Live at vice.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

vice.com

Explore VICE

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.