--- version: alpha name: "VICE" website: "https://www.vice.com" description: >- An alt-news / youth-culture outlet whose homepage runs an ink-on-paper monochrome chrome — pure black ink on pure white, with VICE Grotesk doing every spoken tier and Source Code Pro carrying every UPPERCASE timestamp and category tag. The brand exposes no chromatic accent: zero saturated color appears in the captured page outside editorial photography. Hero section titles sit at 50px VICE Grotesk weight 900, h2 article headlines at 40px weight 700, and a 16px weight 900 grotesk carries the top-nav category links in a row of UPPERCASE labels. Source Code Pro at 11px UPPERCASE with normal tracking is the metadata fingerprint — the only monospace voice on a brand that otherwise refuses every dev-tool convention. Cards have zero radius; pills exist only at 9999px on the Members-only badges. The page reads as a print zine rendered at desktop scale. seo: title: "VICE Design System for React — ink-on-paper monochrome, VICE Grotesk, 14 components" metaDescription: "VICE's homepage as a DESIGN.md file. Pure black on pure white, no chromatic accent, VICE Grotesk display at weight 900, Source Code Pro UPPERCASE metadata. Tokens for React, Next.js, and AI tools." highlights: - "No chromatic voltage — VICE'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 900 — the 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 metadata — 11px monospace at 96 occurrences carries every timestamp, byline, and category tag — VICE's typographic fingerprint" - "Print-zine grid — every 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 voice — body running text shifts from VICE Grotesk to Helvetica Neue at 19px / 500 inside the Members promo strip, the only place a system-sans appears" tags: - "News & Publishing" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.vice.com" title: "VICE — official site" description: "VICE's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is VICE's primary brand color?" answer: "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." - id: "typography" title: "What typeface does VICE use, and what should I use as a substitute?" answer: "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." - id: "no-accent" title: "Why doesn't VICE have a brand accent color?" answer: "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." - id: "uppercase-mono" title: "What is Source Code Pro doing on a youth-culture publication?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React publication?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce VICE's specific moves: pure-white canvas with pure-black ink, zero saturated brand accent, VICE Grotesk at weight 900 for display tiers, Source Code Pro UPPERCASE metadata, zero card radius, and a single hard 6x6 block-offset shadow as the only elevation move. The token references resolve cleanly. The one caveat: the no-accent move only reads correctly if your editorial photography is strong enough to carry the chromatic load. Substituting in stock imagery or generic SaaS illustrations would make the monochrome chrome feel undecorated rather than disciplined." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" canvas: "#ffffff" hairline-light: "#e8e8e8" ink-muted: "#909090" ink-soft: "#333333" ink-light: "#4d4d4d" surface-medium: "#757575" border-dark: "#1a1a1a" typography: display-xl: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 50px fontWeight: 900 lineHeight: 56.25px letterSpacing: 0 display-lg: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 45px letterSpacing: 0 display-md: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 36px letterSpacing: 0 heading-md: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 900 lineHeight: 24.75px letterSpacing: 0 heading-sm: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 25px letterSpacing: 0 body-md: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 22.12px letterSpacing: 0 body-md-medium: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 22.12px letterSpacing: 0 body-promo: fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 19px fontWeight: 400 lineHeight: 30.02px letterSpacing: 0 nav-link: fontFamily: "\"VICE Grotesk\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 900 lineHeight: 16px letterSpacing: 0 mono-sm: fontFamily: "\"Source Code Pro\", monospace" fontSize: 11px fontWeight: 400 lineHeight: 13.75px letterSpacing: 0 mono-sm-bold: fontFamily: "\"Source Code Pro\", monospace" fontSize: 11px fontWeight: 700 lineHeight: 17.38px letterSpacing: 0 rounded: none: "0px" sm: "4px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "10px" md: "12px" lg: "16px" xl: "24px" 2xl: "30px" 3xl: "40px" components: hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" section-heading-inverted: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-lg}" rounded: "{rounded.none}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-promo: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-promo}" mono-caption: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.mono-sm}" mono-caption-inverted: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.mono-sm}" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px" height: "48px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 20px" height: "44px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "10px 40px" height: "56px" borderColor: "{colors.ink}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "10px" height: "34px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0 30px" borderColor: "{colors.hairline-light}" card-inverted: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-promo}" rounded: "{rounded.none}" padding: "40px" members-pill: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.mono-sm-bold}" rounded: "{rounded.full}" padding: "4px 16px" height: "24px" --- ## Overview VICE's homepage refuses every web-native softening move that the rest of the news-publishing category accepts. **Ink-on-paper monochrome.** Where Cloudflare paints its hero in a saturated brand orange and The Atlantic reserves a hazard red for the Subscribe pill, VICE ships a marketing surface with zero saturated brand color anywhere in the chrome. The canvas is pure white (`{colors.canvas}` — #ffffff, 288 occurrences), the ink is pure black (`{colors.ink}` — #000000, 1942 occurrences — the single dominant token by an enormous margin), and the only other rendered colors are a graphite muted-text gray and a faint hairline neutral. Every chromatic moment on the page comes from editorial photography — Hawaiian-shirt portraits, action stills, magazine covers — and the chrome's job is to stay out of the way. The typographic system is **grotesk-weight authority paired with monospace metadata**. VICE Grotesk runs at weight 900 for hero section titles (50px) and at weight 700 for h2 article headlines (40px), the heaviest weight available in the proprietary grotesk family. This is the inverse of the editorial-weight-500 restraint Cloudflare and Spline run; VICE wants its display to read as ink-stamped print rather than as quiet magazine dek. The supporting voice is Source Code Pro at 11px UPPERCASE, appearing 96 times across timestamps, byline credits, and category tags — the typographic fingerprint that has carried over from VICE Magazine's print era. The shape language is **print-zine binary**: zero corner radius on every card, photograph, and button, with the pill geometry reserved exclusively for the Members-only badge at 9999px. There is no 4px, 8px, or 12px middle tier. Elevation is a single hard 6x6 block-offset shadow (declared in CSS as `--wp--preset--shadow--crisp`, value `6px 6px 0px rgb(0, 0, 0)`) that drops a black block-shadow under specific photo lockups — the inverse of the soft-blur drop shadow most digital products use. **Key Characteristics:** - Zero saturated brand voltage anywhere in the chrome — VICE refuses the held-in-reserve accent convention. Editorial photography carries every chromatic moment. - Ink black (`{colors.ink}` — #000000) dominates: 1942 total occurrences, the highest concentration in any system in the directory. - VICE Grotesk at weight 900 for display — the heaviest weight in the family, the inverse of editorial-restraint-500 systems. - Source Code Pro at 11px UPPERCASE as the metadata fingerprint — 96 occurrences across timestamps, bylines, category tags. - Zero corner radius on every card. Pills only on the Members-only badge at 9999px. No middle tier exists. - Hard 6x6 block-offset shadow (`6px 6px 0px rgb(0, 0, 0)`) as the only elevation move — a black block-shadow, not a soft-blur drop. - Inverted black promo bands carry Members-only content with Helvetica Neue 19px / 400 body copy — the only place a non-VICE-Grotesk sans appears. - UPPERCASE category navigation in 16px VICE Grotesk weight 900 — the navigation reads as a row of ink-stamped print labels. ## Colors ### Text - **Ink** (`{colors.ink}` — #000000): frequency 1942 — the single dominant token in the system. Used as text (991), border (945), background (6). Pure black on pure white is the entire chrome voice. Declared in 11 separate CSS custom-property names (`--wp--custom--color--text--base`, `--wp--custom--color--border--base`, `--wp--custom--color--bg--dark`, etc.) — the WordPress base treats ink black as text, border, background-dark, and primary all at once. - **Ink Muted** (`{colors.ink-muted}` — #909090): frequency 18. Used as text (9), border (9). A graphite gray used sparingly for timestamp captions and secondary metadata where pure ink would feel too heavy. Declared as `--wp--custom--color--neutral--60` and `--wp--preset--color--gray`. - **Ink Soft** (`{colors.ink-soft}` — #333333): declared as `--wp--custom--color--neutral--20` and `--wp--custom--color--text--medium`. Present in the CSS but not actively rendered on the captured marketing surface. - **Ink Light** (`{colors.ink-light}` — #4d4d4d): declared as `--wp--custom--color--neutral--30` and `--wp--custom--color--text--light`. Reserved for tertiary text tiers that do not appear in the rendered page. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 288 — the second-most-occurring token. Used as text (143, where it renders white against the inverted black promo bands), border (142), and background (3). Declared as `--wp--custom--color--bg--base`, `--wp--custom--color--white`, and `--wp--custom--color--neutral--100`. The page floor and every primary card surface. - **Surface Medium** (`{colors.surface-medium}` — #757575): declared as `--wp--custom--color--bg--medium` and `--wp--custom--color--border--medium`. Present in the CSS preset but absent from the rendered surface. ### Hairline - **Hairline Light** (`{colors.hairline-light}` — #e8e8e8): frequency 34, all as border. The faint cool-gray hairline rule used to divide specific card lockups where pure-black borders would feel too heavy. Declared as `--wp--custom--color--border--light`, `--wp--custom--color--neutral--90`, and `--wp--preset--color--light-gray`. - **Border Dark** (`{colors.border-dark}` — #1a1a1a): declared as `--wp--custom--color--neutral--10` and `--wp--custom--color--border--dark`. Reserved for dark-mode border duty; absent from the captured light surface. ### Declared but Absent (WordPress presets) The CSS exposes a WordPress preset color palette — vivid purple, luminous orange, vivid red, cyan blue, luminous amber, vivid green, pale pink — that the brand inherits from the underlying CMS. None of these accents render on the captured marketing surface; they exist as theme-fallback options for editor-block styling but the live site refuses every one of them. ## Typography ### Font Families The system runs **VICE Grotesk** (the proprietary in-house grotesk, declared as `--wp--preset--font-family--vice-grotesk`) for every spoken surface — display, heading, body, navigation, button. Fallbacks walk to `Helvetica, Arial, sans-serif`. **Source Code Pro** (declared as `--wp--preset--font-family--source-code-pro`) carries every UPPERCASE timestamp, byline, and category tag at 11px. A third voice, **Helvetica Neue** (declared as `--wp--custom--typography--font-family--primary`), appears in exactly one scope: the Members-only promo strip body copy at 19px / 400. The pairing is the typographic fingerprint of the brand. VICE Grotesk at weight 900 paired with Source Code Pro UPPERCASE is the move that distinguishes VICE from any other photo-led publication — the grotesk weight is heavier than the editorial-magazine convention, and the monospace metadata is closer to a documentation site than to a youth-culture marketing surface. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 50px | 900 | 56.25px | Hero section title ("Life, Culture", "MOTHERBOARD Tech") | | `{typography.display-lg}` | 40px | 700 | 45px | h2 article headline ("Tripsitting the Mega Rich") | | `{typography.display-md}` | 32px | 700 | 36px | Inline strong-tag headline lockups | | `{typography.heading-md}` | 22px | 900 | 24.75px | Inverted-band section headings | | `{typography.heading-sm}` | 20px | 700 | 25px | Standard story card headlines | | `{typography.body-md}` | 14px | 400 | 22.12px | Default running text | | `{typography.body-md-medium}` | 14px | 500 | 22.12px | Emphasis running text | | `{typography.body-promo}` | 19px | 400 | 30.02px | Members-only promo strip body copy (Helvetica Neue) | | `{typography.nav-link}` | 16px | 900 | 16px | Top-nav category labels | | `{typography.mono-sm}` | 11px | 400 | 13.75px | UPPERCASE timestamps, bylines, category tags | | `{typography.mono-sm-bold}` | 11px | 700 | 17.38px | UPPERCASE button labels and emphasis metadata | ### Principles Display weight tops out at 900 — the heaviest weight available in the VICE Grotesk variable axis. Hero titles at 50px / 900 are the loudest typographic moment on the page; the navigation runs at the same weight 900 at 16px, treating category labels as ink-stamped print marks rather than soft web links. Body running text drops to weight 400, but the swing from 900 display to 400 body is intentional — there is no 500 / 600 / 700 middle authority tier in the body grid. The Source Code Pro monospace voice does the work that an UPPERCASE-tracked sans label tier would do in a SaaS system. There is no tracked-caps sans in the VICE chrome; the monospace owns metadata duty exclusively at 11px UPPERCASE. ### Note on Font Substitutes VICE Grotesk is proprietary. The closest open-source substitute is **Space Grotesk** at weights 700 and 900 (the proportions transfer cleanly, though Space Grotesk's apertures read slightly more contemporary). **Hanken Grotesk** is the secondary fallback at the same weights with a slightly tighter cap height. For Source Code Pro, the original is open source — use it directly via Google Fonts or the GitHub mirror. Helvetica Neue substitutes to system-ui or Helvetica without adjustment at 19px / 400. ## Layout ### Spacing System - **Base unit:** 10px — the dominant gap value, appearing 50 times in the captured page. The 10/40px ladder anchors most card-and-section work, with a 12/24 secondary rhythm for inline gaps. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 30px · `{spacing.3xl}` 40px. - **Section padding (vertical):** ~40px between major story bands; the inverted Members-only black promo strip uses 40px internal padding. - **Card internal padding:** `{spacing.2xl}` (30px) horizontal on standard story cards; `{spacing.3xl}` (40px) on the inverted Members promo card. - **Top-nav padding:** `{spacing.base}` (10px) vertical, `{spacing.3xl}` (40px) horizontal. ### Grid & Container - **Max content width:** ~1360px on the hero band and standard story grid. - **Hero block:** a single full-bleed photograph at the top with an inverted overlay headline (white VICE Grotesk on the photo) and a Source Code Pro mono caption below. - **Story grid:** alternating 3-up and 2-up rows separated by the hard 6x6 block-offset shadow on specific photo lockups; standard cards sit with no shadow at all. - **Members promo band:** a full-bleed inverted-black band running the Members-only message in Helvetica Neue body copy with a single black-on-white pill CTA. - **Section ladder:** each major section (Life Culture, MOTHERBOARD Tech, Magazine) opens with a 50px VICE Grotesk weight 900 title left-aligned, followed by a story grid below. ### Rhythm The page alternates between **standard light grid** and **inverted black promo bands** in a deliberate cadence. Three story-grid sections in white run between two inverted black sections (Members-only, MOTHERBOARD Tech). The inverted bands carry the editorial-emphasis work that a brand-accent color would do in another system — black-on-white flips to white-on-black instead of white-on-orange or white-on-red. ## Elevation The system has a **single hard shadow tier**, distinct from the soft drop-shadow convention every other system in the directory uses. - **Block-offset shadow** (declared as `--wp--preset--shadow--crisp`, value `6px 6px 0px rgb(0, 0, 0)`): a hard 6x6 black block-shadow with no blur, no spread. Applied to specific photo lockups inside the standard story grid. The shadow reads as ink-stamped offset rather than as elevation, quoting print-zine layout where photos sit on a paper page with a printer-error offset. - **Sharp shadow** (declared as `--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2)`): a softened variant at 20% opacity, used for hover-state lifts on the same photo lockups. - **Deep shadow** (declared as `--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4)`): a large soft-blur shadow declared in CSS but absent from the captured marketing surface — reserved for modal/dialog surfaces in the article-detail view. - **Outlined shadow** (declared as `--wp--preset--shadow--outlined`): a double-layer outline-shadow effect, also declared but not rendered. - **No standard drop-shadow tier:** the soft Material-style blur shadow that defines most web product UIs does not exist on the captured surface. ## Shapes The radius scale is **binary**, the smallest in the directory: - `{rounded.none}` 0px — every card, every photograph, every button, every section block. The dominant value (zero corner radius on every captured surface). - `{rounded.sm}` 4px — declared in CSS but appears only once in the rendered page on a single tag chip. - `{rounded.full}` 9999px — used exclusively on the Members-only pill badge (8 occurrences). The only rounded shape in the chrome. There is no 8px, 12px, or 16px tier. The decision is print-zine: square cards, square photos, square buttons. The pill geometry on the Members-only badge is the single softening move on the page, and it reads as the warmest, most-tappable element precisely because nothing else carries a curve. ## Components **`hero-heading`** — VICE Grotesk at 50px weight 900, rendered in ink black on the white canvas. The signature display moment — used for section titles like "Life, Culture" and "MOTHERBOARD Tech". **`section-heading`** — VICE Grotesk at 40px weight 700. The h2 article-headline tier inside story cards. **`section-heading-inverted`** — Same 40px / 700 typography rendered in `{colors.canvas}` (white) on the inverted black promo bands. **`body-paragraph`** — VICE Grotesk at 14px weight 400. Default running text on the light grid. **`body-paragraph-promo`** — `{colors.canvas}` (white) text at 19px / 400 — but rendered in Helvetica Neue rather than VICE Grotesk. This is the only place a non-VICE-Grotesk sans appears in the system; the Members-only promo strip body copy uses Helvetica Neue intentionally to feel like institutional copy rather than VICE editorial copy. **`mono-caption`** — Source Code Pro at 11px weight 400, used for UPPERCASE timestamps, bylines, and category tags below every photograph in the story grid. **`mono-caption-inverted`** — Same mono caption typography rendered in white on the inverted black promo bands. **`button-primary`** — Black `{colors.ink}` fill, white text, 0 corner radius, 16px padding, 48px height. The canonical instance is "Open Menu" in the top-nav. Note: no border, no hover-lift, no rounded corner — the button reads as a flat ink-stamped block. **`button-secondary`** — White fill, ink text, 1px ink border, 0 radius, 12x20 padding, 44px height. The inverse of the primary — used for tertiary actions below the fold. **`top-nav`** — White surface, 56px height, 1px bottom ink border, 10x40 padding. Holds the VICE wordmark on the left and a row of UPPERCASE category links (Magazine, News, Tech, Music, etc.) in `{typography.nav-link}` (16px / 900 UPPERCASE). **`nav-link`** — Transparent background, ink text in `{typography.nav-link}` (16px / 900). 10px padding, 34px height. The labels read as ink-stamped print marks rather than soft web links. **`card`** — White surface, 0 corner radius, optional 1px `{colors.hairline-light}` border, 0x30 padding. The default story card holds a photograph at the top, a Source Code Pro mono caption (category + date), a 20px headline, and a byline row. **`card-inverted`** — Ink black `{colors.ink}` fill, white text, 0 corner radius, 40px internal padding. The inverted Members-only and MOTHERBOARD promo band — full-bleed black with Helvetica Neue 19px body copy and a single black-on-white pill CTA. **`members-pill`** — Ink black fill, white Source Code Pro UPPERCASE text at 11px / 700, 9999px radius, 4x16 padding, 24px height. The single use of pill geometry on the page; reserved exclusively for the Members-only badge. ## Do's and Don'ts **Do** ship the chrome with zero saturated brand accent. The move that defines this system is VICE's refusal of the held-in-reserve accent convention — every chromatic moment on the page comes from editorial photography, and any brand-accent fill on a CTA or kicker would compete with the imagery. The CSS declares vivid purple, luminous orange, and vivid red as WordPress preset fallbacks; none of them render. Adding a hazard-red Subscribe pill in the style of The Atlantic would dilute VICE's specific monochrome-refusal voice. **Do** use Source Code Pro at 11px UPPERCASE for every timestamp, byline, and category tag. The monospace metadata is VICE's typographic fingerprint — 96 occurrences in the captured page. Reaching for an UPPERCASE-tracked sans label tier instead would push the system toward magazine-editorial convention (The Atlantic, Bloomberg) and lose the print-zine voice. **Do** set display headlines in VICE Grotesk at weight 900. The grotesk's heaviest weight is what reads as ink-stamped authority — bumping down to weight 700 for hero tiles would soften the chrome toward editorial-magazine restraint and undercut the confrontational identity. **Do** treat the inverted black promo band (`{component.card-inverted}`) as the system's emphasis device instead of a color accent. Members-only content, Motherboard Tech, and special editorial features all use the black flip rather than a brand-accent fill — the monochrome flip is the rhythm device. **Don't** add an 8px or 12px corner radius to any card. The system runs 0px on every card and 9999px only on the Members-only pill — adding a middle radius tier would shift the page from print-zine to consumer-SaaS. If you need to soften a surface, increase its hairline-border weight rather than rounding the corner. **Don't** introduce a soft-blur drop shadow. The system uses a single hard `6px 6px 0px rgb(0, 0, 0)` block-offset shadow as the only elevation move — a black block-shadow with no blur. Switching to a Material-style soft-blur 0 4px 12px rgba(0,0,0,0.08) would replace the print-zine offset with web-product elevation and lose the ink-stamped paper feel. **Don't** mix Helvetica Neue into VICE Grotesk lockups in the standard story grid. The 19px Helvetica Neue body copy is scoped exclusively to the Members-only promo strip, where it intentionally reads as institutional rather than editorial. Using Helvetica Neue inside a story-card body would dilute the VICE Grotesk + Source Code Pro pairing that defines the brand. **Don't** use `{colors.hairline-light}` (#e8e8e8) as a background fill. It is a border-only token (34 of 34 occurrences are borders). For a light surface, use `{colors.canvas}` (#ffffff). The system has no secondary-surface tier — the canvas is white and the inverted surface is pure ink. ## Known Gaps - **Hover and focus states:** the resting states of `{component.button-primary}` and `{component.nav-link}` are captured; hover backgrounds, focus rings, and disabled tints are not exposed on the marketing surface. - **Form input error states:** no text input is exposed on the captured homepage — VICE's subscribe flow and Members-only signup live on a separate surface with their own input chrome. - **Dark mode:** the captured surface is light-only. The WordPress base CSS declares dark-mode variants (`{colors.border-dark}` — #1a1a1a, `{colors.surface-medium}` — #757575) but none of them render on the live homepage. - **Motion:** the homepage video-promo blocks animate but the spec captures end-state values only. Easing curves, autoplay timing, and parallax behavior are not represented. - **Article-detail and video-detail surfaces:** this DESIGN.md captures the homepage only. The article-detail view runs a different type ladder (longer body measure, drop-cap on lead paragraphs, pull-quote chrome) and the VICE Studios video surfaces carry their own player chrome — neither is included here. - **Members-only product chrome:** the gated subscriber experience runs on a separate authenticated surface with its own component vocabulary not represented here. - **WordPress preset colors:** the CSS exposes a full WordPress preset palette (vivid purple, luminous orange, vivid red, cyan blue, etc.) inherited from the underlying CMS. These tokens are reachable from the editor-block surface but the live marketing site refuses every one of them — the gap is the documented absence of these accents from the rendered chrome.