Vox Design System

Overview

Vox's editorial chrome is single-voltage yellow — the entire brand identity is concentrated into one hazard-yellow band ({colors.primary} — #fff200) that pins the wordmark to the top of every page, and reappears in just 13 smaller paint events below the fold. Where most general-interest news brands run two or three competing accents (a brand red plus a section color plus a CTA blue), Vox commits to one yellow strip and lets the rest of the page resolve as ink on paper. The canvas is pure white ({colors.canvas} — #ffffff), the body type is set in Harriet serif at #131313, the headlines are set in Balto sans at #131313, and the eyebrow labels are set in Roboto Mono at #131313 — three families doing three jobs with zero color overlap.

The shape language is square-with-exceptions. The masthead band, every story card, every feature tile, and every hairline divider renders at 0px radius. The "Join now" CTA softens to 1px. The newsletter input softens to 2px. Only the search-orb, account-orb, and most-popular bullets break to circles at 50%. Square corners reinforce the printed-magazine voice — a 12px rounded button would break the editorial register the brand depends on.

The type system runs whisper-shout-explain: Roboto Mono UPPERCASE eyebrows at 11–12px whisper the section label with 1.1px tracking; Balto 700 shouts the headline at 22–70px with -0.7px display tracking; Harriet 400 serif explains in 14–20px body with -0.14 to -0.2px tracking. Each register is locked to its own family, and the families never cross.

Key Characteristics:

• Single-voltage yellow: {colors.primary} (#fff200) appears in 14 paint events total — masthead band, "Join now" CTA, "Future Perfect" feature tile, and 11 smaller bullets and badges. Never as text color, never as border, never as hover.
• Three-family editorial voice: Balto sans for display and UI (22–70px / 700), Harriet serif for body (14–20px / 400), Roboto Mono for UPPERCASE eyebrows (11–12px / 500–700).
• Near-black ink hierarchy: {colors.ink} (#131313) carries 1000 paint events as text and 1px hairlines; absolute {colors.ink-absolute} (#000000) is reserved for the wordmark itself and the main nav link cluster (1822 paint events, mostly as text and the cleanest border ink).
• Square 1–2px geometry: every CTA at 1px, every input at 2px, every story card and tile at 0px. Circles only on the search and account orbs.
• Hairline-as-elevation: the only structural divider is {colors.hairline} (#e9e9e9), used in 7 paint events as 1px rule borders. No drop shadows, no glows, no gradients anywhere.
• Whisper-shout-explain typography: Roboto Mono whispers, Balto shouts, Harriet explains. The three registers never share a family.
• Sky-blue cameo: {colors.link-blue} (#6aaae4) appears in exactly one paint event — the small "vox.com" dot above the masthead — and never reappears anywhere else in the system.

Colors

Brand

• Hazard Yellow ({colors.primary} — #fff200): frequency 14. Used as bg (14). The single-voltage brand color. Carries the masthead band, the "Join now" pill CTA, the "Future Perfect" feature tile, and the most-popular bullet markers. Treated as caution-tape rather than a marketing accent — always 100% saturation, never faded.
• On-Primary Ink ({colors.on-primary} — #131313): The near-black laid on top of the yellow band. The yellow-on-ink contrast is the brand's primary signature.

Ink

• Near-Black Ink ({colors.ink} — #131313): frequency 1000. Used as text (503), border (496), shadow (1). The workhorse text and hairline color across body paragraphs, headlines, and card outlines. Not pure black — just enough warmth to read like printed newsprint rather than an OLED void.
• Absolute Ink ({colors.ink-absolute} — #000000): frequency 1822. Used as text (919), border (881), shadow (21). The wordmark color and the nav-link cluster. The single highest-frequency hex on the page, but reserved for the masthead and primary navigation — body type runs at #131313 instead.
• Soft Ink ({colors.ink-soft} — #4a4a4a): frequency 46. Used as text (23), border (23). The mid-gray used on byline metadata and secondary captions. The first step down from the near-black workhorse.
• Muted Ink ({colors.ink-muted} — #636363): frequency 62. Used as text (31), border (31). The deeper mid-gray used on timestamps and image credits.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 18 (representative of the white cluster). Used as bg (16). The default page background and card fill. The white canvas carries the entire visual rhythm — every accent is judged against it.
• Canvas Soft ({colors.canvas-soft} — #f6f6f6): A near-white variant from the same perceptual cluster. Used for alternating section backgrounds and quiet card fills.
• Canvas Softer ({colors.canvas-softer} — #f5f5f5): The deepest of the three near-whites. Reserved for the footer band and the "Recommended for You" rail background.

Hairline

• Hairline ({colors.hairline} — #e9e9e9): frequency 7. Used as border (7). The only structural divider in the system. 1px unbroken rules between sections, beneath story-card images, and along the recommendation rail. No double-rules, no dashed variants.

Cameo Accent

• Sky Blue ({colors.link-blue} — #6aaae4): frequency 1. Used as bg (1). The single non-grayscale hex outside yellow. Applied once to the small "vox.com" dot directly above the masthead band. Never reappears anywhere else on the page — its scarcity is the design decision.

Text Roles

• Primary Text ({colors.text-primary} — #131313): Body and headline ink. The default text role for the entire reading experience.
• Text on Yellow ({colors.text-on-yellow} — #131313): The ink used on top of the yellow band. Same hex as primary text, redeclared as a role so the band and CTA components reference it explicitly.
• Text on Ink ({colors.text-on-ink} — #ffffff): The white text used on the account-orb and the secondary ink button. The only place white appears as type.

Border Roles

• Border Ink ({colors.border-ink} — #131313): The 1px unbroken ink border on inputs and outlined pill tags. Same hex as primary text, redeclared so component definitions can reference it as a border role.
• Border Soft ({colors.border-soft} — #e9e9e9): The 1px hairline border on story cards and section dividers.

Overlay

• Shadow 1px ({colors.shadow-1px} — rgba(0, 0, 0, 0.12)): The single near-transparent ring applied beneath story-card images. Functions as a hairline, not as a drop shadow.
• Hover Overlay ({colors.hover-overlay} — rgba(19, 19, 19, 0.04)): The 4-percent ink wash applied on nav-link hover. Replaces an underline or color shift.
• Focus Ring ({colors.focus-ring} — rgba(255, 242, 0, 0.65)): The keyboard focus ring color. The only place yellow appears at a partial alpha — and only in a focus state.

Gradient System

Vox uses zero decorative gradients. The yellow band is a flat #fff200 rectangle. The "Future Perfect" tile is a flat #fff200 rectangle. There is no fade, no transition, no atmospheric wash. Color is applied in flat blocks only.

Typography

Font Family

Three families do the work, and they never overlap. Balto (Mark Simonson Studio, fallback Helvetica Neue / Helvetica / Arial) is the sans display and UI face — it carries the wordmark, every headline at 22–70px / weight 700, every nav link, every "Join now" button label, and the secondary deck text at 14px / 400. Harriet (Okay Type, fallback Georgia / Times New Roman) is the serif body face — it carries every paragraph and most caption text at 14–20px / weight 400 with negative letter-spacing (-0.14 to -0.2px). Roboto Mono (Google Fonts) is the UPPERCASE eyebrow — kicker labels, byline timestamps, and section markers at 11–12px / weights 500 and 700 with 1.1–1.2px tracking.

Hierarchy

Principles

Whisper-shout-explain. Roboto Mono UPPERCASE eyebrows at 11–12px whisper the section context. Balto 700 at 22–70px shouts the headline. Harriet 400 at 14–20px explains in long-form serif body. Each register is locked to its own family — Balto never appears as body, Harriet never appears as a label, Roboto Mono never appears in mixed case.

Letter-spacing runs in three registers. Positive tracking (1.1–1.2px) for ALL-CAPS mono and pill labels. Slightly positive (0.13px) for the Join-now button. Negative (-0.14 to -0.7px) for Harriet body and Balto display — the negative track tightens the serif body and the 70px sans display alike. Plain 0 tracking is the default for the mid-tier headlines (17–40px Balto).

Line heights are tight (1.0–1.2) for every headline and label, slightly relaxed (1.4) only for the 14px body deck. The 70px display sits at exactly 1.0 leading — the descender of one line touches the ascender of the next, treating each headline as a single typographic block rather than a paragraph.

Layout

Spacing System

• Base unit: 4px with a 5–6px micro-step.
• Tokens: {spacing.hair} 1px · {spacing.micro} 4px · {spacing.xs} 6px · {spacing.sm} 10px · {spacing.base} 15px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.section} 40px.
• Card internal padding: 30×20px on feature tiles; 15px on standard story cards; 14×0×14×14px on nav-link cells.
• Section padding (vertical): 40px between major homepage sections.
• Inline spacing: eyebrows sit ~6–10px above headlines; headlines sit ~10–15px above decks; bylines sit ~6–8px below decks.

Grid & Container

• Max content width: roughly 1280px centered, similar to most Vox Media sister properties.
• Column patterns: a 12-column underlying grid that resolves into 8-column main feed + 4-column right rail. The masthead band is full-bleed at 100% width.
• Container padding: 24px mobile / 40px desktop on the outer edges.
• Gutters: 15–20px between columns, tighter (10px) inside the recommendation rail.

Whitespace Philosophy

The page is paced rather than airy. The yellow band acts as a hard visual anchor at the top, and the rest of the page settles into stretches of #ffffff with #e9e9e9 hairline rules every 40px. Whitespace carries the editorial rhythm — story cards have very tight 15px interior padding, and the visual breathing room lives in the 40px section gaps rather than the card interiors.

Border Radius Scale

• {rounded.square} 0px: the masthead band, every story card, every feature tile, every hairline divider.
• {rounded.hair} 1px: the "Join now" CTA — barely-there softening of the absolute square.
• {rounded.input} 2px: the newsletter email input. Slightly more rounded than the CTA so the form field reads as interactive.
• {rounded.pill} 100px: pill-tag variants on the section-header cluster.
• {rounded.full} 9999px: search-orb, account-orb, and most-popular bullet markers.

Five discrete radius values, but the practical system is binary: 0–2px for rectangles, 50% for circles. The 100px pill is a third register reserved for section tags.

Elevation

Vox's depth philosophy is hairline-as-elevation. There are 21 shadow paint events in the extracted tokens, but every one of them is either a 1px inset underline on an active nav tab or a 1px ring on a focus state — none are traditional drop shadows.

When something needs to stand out it doesn't get a shadow — it gets a yellow fill or a 1px ink border. The white canvas stays flat throughout, and hierarchy is carried by typographic weight contrast and the single yellow accent. No gradients, no glows, no atmospheric blurs anywhere.

Shapes

The corner-radius philosophy is square-with-exceptions. Every container, every tile, every divider is a hard 0px rectangle. The two interactive softening exceptions are the 1px Join-now CTA and the 2px newsletter input — both barely-visible adjustments that signal "this is interactive" without breaking the printed-magazine register. Circles (50%) are reserved for the small search-orb and account-orb in the masthead and the round bullet markers on the "Most Popular" list. A single 100px-radius pill variant is used on a handful of outlined section-header tags. There is no 8px, no 12px, no 16px in the system — the rounded-mid range that most SaaS UIs default to is entirely absent.

Components

Masthead

masthead-band — Full-bleed {colors.primary} (#fff200) horizontal strip pinned to the top of every page. Height roughly 60px. Holds the wordmark on the left, nav-link cluster in the center, and search/account orbs on the right. No shadow, no border — the saturated yellow fill carries the entire band.

wordmark — "Vox" rendered in Balto 40px / 700 at #000000 absolute ink. The only place absolute black is used as type at a large size.

Buttons

button-primary — The "Join now" CTA. {colors.primary} (#fff200) fill, {colors.on-primary} (#131313) text, Balto 13px / 700 with 0.13px tracking, {rounded.hair} 1px radius, 0×20px padding, 40px height. Hover dims to 0.85 opacity — no color shift, no underline.

button-secondary — Near-black {colors.ink} (#131313) fill, {colors.text-on-ink} (#ffffff) text. Same Balto 13px / 700 label, same 1px radius, same 40px height. Used for "Subscribe" and secondary newsletter CTAs.

Navigation

top-nav — Sits inside the masthead band at 64px height. Holds 6–8 section links in Balto 17px / 700 at #000000 with 14×0×14×14px padding.

nav-link — Default state. Balto 17px / 700 at #000000. No underline, no background. Hover applies {colors.hover-overlay} (rgba(19, 19, 19, 0.04)) as a 4-percent ink wash.

nav-link-active — Marked by a 1px unbroken #131313 underline border. Text stays the same color — only the rule shifts.

search-orb — 32px circle, {rounded.full} 50% radius, #ffffff fill with a #131313 magnifying-glass icon.

account-orb — 32px circle, {rounded.full} 50% radius, {colors.ink} (#131313) fill with a white silhouette icon. Anchors the right edge of the masthead.

Cards & Tiles

story-card — Standard recommendation-rail story. {colors.canvas} (#ffffff) fill, 1px unbroken {colors.hairline} (#e9e9e9) border, 0px radius, 15px interior padding. Headline in Balto 17px / 700 at #131313. Image clips to the outer 0px radius — square corners on the photograph match the card itself.

feature-tile-yellow — The "Future Perfect" feature tile. {colors.primary} (#fff200) full-bleed fill, {colors.on-primary} (#131313) text, 30×20px padding, 0px radius. Headline in Balto 30px / 700. The only saturated tile in the system besides the masthead band.

Editorial Bits

hero-headline — The 70px Balto display headline used on section feature spreads like "Explainers". Weight 700, -0.7px tracking, 1.0 line-height. Sits in {colors.ink} (#131313) on a white canvas with no background.

section-eyebrow — The Roboto Mono UPPERCASE label that sits above every section title. 12px / 700 with 1.2px tracking, #131313 text. Examples: "EVEN BETTER", "MAKING SENSE OF IT ALL".

byline-timestamp — Roboto Mono 11px / 500 UPPERCASE with 1.1px tracking, in {colors.ink-muted} (#636363). Sits below story-card headlines.

body-paragraph — Harriet 16px / 400 with -0.16px tracking, 1.2 line-height. The serif body voice across every long-form explainer paragraph.

pill-tag — Outlined section tag. {colors.canvas} (#ffffff) fill, 1px unbroken {colors.ink} (#131313) border, {rounded.pill} 100px radius, Balto 11px / 700 UPPERCASE with 1.1px tracking, 4×10px padding.

hairline-divider — 1px tall {colors.hairline} (#e9e9e9) rule. The only structural divider in the system. Applied between sections and beneath story-card images.

most-popular-bullet — Round yellow bullet marker. {colors.primary} (#fff200) fill, {rounded.full} 50% radius, 20px diameter. Used to enumerate the "Most Popular" list on the homepage right rail.

Forms

newsletter-input — Email field on the newsletter signup. {colors.canvas} (#ffffff) fill, 1px unbroken {colors.ink-absolute} (#000000) border, {rounded.input} 2px radius, Harriet 16px / 400 text, 8×0×8×12px padding, 40px height. Placeholder text in #636363.

Do's and Don'ts

Do use {colors.primary} (#fff200) only as background fill — never as text, never as a border, never as a hover state. The single-voltage rule is what gives the yellow band its identity.

Do lock each typeface to one job: Balto for display and UI, Harriet for serif body, Roboto Mono for UPPERCASE eyebrows. Crossing families breaks the whisper-shout-explain register.

Do keep corners at 0–2px for rectangles and 50% for circles. The 4–12px rounded-mid range that most SaaS UIs default to is entirely absent.

Don't swap {colors.ink-absolute} (#000000) and {colors.ink} (#131313) interchangeably. The wordmark and primary nav are #000000; body text and hairline borders are #131313. The 19-unit warmth difference is small on screen but consistent across the entire system — readers parse the masthead as harder-edged than the body.

Don't apply {colors.hairline} (#e9e9e9) as a fill or a text color — it only exists as a 1px border (7 paint events, all as borderColor). For light surfaces, use {colors.canvas-soft} (#f6f6f6) instead.

Don't introduce a hover state on the yellow band or the Join-now CTA other than the 0.85 opacity dim. Color-shifting the yellow breaks the caution-tape register — the brand depends on the yellow staying yellow.

Don't add a drop shadow to story cards. The system uses 1px {colors.hairline} (#e9e9e9) borders as the only elevation primitive. A Material-flavored shadow would make the card float off the printed-magazine canvas.

Don't use Roboto Mono in mixed case. Lowercase mono does not exist in the system — every Roboto Mono instance is UPPERCASE with 1.1–1.2px tracking. Mixing case breaks the eyebrow signature.

Don't widen the radius on the Join-now CTA past 1px or the newsletter input past 2px. A 12px rounded button would read as a generic SaaS CTA and break the editorial register the brand depends on.

Known Gaps

• Article-detail body typography: the long-form reading view past the homepage (article pages, podcast embeds, video explainer templates) is not fully captured. The homepage and recommendation rail cover roughly 85% of the surface area readers actually encounter.
• Vox Media sub-brand palettes: sister properties (The Verge, Polygon, SB Nation, Eater) share infrastructure but have entirely different color systems — not included here.
• Mobile masthead behavior: the band collapses to a hamburger drawer below 900px, but the exact stacking order of the search-orb, account-orb, and section nav on mobile was not extractable from the desktop capture.
• Dark-mode treatment: Vox's homepage is light-only. There is no documented dark theme on the extracted surface.
• Loading skeletons and empty states: not visible on the captured homepage.
• Form validation error states: the system has no documented red/green semantic palette — error treatment for the newsletter form was not captured.