The Verge
Identity
Media & Consumer
Bundled OpenDesign package for The Verge, derived from curated DESIGN.md, tokens.css, and components.html fixtures.
Typography
Ag
Ag
Ag
--text-4xl · 96pxThe quick brown fox--text-3xl · 66pxThe quick brown fox--text-2xl · 42pxThe quick brown fox--text-xl · 26pxThe quick brown fox--text-lg · 19pxThe quick brown fox--text-base · 16pxThe quick brown fox--text-sm · 14pxThe quick brown fox--text-xs · 12pxThe quick brown foxPalette
#050505Page background — defines the brand canvas.#111111Card / lifted container background.#211022Tertiary surface tier (kami warm-sand).#ffffffPrimary text color.#e5e7ebSecondary text tier (kami dark-warm).#9ca3afSubtext / captions.#ff00a8Tertiary FG / metadata tier (kami stone).#2b2b2bDefault border / card edge.#1d1d1dInner row separator that should not visually compete.#ff00a8Brand accent. ≤2 visible uses per screen (lint enforced).#ffffffFG when --accent is the bg.#22c55eSuccess state.#facc15Warning state.#ef4444Danger state.Also named in DESIGN.md
#3cffd0The Verge's signature acid-mint accent. Used as CTA button fill, link underlines, active tab borders, and hig…#5200ffThe complementary brand hazard. Used for secondary color-block tiles, promotional spans, and the occasional o…#309875A darker variant of the jelly mint used on card outlines and button borders where pure mint would over-satura…#3860beThe link hover color — the one moment blue appears on the site. It replaces mint/white/black on hover across…#1eaedbReserved for button focus rings. Never shown outside a keyboard-focus state.#3d00bfA darker ultraviolet variant used as the vertical border on StoryStream <li> items.#131313The default dark surface for the entire homepage. Almost-but-not-quite pure black — has just enough warmth to…#2d2d2dSecondary card background, used when a story tile doesn't need to be a saturated color block.#313131The 1px border that wraps inline imagery.#000000Reserved for text on the mint/yellow/white tiles — the only place it appears.#949494Bylines, timestamps, photo credits. The mid-gray that anchors the metadata layer.Imagery & layout
Radius
4px8px12px9999pxSpacing
--space-1 · 4px--space-2 · 8px--space-3 · 12px--space-4 · 16px--space-5 · 20px--space-6 · 24px--space-8 · 32px--space-12 · 48pxElevation
--elev-raisedLayout
kickers sit ~6–10px above headlines; headlines sit ~10–14px above decks; timestamps sit ~6–8px below decks.
Layout rules
- Base unit: 8px.
- Scale: 1, 2, 4, 5, 6, 8, 9, 10, 12, 14, 15, 16, 20, 24, 25px.
- Section padding: 32–64px vertical between major feed sections. StoryStream items themselves are tighter — 12–16px gaps.
- Card padding: 20–32px interior. Feature cards expand to 40–48px.
- Inline spacing: kickers sit ~6–10px above headlines; headlines sit ~10–14px above decks; timestamps sit ~6–8px below decks.
- Micro-scale: The 2/4/5/6/9/10px values are used inside buttons, pills, and tight label clusters, not in the editorial grid.