### The Verge - Tech editorial media. - Acid-mint and ultraviolet accents, Manuka display type - The Verge's 2024 redesign feels like somebody wired a Condé…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
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
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.
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
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.
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.
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.
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.
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.
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
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.
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.
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
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
4,600+ AI skills, agents & workflows. Install in 60 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.