What is The Verge's primary brand color?

The Verge runs a dual-hazard accent system rather than a single brand color. Jelly Mint (#3cffd0) is the signature acid-mint applied to CTA fills, active tab underlines, and high-attention story tiles. Verge Ultraviolet (#5200ff) is the complementary hazard used on secondary color-block tiles, promotional outlines, and the StoryStream rail. Both are treated as neon safety paint — applied sparingly to the most important elements, never as background washes or gradient fades.

Does The Verge have a light mode?

No. The homepage canvas is Canvas Black (#131313) — almost-but-not-quite pure black, with just enough warmth to read like a printed newsprint negative rather than an OLED void. There is no light mode toggle, no light-canvas inversion. The dark surface is the product. The only time the palette inverts is when a single story tile takes a mint, yellow, or white fill — that fill is treated as editorial spotlight rather than a theme switch.

What typography does The Verge use, and what should I substitute?

Four families do the work. Manuka 900 (Klim Type Foundry) carries display headlines and the wordmark at 60–107px — never smaller. PolySans (PanGram Pangram) is the UI workhorse across weights 300/500/700, including the signature thin-weight 19–20px capitalized eyebrows with 1.9px tracking. PolySans Mono handles every UPPERCASE label, timestamp, kicker, and button — lowercase mono does not exist in the system. FK Roman Standard appears rarely for print-voice review excerpts. If Manuka is unavailable, Anton, Oswald, Bebas Neue, or Archivo Black work as substitutes but require +0.10 to +0.15 line-height to prevent ascender collisions at 107px.

Why so many border-radius values?

Eight discrete radii — 2px, 3px, 4px, 20px, 24px, 30px, 40px, and 50% — is unusually many for a single site, and it is deliberate. The 2px values feel like typewriter tags on form inputs, 20px is the standard pill card, 24px marks feature tiles and primary buttons, 30–40px is reserved for the loudest outlined CTAs, and 50% creates avatar circles and icon buttons. The rhythm between tiny tags, pill cards, and oversize outlined buttons creates a nested-scale feel where every component announces its hierarchy through its corners. Square corners break the voice entirely.

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 the hazard-tape voice — dark canvas, mint and ultraviolet accents, Manuka above PolySans whispers, pill-cornered everything, and color-as-elevation instead of shadows. You can also paste the tokens directly into Tailwind config or CSS variables. The spec captures the full token vocabulary, component specifications, responsive breakpoints (26 intermediate values from 320px to 1300px), and an iteration guide for auditing screens against the voice.

Why does The Verge avoid shadows?

The system uses color-as-elevation. There are 14 shadow entries in the extracted tokens, but all of them are either 1px inset underlines (active tab marks) or near-transparent 1px rings — never the layered drop shadows you would see on a Material-flavored site. When something needs to stand out, it gets a Jelly Mint fill, a 1px hazard-color border, or a saturated color-block treatment. The #131313 canvas stays perfectly flat throughout, and hierarchy is carried by color saturation rather than depth. Gradients are banned entirely — the hazard-tape aesthetic would dissolve if anything faded softly.

What's missing from this DESIGN.md spec?

A handful of pieces are documented in the Known Gaps section. Article-detail body typography (the long-form reading view past the homepage) is not fully captured. The Verge's video player and podcast embed components, loading skeletons, full form validation error states, and the Polygon and SB Nation sub-brand palettes (sister Vox Media properties) are not in scope. The homepage and StoryStream timeline cover roughly 90% of the surface area readers actually encounter.

The Verge Design System

The Verge's 2024 redesign as a DESIGN.md file.

About The Verge DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source theverge.com

News & Publishing

The Verge's 2024 redesign reads like a Condé Nast magazine wired to a chiptune soundboard. The canvas is almost-black (#131313 — not pure black, with just enough warmth to feel like a printed newsprint negative), and the whole page is peppered with acid-mint #3cffd0 and ultraviolet #5200ff that behave less like brand colors and more like hazard tape. Display headlines crash in at 107px in Manuka 900, a brutally heavy industrial sans from Klim Type Foundry. There is no light mode on the homepage. Story tiles are not quiet gray cards but saturated full-bleed color blocks in mint, purple, yellow, pink, and orange that feel like pasted-up rave flyers arranged into a timeline. The mood is serious enough to cover a congressional hearing, loud enough to review a synthesizer.

This DESIGN.md file packages the entire system into a single machine-readable spec. Inside: 23 color tokens organized into hazards, surfaces, neutrals, and semantics; 21 typography tokens spanning Manuka display (60–107px), PolySans body and label work, PolySans Mono for every UPPERCASE moment, and FK Roman Standard for rare print-voice excerpts; 8 corner-radius values from 2px typewriter tags to 40px outlined CTA pills; a 14-step spacing scale built on an 8px unit; and 30+ component specifications covering the StoryStream timeline, color-block tiles, navigation, buttons, forms, and image frames. The format follows the Google Labs DESIGN.md specification.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces The Verge's hazard-tape voice — dark canvas, mint and ultraviolet as neon safety paint, Manuka shouting above thin-weight PolySans whispers, pill-cornered everything, color-as-elevation in place of shadows. Reference the tokens directly to paste hex values into Tailwind config or CSS variables. The system is worth studying because almost no other mainstream editorial site commits this hard to a single aesthetic — most news publishers play it safe with white-on-black serifs and a single brand accent. The Verge bet that loud, opinionated chrome could outlast a year of trend cycles, and it has.

What makes it distinct

Dual-hazard accent systemJelly Mint #3cffd0 and Verge Ultraviolet #5200ff used as neon safety paint, never background washes
Manuka 900 at 107px display headlines, the single loudest type move in mainstream tech publishing
Color-as-elevationzero traditional box-shadows, hierarchy carried by 1px hazard borders and saturated tile fills
Eight discrete radius values (2/3/4/20/24/30/40px plus 50%)square corners break the voice entirely
StoryStream timeline rail with PolySans Mono 11px UPPERCASE timestamps replaces the traditional magazine grid

Live at theverge.com

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

theverge.com

Explore The Verge

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.

The Verge design system FAQ

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

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

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

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

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind + shadcn primitives.

Use The Verge 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 --:--:--→