# 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`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 1.07px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### PolySans · `--font-family-2`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 0.32px, 1.9px, 1.8px, 0.15px, 0.72px, 1.1px, 1.5px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### PolySans Mono · `--font-family-3`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 1.5px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

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

- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 16px
- **Max content width:** 1200px

## Components

### buttons
**Role:** buttons component

- **description:** `Buttons treatment documented in the source analysis.`

### cards containers
**Role:** cards containers component

- **description:** `Cards & Containers treatment documented in the source analysis.`

### inputs forms
**Role:** inputs forms component

- **description:** `Inputs & Forms treatment documented in the source analysis.`

### navigation
**Role:** navigation component

- **description:** `Navigation treatment documented in the source analysis.`

### image treatment
**Role:** image treatment component

- **description:** `Image Treatment treatment documented in the source analysis.`

### storystream timeline item distinctive
**Role:** storystream timeline item distinctive component

- **description:** `StoryStream Timeline Item (Distinctive) treatment documented in the source analysis.`

## Do's and Don'ts

### Do

- Use the documented primary token for the brand's primary interaction treatment.
- Keep page surfaces anchored to `--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`.
- Preserve every typography style's documented size, line height, and letter spacing.
- Compare major implementation decisions against [the live The Verge website](https://www.theverge.com/).

### Don't

- Do not introduce colors outside the documented color token set.
- Do not replace `--color-deep-link-blue` with an arbitrary neutral.
- Do not flatten documented component states or spacing relationships.
- Do not treat this extracted snapshot as newer than the live source website.

## 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/).