W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
The Verge
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.
1 palette 4 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/the-verge/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/the-verge/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
The Verge
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
serif |
Playfair Display ([email protected]) |
OFL-1.1 | serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by The Verge
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
The Verge
A clear hierarchy in The Verge's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
The Verge
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · serif
Playfair Display
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ neon-mint #3CFFD0 accent-hover
→ verge-green #309875 background-dark
→ ink #131313 background-light
→ white #FFFFFF border-light
→ gray-divider #E9E9E9 error
→ electric-purple-pressed #3D00BF identity
→ ink #131313 mark
→ ink #131313 on-identity
→ neon-mint #3CFFD0 primary
→ electric-purple #5200FF primary-hover
→ electric-purple-pressed #3D00BF success
→ verge-green #309875 surface-dark
→ gray-bright #313131 surface-light
→ gray-surface #F6F6F6 text-primary-dark
→ white #FFFFFF text-primary-light
→ ink #131313 text-secondary-light
→ gray-medium #4A4A4A text-tertiary-light
→ gray-muted #636363 warning
→ yellow-bright #D6F31F Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter serif
→ serif Playfair Display Palette mode mappings (from the-verge)
Light mode (14 roles)
accent
→ neon-mint accent-hover
→ verge-green background
→ white border
→ gray-divider error
→ electric-purple-pressed primary
→ electric-purple primary-hover
→ electric-purple-pressed success
→ verge-green surface
→ gray-surface surface-elevated
→ white text-primary
→ ink text-secondary
→ gray-medium text-tertiary
→ gray-muted warning
→ yellow-bright Dark mode (14 roles)
accent
→ neon-mint accent-hover
→ verge-green background
→ ink border
→ gray-bright error
→ electric-purple-light primary
→ electric-purple-light primary-hover
→ electric-purple success
→ neon-mint surface
→ gray-bright surface-elevated
→ gray-medium text-primary
→ white text-secondary
→ gray-divider text-tertiary
→ gray-border warning
→ yellow-bright Rules (8 typed constraints)
error · 5 rules
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 rules
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 rule
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.