Design System Inspired by The Verge
1. Visual Theme & Atmosphere
The Verge's 2024 redesign feels like somebody wired a Condé Nast magazine to a chiptune soundboard. The canvas is almost-black (#131313), the headlines are built from a brutally heavy display face (Manuka) that runs up to 107px, and the whole page is peppered with acid-mint #3cffd0 and ultraviolet #5200ff that behave less like brand colors and more like hazard tape. Story tiles are not quiet gray cards — they're saturated, full-bleed color blocks (yellow, pink, orange, blue, purple) that feel like pasted-up rave flyers arranged into a timeline. The mood is "developer console meets club night meets tech tabloid": serious enough to cover a congressional hearing, loud enough to review a synthesizer.
What makes this system unmistakable is the StoryStream timeline: a vertical feed where every post is a rounded rectangle — often 20–40px radius — filled edge-to-edge with color, framed by a thin border, and marked by a mono-uppercase timestamp on its left rail. Stories don't float on a grid; they stack on a dashed vertical rule like commits in a git log. Above that, a massive "The Verge" wordmark dominates the masthead in Manuka at hero scale, letting the reader know before any headline loads that this is editorial territory, not a template.
There is no "light mode" on the homepage — the dark canvas is the product, and the only time the palette inverts is when a single story tile takes a mint or yellow fill. The depth is almost entirely flat: hairline 1px borders (#ffffff, #3cffd0, or #5200ff) do the work that shadows would do on a Material-flavored site. Every container is either #131313 with a 1px outline, a fully saturated accent block, or a slate-gray #2d2d2d secondary surface.
Key Characteristics:
-
Near-black editorial canvas (#131313) as the default surface — no light mode on the homepage
-
Acid-mint #3cffd0 + ultraviolet #5200ff as hazard-tape accents, never quiet background wash
-
Massive Manuka display headlines up to 107px — the single loudest type move in mainstream tech media
-
Rounded pill-card everything: 20/24/30/40px corner radii, never square
-
Fully saturated color-block story tiles (mint, purple, yellow, pink, orange, electric blue) on a dark page
-
Timeline "StoryStream" feed with mono uppercase timestamps rather than a traditional magazine grid
-
Flat depth — 1px borders in white, mint, purple do the work that shadows would do elsewhere
2. Color Palette & Roles
Primary (Brand Hazards)
-
Jelly Mint (#3cffd0): The Verge's signature acid-mint accent. Used as CTA button fill, link underlines, active tab borders, and high-attention story-tile backgrounds. Treat it as the visual equivalent of neon safety paint — applied sparingly to the most important element on screen.
-
Verge Ultraviolet (#5200ff): The complementary brand hazard. Used for secondary color-block tiles, promotional spans, and the occasional outlined button. Often applied at 0.9 alpha to soften its cathode intensity.
Secondary & Accent
-
Console Mint Border (#309875): A darker variant of the jelly mint used on card outlines and button borders where pure mint would over-saturate.
-
Deep Link Blue (#3860be): The link hover color — the one moment blue appears on the site. It replaces mint/white/black on hover across every link style.
-
Focus Cyan (#1eaedb): Reserved for button focus rings. Never shown outside a keyboard-focus state.
-
Purple Rule (#3d00bf): A darker ultraviolet variant used as the vertical border on StoryStream
- items.
Surface & Background
-
Canvas Black (#131313): The default dark surface for the entire homepage. Almost-but-not-quite pure black — has just enough warmth to feel like a printed newsprint negative rather than an OLED void.
-
Surface Slate (#2d2d2d): Secondary card background, used when a story tile doesn't need to be a saturated color block.
-
Image Frame (#313131): The 1px border that wraps inline imagery.
-
Hazard White (#ffffff): Used as story-tile fill, button border, and primary text. When white appears as a large block, it's an editorial decision — a "spotlight" on that tile.
-
Absolute Black (#000000): Reserved for text on the mint/yellow/white tiles — the only place it appears.
Neutrals & Text
-
Primary Text (#ffffff): Headlines and display text on the canvas.
-
Secondary Text (#949494): Bylines, timestamps, photo credits. The mid-gray that anchors the metadata layer.
-
Muted Text (#e9e9e9): Button text on dark slate buttons. Slightly off-white to reduce screen glare.
-
Inverted Text (#131313): Used only on accent tiles (mint, yellow, white) to keep contrast legible.
Semantic & Accent
-
Focus Ring (#1eaedb): Keyboard focus only.
-
Overlay Black (rgba(0, 0, 0, 0.33)): Subtle 1px ring used as the quiet shadow alternative on stacked cards.
-
Dim Gray (#8c8c8c): Active/pressed button background — the "pressed down" state.
Gradient System
The Verge uses zero decorative gradients. The only gradient-like treatment is the transition from a saturated accent story tile (mint/purple/yellow) back to the #131313 canvas between rows. Color is applied in solid blocks, not as washes. This is a deliberate choice — the site's hazard-tape visual identity would dissolve if anything faded.
3. Typography Rules
Font Family
-
Manuka (Klim Type Foundry) — fallback: Impact, Helvetica. The signature display face for The Verge wordmark and feature headlines. A heavy-weight (900) industrial sans-serif with a condensed, almost-athletic stance. Runs at 60–107px on the homepage, never smaller.
-
PolySans (PanGram Pangram / Nikolas Wrobel) — fallback: Helvetica, Arial. The UI and secondary headline workhorse. Covers weights 300 / 500 / 700 across the system — everything from kicker captions to body decks.
-
PolySans Mono — fallback: Courier New, Courier. The monospaced sibling, used exclusively for ALL-CAPS labels: kickers, timestamps, category tags, button labels. This mono-uppercase usage is the second-most-identifiable Verge detail after Manuka.
-
FK Roman Standard (Florian Karsten) — fallback: Georgia. A serif used sparingly for specific body/caption treatments (article excerpts, certain review pulls). Adds a "print-magazine" counterpoint to the PolySans stack.
-
Roboto — fallback: -apple-system, system-ui. Utility UI font for widgets and legacy modules.
Hierarchy
Role Font Size Weight Line Height Letter Spacing Notes
Hero Wordmark / Display Manuka 107px / 6.69rem 900 0.80 1.07px The top-of-page "The Verge" logo and feature headlines
Secondary Display Manuka 90px / 5.63rem 900 0.80 — Section-level feature headlines
Tertiary Display Manuka 60px / 3.75rem 900 0.80 — Inline feature callouts
Large Headline PolySans 34px / 2.13rem 700 1.00 — Section and module headlines
Heading Wide PolySans 32px / 2.00rem 400 1.10 0.32px Sub-heroes, promotional units
Heading Medium PolySans 24px / 1.50rem 700 1.00 — Story tile headlines in the main feed
Heading Small PolySans 20px / 1.25rem 700 1.00 — Compact tile headlines
Light Capitalized Label PolySans 19px / 1.19rem 300 1.20 1.9px Thin-weight capitalized eyebrows — a distinctive Verge move
All-Caps Label XL PolySans 18px / 1.13rem 400 1.10 1.8px UPPERCASE section kickers
Bold Body PolySans 16px / 1.00rem 700 1.00 — Emphasis within decks
Body Relaxed PolySans 16px / 1.00rem 500 1.60 — Long-form reading body
Inline Label PolySans 15px / 0.94rem 400 1.20 0.15px UI labels and secondary headlines
Body Compact PolySans 13px / 0.81rem 400 1.60 — Secondary captions and decks
Eyebrow All-Caps PolySans 12px / 0.75rem 400 1.30 1.8px UPPERCASE kicker above tile headlines
Tag Label PolySans 12px / 0.75rem 400 1.20 0.72px UPPERCASE category tag
Caption Micro PolySans 11px / 0.69rem 400 1.20 1.1px UPPERCASE bylines
Meta Nano PolySans 10px / 0.63rem 500 1.40 1.5px UPPERCASE timestamp microtext
Mono Button Label PolySans Mono 12px / 0.75rem 600 2.00 1.5px UPPERCASE button text, very open leading
Mono Timestamp PolySans Mono 11px / 0.69rem 500/600 1.20 1.1–1.8px UPPERCASE StoryStream timestamps
Serif Body FK Roman Standard 16px / 1.00rem 400 1.30 -0.16px Review decks, print-voice excerpts
Serif Caption FK Roman Standard 20px / 1.25rem 400 1.20 — Magazine-style pull quotes
Principles
-
Manuka is always the hero, never the UI. If you see Manuka below 60px you're looking at a bug. It exists to shout the brand, not to label a button.
-
PolySans is the workhorse, PolySans Mono is its uniformed sibling. Mono is used exclusively for UPPERCASE labels, timestamps, tags, and certain buttons. Lowercase mono doesn't exist in this system.
-
Thin-weight (300) capitalized headlines are a signature Verge move. The 19–20px weight-300 with 1.9px tracking creates a "fashion magazine whisper" that contrasts with the 107px Manuka shout above it. This whisper-vs-shout contrast is the typographic fingerprint.
-
Letter-spacing has two registers: positive (0.72–1.9px) for ALL-CAPS mono and sans labels, negative (-0.16px) for the rare serif appearances, barely-positive (0.32px, 1.07px) for massive display. Plain 0 letter-spacing is rare.
-
FK Roman Standard is the editorial exception, not the rule. Reserve it for long-form print-voice moments — reviews, critic pulls, masthead essays. Never use it in UI.
-
Line heights are tight (0.80–1.30) for every display and label, relaxed (1.60–2.00) only for reading body and mono button labels. The leading jump is intentional — it gives the page a "telegraph ticker" rhythm.
Note on Font Substitutes
The 0.80 line-height on Manuka display (107px, 90px, 60px) assumes the proprietary Manuka face from Klim Type Foundry, which has aggressively tight vertical metrics designed for athletic stance at large sizes. If you substitute with wide-metric open-source condensed displays like Anton, Oswald, Bebas Neue, or Archivo Black, loosen display line-heights by approximately +0.10 to +0.15 to prevent ascender/descender collisions (e.g., 0.80 → 0.95). PolySans substitutes (Space Grotesk, DM Sans, Hanken Grotesk) work at the token values without adjustment — their metrics are close enough. PolySans Mono substitutes (Space Mono, JetBrains Mono) and FK Roman substitutes (Newsreader, Literata) also work without adjustment.
4. Component Stylings
Buttons
Primary — Jelly Mint Pill
-
Background: #3cffd0 (Jelly Mint)
-
Text: #000000 (Absolute Black), PolySans 16px / 700 or PolySans Mono 12px / 600 UPPERCASE
-
Border: none (pure fill)
-
Border radius: 24px — fully rounded pill
-
Padding: 10px 24px
-
Outline: none at rest
-
Hover: background shifts to rgba(255, 255, 255, 0.2) (translucent white), text stays black, adds a 1px #c2c2c2 ring shadow
-
Active: background rgba(140, 140, 140, 0.87), opacity 0.5, ring shadow #8c8c8c
-
Focus: background #1eaedb, white text, 1px solid #0500ff border, translucent white focus ring
-
Transition: ~180ms ease on background and shadow
Secondary — Dark Slate Pill
-
Background: #2d2d2d (Surface Slate)
-
Text: #e9e9e9 (Muted Text), PolySans 16px / 400
-
Border: none
-
Border radius: 24px
-
Padding: 10px 24px
-
Outline: rgb(233, 233, 233) none 0px
-
Hover: same translucent white invert as primary — rgba(255, 255, 255, 0.2) bg, black text, 1px #c2c2c2 ring
-
Focus: same cyan focus treatment as primary
Tertiary — Outlined Mint
-
Background: transparent
-
Text: #3cffd0, PolySans Mono 12px / 600 UPPERCASE, 1.5px tracking
-
Border: 1px solid #3cffd0
-
Border radius: 40px — larger pill for secondary outline style
-
Padding: ~10px 20px
-
Hover: inverts to mint fill, black text
-
Transition: 150ms ease
Outlined Ultraviolet (Promotional)
-
Background: transparent
-
Text: #5200ff or #ffffff
-
Border: 1px solid #5200ff
-
Border radius: 30px
-
Used for "Subscribe" or "Join the Stream" style promotional callouts
Pill Tag (N
