What is Vox's primary brand color?

Vox's signature color is a saturated hazard-yellow at #fff200. It appears in just 14 paint events across the homepage — the masthead band that pins the wordmark to the top of every page, the 'Join now' CTA fill, the 'Future Perfect' feature tile, and the bullet markers on the 'Most Popular' list. It is never used as a text color, never as a border, never as a hover state. The brand operates as a single-voltage system: one yellow moment, one near-black ink stack (#131313 for body, #000000 for the wordmark), and one #e9e9e9 hairline for dividers.

What typography does Vox use, and what should I substitute?

Vox runs three families. Balto (Mark Simonson Studio) is the sans display and UI workhorse at 11–70px across weights 400 and 700 — it carries the wordmark, every headline, every nav link, and the Join-now button label. Harriet (Okay Type) is the serif body face at 14–20px weight 400 with -0.14 to -0.2px tracking — it carries every paragraph and most caption text. Roboto Mono is the UPPERCASE eyebrow at 11–12px weights 400/500/700 with 1.1px tracking — kickers, byline timestamps, and section labels. Closest open-source substitutes are Inter or Hanken Grotesk for Balto, Source Serif Pro or Lora for Harriet, and IBM Plex Mono for Roboto Mono.

Why are corners almost always 1–2px and never larger?

Vox's geometry is rectangular by design. The 'Join now' CTA renders at 1px radius — barely visible, just enough to soften the absolute square. The newsletter email input renders at 2px radius. Story cards, masthead band, and feature tiles all render at 0px. The only circular shapes in the system are the small search-orb and account-orb at 50% radius, and a 100px-pill variant for the section-header tags. Square corners reinforce the printed-magazine voice; a 12px rounded button would break the editorial register the brand depends on.

How is the yellow band actually used on the page?

The #fff200 yellow is applied as a hazard band — a full-bleed horizontal strip pinned to the top of the page behind the wordmark, plus three smaller paint events below the fold. It appears as a 14-cell paint signature across the entire homepage: 1 masthead band, 1 Join-now button fill, 1 'Future Perfect' feature tile background, and 11 smaller bullet, badge, and pull-quote treatments. It is never used as a text color, never as a hover state, and never fades — the yellow is always at 100% saturation. The treatment is closer to caution-tape than to a marketing accent.

Why does Vox avoid drop-shadows?

The system uses hairline-as-elevation. There are 21 shadow paint events in the extracted tokens, but every one of them is either a 1px inset underline (active nav tab) or a 1-pixel ring on a focus state — never the layered drop shadows you would see on a Material-flavored site. When something needs to stand out it gets a 1px #e9e9e9 hairline, a yellow tile fill, or a Roboto Mono UPPERCASE kicker above the headline. The #ffffff canvas stays perfectly flat throughout, and hierarchy is carried by the yellow band plus typographic weight contrast rather than by depth.

Can I use this DESIGN.md to build a React publication?

Yes. Feed the file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce Vox's editorial voice — yellow hazard band, ink-on-paper headlines, three-family type stack, square 1px corners, and Roboto Mono UPPERCASE kickers. You can also paste the tokens directly into Tailwind config or CSS variables. The spec captures the 19-color palette, 12-step typographic ladder, 4-step radius scale, 9-step spacing scale, and 18 component specifications covering masthead, buttons, story cards, navigation, newsletter form, and the most-popular bullet list.

Vox Design System

Vox's editorial design system as a DESIGN.md file.

About Vox DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source vox.com

News & Publishing

Vox runs an editorial news surface where the entire brand voltage is concentrated into one move: a hazard-yellow band (#fff200) that pins the masthead to the top of every page and reappears as the "Join now" CTA fill, the "Future Perfect" feature tile, and a handful of pull-quote highlights. Below the yellow strip, the page is a strict ink-on-paper editorial — near-black headlines at #131313, paragraphs in Harriet serif at 14–20px, eyebrow labels in Roboto Mono at 11–12px UPPERCASE with 1.1px letter-spacing — that reads like a printed magazine ported to the web. There is no atmospheric gradient, no decorative chrome, no secondary accent — the only non-grayscale hex on the page besides yellow is a single sky-blue (#6aaae4) used once for the small "vox.com" dot above the masthead.

This DESIGN.md file captures the system as a single machine-readable spec: 19 color tokens grouped into brand, ink, surface, and overlay families; 12 typography tokens spanning Balto display (22–70px weight 700, -0.7px tracking), Harriet serif body (14–20px weight 400), Roboto Mono UPPERCASE eyebrows (11–12px), and three navigation registers; a 4-step radius scale (1px, 2px, 100px, 50%) where square corners are the rule and circles the exception; a 9-step spacing scale built on a 4–10px micro-base; and 18 component specifications covering the yellow masthead band, "Join now" pill CTA, story cards, recommendation rail, byline rows, search and account orbs, newsletter input, and the "Most Popular" yellow-bullet list. The format follows the Google Labs DESIGN.md specification.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Vox's editorial voice — yellow hazard band, ink-on-paper headlines, three-family type stack, square 1px corners, and the signature Roboto Mono kicker label that carries every "Recommended for You" and "Future Perfect" eyebrow. Or paste tokens directly into Tailwind config or CSS variables. The system is worth studying because almost no other general-interest news site commits this hard to a single accent moment — most editorial brands run two or three competing colors. Vox bets that one saturated yellow strip plus three working typefaces can carry an entire news product, and the math works.

What makes it distinct

Single-voltage yellow masthead#fff200 used in just 14 paint events across the page, never as a text color or border
Three-family editorial voiceBalto 700 display, Harriet 400 serif body, Roboto Mono 500/700 UPPERCASE eyebrows with 1.1px tracking
Near-black ink hierarchy#131313 carries 1000 paint events as text and 1px hairlines; pure #000000 is reserved for the wordmark and nav links
Square 1–2px corner geometryevery CTA renders at 1px radius and every input at 2px radius, with circular 50% only on the search and account orbs
Zero shadows, zero gradientsdepth is carried by the yellow masthead band and #e9e9e9 hairlines, not by elevation

Live at vox.com

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

vox.com

Explore Vox

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Vox design system FAQ

Common questions about Vox's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Vox — official site

General-interest news, explainers, and policy analysis from Vox Media.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Vox in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→