packages/shared-skills/skills/frontend/references/design/theverge.md
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:
#131313) as the default surface — no light mode on the homepage#3cffd0 + ultraviolet #5200ff as hazard-tape accents, never quiet background wash#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.#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.#309875): A darker variant of the jelly mint used on card outlines and button borders where pure mint would over-saturate.#3860be): The link hover color — the one moment blue appears on the site. It replaces mint/white/black on hover across every link style.#1eaedb): Reserved for button focus rings. Never shown outside a keyboard-focus state.#3d00bf): A darker ultraviolet variant used as the vertical border on StoryStream <li> items.#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.#2d2d2d): Secondary card background, used when a story tile doesn't need to be a saturated color block.#313131): The 1px border that wraps inline imagery.#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.#000000): Reserved for text on the mint/yellow/white tiles — the only place it appears.#ffffff): Headlines and display text on the canvas.#949494): Bylines, timestamps, photo credits. The mid-gray that anchors the metadata layer.#e9e9e9): Button text on dark slate buttons. Slightly off-white to reduce screen glare.#131313): Used only on accent tiles (mint, yellow, white) to keep contrast legible.#1eaedb): Keyboard focus only.rgba(0, 0, 0, 0.33)): Subtle 1px ring used as the quiet shadow alternative on stacked cards.#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.
-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 |
-0.16px) for the rare serif appearances, barely-positive (0.32px, 1.07px) for massive display. Plain 0 letter-spacing is rare.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
#3cffd0 (Jelly Mint)#000000 (Absolute Black), PolySans 16px / 700 or PolySans Mono 12px / 600 UPPERCASE24px — fully rounded pill10px 24pxnone at restrgba(255, 255, 255, 0.2) (translucent white), text stays black, adds a 1px #c2c2c2 ring shadowrgba(140, 140, 140, 0.87), opacity 0.5, ring shadow #8c8c8c#1eaedb, white text, 1px solid #0500ff border, translucent white focus ringSecondary — Dark Slate Pill
#2d2d2d (Surface Slate)#e9e9e9 (Muted Text), PolySans 16px / 40024px10px 24pxrgb(233, 233, 233) none 0pxrgba(255, 255, 255, 0.2) bg, black text, 1px #c2c2c2 ringTertiary — Outlined Mint
#3cffd0, PolySans Mono 12px / 600 UPPERCASE, 1.5px tracking1px solid #3cffd040px — larger pill for secondary outline style10px 20pxOutlined Ultraviolet (Promotional)
#5200ff or #ffffff1px solid #5200ff30pxPill Tag (Non-interactive)
#3cffd0, #5200ff, yellow, etc.)20px (tighter radius than buttons — this is the text pill)4px 10pxStoryStream Tile
#131313 + 1px white border, OR a saturated accent fill (mint, purple, yellow, pink, orange, white)20px (standard) or 24px (feature)1px solid #ffffff (on dark) or 0px 0px 1px solid #3cffd0 (on mint) or nothing (on saturated fill)#3860be (deep link blue)Feature Card (Top Story)
#131313 with 1px hairline border, OR full-bleed color accent24px3px or 4px inner radius when nested)StoryStream Rail (Timeline)
#3d00bf or #ffffff) runs along the left edge of each item, marking the timeline spine#131313 background, 1px solid #ffffff or #949494 border, 2px border radius (tight, newspaper-form feel), PolySans 15px text in #ffffff, placeholder in #949494.#3cffd0 (jelly mint) with optional 1px solid #5200ff inner ring on deep focus. No glow.#5200ff (ultraviolet — used as error/alert accent here, not the usual red).#131313 bar with the Verge wordmark (Manuka) left-aligned, a search icon and a few UPPERCASE mono category links (12–14px, PolySans Mono, 1.5–1.8px tracking), and a single mint-pill CTA (usually "Subscribe") pinned right.#ffffff to #3860be (deep link blue). No underline — it's a color-only response.0px -1px 0px 0px inset #3cffd0)3px, 4px, or inherit 20px / 24px from the tile.#313131 or #ffffff hairline around photography, giving a "contained Polaroid" feel.loading="lazy" on everything below the first fold; eager on the masthead hero only.#3d00bf or #ffffff on #131313)The Verge treats whitespace like a club DJ treats silence — as a dramatic reset between loud moments. The canvas is so dark and the accents are so saturated that even 32px of empty #131313 between two tiles acts as a palette cleanser. The page is not airy like Apple or Stripe; it's paced, with loud hazard-color blocks interrupting stretches of near-black. Whitespace carries the rhythm, not the elegance.
Eight discrete radius values — a lot for a single site. This is deliberate: the rhythm between 2px typewriter tags, 20px pill cards, and 40px outlined buttons creates a "nested scale" feel where every component announces its hierarchy through its corners.
| Level | Treatment | Use |
|---|---|---|
| 0 | No border, no shadow | Default #131313 canvas text |
| 1 | rgba(0,0,0,0) 0px 0px 0px 0px inset (placeholder) | Reset state for interactive elements |
| 2 | 1px solid #ffffff or #313131 hairline | Image frames and quiet card outlines |
| 3 | 1px solid #3cffd0 hairline | Active button outlines, focused story tiles |
| 4 | 1px solid #5200ff hairline | Promotional/alternate state outlines |
| 5 | rgba(0, 0, 0, 0.33) 0px 0px 0px 1px | The single "atmospheric" ring — applied to layered cards |
| 6 | 0px -1px 0px 0px inset (mint/black/white) | Active tab underline — a signature Verge move |
| 7 | Saturated accent fill (#3cffd0, #5200ff, white, yellow, pink) | Story-tile elevation via color, not shadow |
The Verge's depth philosophy is color-as-elevation. When something needs to stand out, it doesn't get a shadow — it gets a mint fill or a 1px hazard-color border. There are 14 shadow entries in the extracted tokens, but all of them are either inset underlines (0px -1px inset) or near-transparent 1px rings — none of them are traditional elevation shadows. The #131313 canvas stays perfectly flat throughout, and hierarchy is carried by color saturation.
rgba(0, 0, 0, 0.33) 1px ring on stacked cards — the only effect that faintly resembles a shadow#131313 as the canvas for every view. There is no light mode.#3cffd0) and Verge Ultraviolet (#5200ff) as hazard accents — buttons, borders, active states, and saturated color-block tiles.#3860be (deep link blue) as the hover color on every link, regardless of base color.#3d00bf or white) on feed views.box-shadow for elevation. Use 1px borders or saturated accent fills instead.#3cffd0 text on a #131313 background at under 16px — the contrast vibrates at small sizes.| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <400px | Single column, Manuka hero scales down to ~48–54px, StoryStream rail collapses to inline timestamps |
| Mobile | 400–549px | Single column, color-block tiles stack full-width, nav is a hamburger drawer |
| Large Mobile | 550–767px | Still single column but padding opens up, tile radii stay at 20px |
| Tablet | 768–1023px | 2-column StoryStream with feature card spanning, wordmark shrinks ~50% |
| Small Desktop | 1024–1179px | Full 3–4 column editorial grid, mint pill CTA restored to nav |
| Desktop | 1180–1299px | Max padding, Manuka wordmark at full hero scale |
| Large Desktop | ≥1300px | Container caps at ~1280–1300px, whitespace expands at the margins, no further scaling |
The dembrandt sweep detected 26 intermediate breakpoints (1300 → 1280 → 1200 → 1181 → 1180 → 1179 → 1024 → 1023 → 901 → 900 → 897 → 896 → 890 → 769 → 768 → 620 → 605 → 600 → 550 → 549 → 530 → 426 → 425 → 400 → 320). The Verge tunes its grid at virtually every major device boundary — an unusually aggressive responsive strategy.
srcset, aspect ratios preserved.loading="lazy" on everything below the fold, eager on the masthead hero.#3cffd0)"#131313)"#5200ff)"#ffffff)"#ffffff)" (primary) or "Muted Text (#e9e9e9)"#949494)"#ffffff)" hairline on dark, "Console Mint Border (#309875)" on mint variants#3860be)"#131313 canvas: a 20px-radius rectangle with a 1px solid #ffffff border, a PolySans Mono 11px / 600 / UPPERCASE / 1.1px tracking timestamp on the left rail, a 12px PolySans UPPERCASE kicker in mint (#3cffd0), and a 24px / 700 PolySans headline in white below. No shadow, no lift — hover only shifts the headline color to #3860be."#3cffd0) fill, black text in PolySans Mono 12px / 600 / UPPERCASE / 1.5px tracking, 24px border radius, 10px × 24px padding. Hover state shifts to rgba(255, 255, 255, 0.2) background with a 1px #c2c2c2 ring shadow, 180ms ease."#131313 canvas with 64px vertical padding."#5200ff) at 0.9 alpha, 24px border radius, white text, a PolySans Mono 11px UPPERCASE category label with 1.5px tracking at the top, and a 32px PolySans 400 capitalized headline with 0.32px tracking below."#2d2d2d background, #e9e9e9 PolySans 16px text, 24px radius pill shape, 10px × 24px padding. Hover matches the primary button — translucent white rgba(255, 255, 255, 0.2) bg with black text."When refining existing screens generated with this design system:
#131313. There is no light mode.box-shadow that isn't a 1px inset underline or a 1px hazard-color border. The Verge uses color for elevation, not shadow.#3860be deep link blue with no underline. Any other hover color is drift.