The Verge — Style Reference

> 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.

**Theme:** light

**Source website:** [https://www.theverge.com/](https://www.theverge.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| color 1 | `#131313` | `--color-color-1` | color 1 role extracted from the source design |

| color 2 | `#3cffd0` | `--color-color-2` | color 2 role extracted from the source design |

| color 3 | `#5200ff` | `--color-color-3` | color 3 role extracted from the source design |

| 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 | `#ffffff` | `--color-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` | 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 role extracted from the source design |

| color 5 | `#2d2d2d` | `--color-color-5` | color 5 role extracted from the source design |

| console mint border | `#309875` | `--color-console-mint-border` | console mint border role extracted from the source design |

| deep link blue | `#3860be` | `--color-deep-link-blue` | deep link blue role extracted from the source design |

| focus cyan | `#1eaedb` | `--color-focus-cyan` | focus cyan role extracted from the source design |

| purple rule | `#3d00bf` | `--color-purple-rule` | purple rule role extracted from the source design |

| image frame | `#313131` | `--color-image-frame` | image frame role extracted from the source design |

| absolute black | `#000000` | `--color-absolute-black` | absolute black role extracted from the source design |

| secondary text | `#949494` | `--color-secondary-text` | secondary text role extracted from the source design |

| muted text | `#e9e9e9` | `--color-muted-text` | muted text role extracted from the source design |

| overlay black | `rgba(0, 0, 0, 0.33)` | `--color-overlay-black` | overlay black role extracted from the source design |

| dim gray | `#8c8c8c` | `--color-dim-gray` | dim gray role extracted from the source design |

| color 16 | `rgba(255, 255, 255, 0.2)` | `--color-color-16` | color 16 role extracted from the source design |

| color 17 | `#c2c2c2` | `--color-color-17` | color 17 role extracted from the source design |

| color 18 | `rgba(140, 140, 140, 0.87)` | `--color-color-18` | color 18 role extracted from the source design |

| color 19 | `#0500ff` | `--color-color-19` | color 19 role extracted from the source design |

Tokens — Typography

Manuka · `--font-primary`

PolySans · `--font-family-2`

PolySans Mono · `--font-family-3`

Type Scale

| Role | Size | Line Height | Letter Spacing | Token |

|---|---|---|---|---|

| hero-wordmark-display | 1.07px | 1.5 | 0 | `--text-hero-wordmark-display` |

| heading-wide | 0.32px | 1.5 | 0 | `--text-heading-wide` |

| light-capitalized-label | 1.9px | 1.5 | 0 | `--text-light-capitalized-label` |

| all-caps-label-xl | 1.8px | 1.5 | 0 | `--text-all-caps-label-xl` |

| inline-label | 0.15px | 1.5 | 0 | `--text-inline-label` |

| eyebrow-all-caps | 1.8px | 1.5 | 0 | `--text-eyebrow-all-caps` |

| tag-label | 0.72px | 1.5 | 0 | `--text-tag-label` |

| caption-micro | 1.1px | 1.5 | 0 | `--text-caption-micro` |

| meta-nano | 1.5px | 1.5 | 0 | `--text-meta-nano` |

| mono-button-label | 1.5px | 1.5 | 0 | `--text-mono-button-label` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|---|---|---|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 40 | 40px | `--spacing-40` |

| 48 | 48px | `--spacing-48` |

| 64 | 64px | `--spacing-64` |

Border Radius

| Name | Value | Token |

|---|---|---|

| sm | 0px | `--radius-sm` |

| md | 24px | `--radius-md` |

| lg | 40px | `--radius-lg` |

| xl | 30px | `--radius-xl` |

| pill | 20px | `--radius-pill` |

| r6 | 3px | `--radius-r6` |

| r7 | 5px | `--radius-r7` |

| r8 | 1px | `--radius-r8` |

| r9 | 4px | `--radius-r9` |

| r10 | 2px | `--radius-r10` |

Layout

Components

buttons

**Role:** buttons component

cards containers

**Role:** cards containers component

inputs forms

**Role:** inputs forms component

navigation

**Role:** navigation component

image treatment

**Role:** image treatment component

storystream timeline item distinctive

**Role:** storystream timeline item distinctive component

Do's and Don'ts

Do

Don't

Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.theverge.com/).