# The Verge

> `the-verge@1.0.0`

The Verge is Vox Media's flagship tech-and-culture publication — a digital-native newsroom whose 2022 brand refresh established a distinctive electric-purple-and-neon-mint visual system. The identity reads as engineered for the screen: deep ink on bright white, a saturated electric purple (#5200FF) as primary action, and a fluorescent mint (#3CFFD0) for accent emphasis. The proprietary Manuka (display), Polysans (sans), FK Roman Standard (serif), and PolySansMono carry the editorial voice.


**Tags:** `the-verge`, `verge`, `vox-media`, `tech`, `news`, `brand`, `electric`, `digital`

## Atoms

### Palette

**The Verge** · `the-verge@1.0.0` · Proprietary — All Rights Reserved

> The Verge palette as deployed since the 2022 brand refresh — Vox Media's tech-and-culture publication. The identity reads as digital-native: deep ink (#131313) on quiet off-white, a saturated electric purple (#5200FF) for primary action, and a neon mint (#3CFFD0) for accent emphasis. A secondary "Verge green" (#309875) handles status surfaces. The display face Manuka and the geometric Polysans family carry the editorial voice. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `serif` | **Playfair Display** `(playfair-display@1.0.0)` | OFL-1.1 | serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `ink` | Ink | `#131313` |
| `black` | Black | `#000000` |
| `gray-bright` | Gray Bright | `#313131` |
| `gray-medium` | Gray Medium | `#4A4A4A` |
| `gray-muted` | Gray Muted | `#636363` |
| `gray-quiet` | Gray Quiet | `#949494` |
| `gray-border` | Gray Border | `#BDBDBD` |
| `gray-divider` | Gray Divider | `#E9E9E9` |
| `gray-tint` | Gray Tint | `#EFEFEF` |
| `gray-surface` | Gray Surface | `#F6F6F6` |
| `white` | White | `#FFFFFF` |
| `electric-purple` | Electric Purple | `#5200FF` |
| `electric-purple-pressed` | Electric Purple Pressed | `#3D00BF` |
| `electric-purple-light` | Electric Purple Light | `#A980FF` |
| `electric-purple-tint` | Electric Purple Tint | `#DFCFFF` |
| `electric-purple-faint` | Electric Purple Faint | `#EEE6FF` |
| `neon-mint` | Neon Mint | `#3CFFD0` |
| `neon-mint-tint` | Neon Mint Tint | `#D8F0E8` |
| `verge-green` | Verge Green | `#309875` |
| `yellow-bright` | Yellow Bright | `#D6F31F` |
| `yellow-faint` | Yellow Faint | `#FFFCD4` |
| `peach-faint` | Peach Faint | `#FFD5C8` |
| `rose-faint` | Rose Faint | `#FFC2E7` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `white` | `#FFFFFF` |
| `surface` | `gray-surface` | `#F6F6F6` |
| `surface-elevated` | `white` | `#FFFFFF` |
| `text-primary` | `ink` | `#131313` |
| `text-secondary` | `gray-medium` | `#4A4A4A` |
| `text-tertiary` | `gray-muted` | `#636363` |
| `primary` | `electric-purple` | `#5200FF` |
| `primary-hover` | `electric-purple-pressed` | `#3D00BF` |
| `accent` | `neon-mint` | `#3CFFD0` |
| `accent-hover` | `verge-green` | `#309875` |
| `warning` | `yellow-bright` | `#D6F31F` |
| `error` | `electric-purple-pressed` | `#3D00BF` |
| `success` | `verge-green` | `#309875` |
| `border` | `gray-divider` | `#E9E9E9` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `ink` | `#131313` |
| `surface` | `gray-bright` | `#313131` |
| `surface-elevated` | `gray-medium` | `#4A4A4A` |
| `text-primary` | `white` | `#FFFFFF` |
| `text-secondary` | `gray-divider` | `#E9E9E9` |
| `text-tertiary` | `gray-border` | `#BDBDBD` |
| `primary` | `electric-purple-light` | `#A980FF` |
| `primary-hover` | `electric-purple` | `#5200FF` |
| `accent` | `neon-mint` | `#3CFFD0` |
| `accent-hover` | `verge-green` | `#309875` |
| `warning` | `yellow-bright` | `#D6F31F` |
| `error` | `electric-purple-light` | `#A980FF` |
| `success` | `neon-mint` | `#3CFFD0` |
| `border` | `gray-bright` | `#313131` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `ink` | `#131313` |
| `on-identity` | `neon-mint` | `#3CFFD0` |
| `primary` | `electric-purple` | `#5200FF` |
| `primary-hover` | `electric-purple-pressed` | `#3D00BF` |
| `accent` | `neon-mint` | `#3CFFD0` |
| `accent-hover` | `verge-green` | `#309875` |
| `mark` | `ink` | `#131313` |
| `success` | `verge-green` | `#309875` |
| `warning` | `yellow-bright` | `#D6F31F` |
| `error` | `electric-purple-pressed` | `#3D00BF` |
| `text-primary-light` | `ink` | `#131313` |
| `text-primary-dark` | `white` | `#FFFFFF` |
| `background-light` | `white` | `#FFFFFF` |
| `background-dark` | `ink` | `#131313` |
| `surface-light` | `gray-surface` | `#F6F6F6` |
| `surface-dark` | `gray-bright` | `#313131` |
| `text-secondary-light` | `gray-medium` | `#4A4A4A` |
| `text-tertiary-light` | `gray-muted` | `#636363` |
| `border-light` | `gray-divider` | `#E9E9E9` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `serif` | `serif` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `7`
- **standard:** `WCAG-AAA`

> Ink (#131313) on white gives ~18:1 — well past AAA. The Verge's 2022 brand refresh emphasized accessibility as a first-class design constraint; the long-form review and explainer format justifies the AAA contrast target. 

#### `colorChoice` → `roles.colors.primary`

- **allowed:** electric-purple, electric-purple-pressed, electric-purple-light
- **forbidden:** neon-mint, verge-green, yellow-bright

> Electric purple (#5200FF) is The Verge's primary action color in the 2022 refresh — CTAs, in-copy links, and interactive emphasis. Neon mint is an accent reserved for decorative emphasis and ornament; using it for the primary role would collapse the action/accent hierarchy the brand establishes. 

#### `contextRestriction` → `roles.colors.accent`

- **forbiddenContexts:** default-cta, error-state, destructive-action
- **allowedContexts:** ornament, editorial-emphasis, feature-callout, section-tag

> Neon mint (#3CFFD0) is high-saturation and bright; it functions as ornament and feature-callout in Verge layouts, not as a CTA or destructive-action color. Substituting it for primary action would conflict with the saturation/role hierarchy the refresh established. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, drop-shadow, on-busy-photo, gradient-fill

> The Verge wordmark and ™ logo lockup are governed brand assets. Stretching, rotating, applying gradient fills, or placing the mark on a busy photograph conflicts with the brand's high-contrast, type-led identity system. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> Verge headlines pair the Manuka display face with Polysans body at a clear typographic step. A 1.5× minimum ratio preserves the hierarchy when open-source substitutes (Inter for body and display sans, Playfair Display where a serif is required) stand in for the proprietary primaries. 

### ⚠️ warning (2)

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AAA`
- **criterion:** `1.4.6`

> WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The 2022 refresh explicitly emphasized accessibility; the enhanced contrast target reinforces that commitment in this brand atom. 

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 500, 600, 700, 800, 900

> Polysans on theverge.com is published across Regular through Black. The full weight range is part of the typographic voice; synthetic weights outside this range would degrade the display face. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.accent`

- **pairsWith:** ink, white, electric-purple
- **doesNotPairWith:** yellow-bright, rose-faint

> Neon mint reads cleanest against ink, white, or its complementary electric purple. Placing it adjacent to the bright yellow or rose faint introduces a chromatic collision that defeats the high-contrast hierarchy the Verge refresh depends on. 

## Provenance

- **Source:** <https://www.theverge.com/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Vox Media, LLC — visual identity captured from the deployed Next.js stylesheet at theverge.com/_next/static/css/. The Verge, Vox Media, and the Manuka / Polysans / FK Roman Standard typefaces are property of Vox Media, LLC. 
- **Imported:** `2026-05-19`
- **Notes:** Derived from live site CSS at https://www.theverge.com/ on 2026-05-19; no public brand guide located. The proprietary Manuka, Polysans, FK Roman Standard, and PolySansMono typefaces are declared on the live stylesheet but are not publicly distributed. Open-source substitutes — inter@1 for the sans role, playfair-display@1 for the serif display role, and jetbrainsmono-nerdfont@1 for mono — are referenced here. The Verge's 2022 brand refresh by design lead Will Joel and the Vox in-house team has been widely covered. 

---

*Generated by the brand-atoms converter. Source: `the-verge@1.0.0` from the encyclopedia.*