W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Vercel
Vercel is the frontend cloud — a platform for building, previewing, and shipping web applications, including the company's flagship open-source framework Next.js. The brand voice is engineer-direct and product-led: short sentences, plain claims, deference to a live demo over an adjective. Visually, Vercel is dark-first and unapologetically monochrome — black canvas, white foreground, a calibrated neutral ramp, and the open-source Geist typeface family (Sans and Mono) as the typographic anchor. Color appears sparingly as functional semantic ramps (blue/red/amber/green) from the Geist Design System.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/vercel/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/vercel/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.
Vercel
Vercel is the frontend cloud — a platform for building, previewing, and shipping web applications, including the company's flagship open-source framework Next.js. The brand voice is engineer-direct and product-led: short sentences, plain claims, deference to a live demo over an adjective. Visually, Vercel is dark-first and unapologetically monochrome — black canvas, white foreground, a calibrated neutral ramp, and the open-source Geist typeface family (Sans and Mono) as the typographic anchor. Color appears sparingly as functional semantic ramps (blue/red/amber/green) from the Geist Design System.
Tags: vercel, frontend-cloud, developer-tools, brand, dark-first, monochrome
Atoms
Palette
Vercel (Geist) · [email protected] · Proprietary — All Rights Reserved
Vercel's brand palette, captured directly from the Geist Design System tokens published on the live vercel.com stylesheet. The brand is unambiguously dark-first and largely monochromatic — pure black canvas, pure white foreground, ten-stop neutral scales — with a small set of functional hue ramps (blue, red, amber, green) reserved for status and the documentation surface. Vercel's classical accent blue (#0070F3, ds-blue-600 in Geist) remains the de facto product link color even though the marketing site itself emphasizes the monochrome treatment.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Geist Sans ([email protected]) |
OFL-1.1 | sans-serif |
body |
Geist Sans ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Geist Mono ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
vercel-black |
Vercel Black | #000000 |
vercel-white |
Vercel White | #FFFFFF |
dark-bg-100 |
Dark Background 100 | #0A0A0A |
dark-bg-200 |
Dark Background 200 | #000000 |
dark-gray-100 |
Dark Gray 100 | #1A1A1A |
dark-gray-200 |
Dark Gray 200 | #1F1F1F |
dark-gray-300 |
Dark Gray 300 | #292929 |
dark-gray-400 |
Dark Gray 400 | #2E2E2E |
dark-gray-500 |
Dark Gray 500 | #454545 |
dark-gray-600 |
Dark Gray 600 | #878787 |
dark-gray-700 |
Dark Gray 700 | #8F8F8F |
dark-gray-800 |
Dark Gray 800 | #7D7D7D |
dark-gray-900 |
Dark Gray 900 | #A1A1A1 |
dark-gray-1000 |
Dark Gray 1000 | #EDEDED |
light-bg-100 |
Light Background 100 | #FFFFFF |
light-bg-200 |
Light Background 200 | #FAFAFA |
light-gray-200 |
Light Gray 200 | #EAEAEA |
light-gray-600 |
Light Gray 600 | #666666 |
light-gray-1000 |
Light Gray 1000 | #171717 |
vercel-blue |
Vercel Blue | #0070F3 |
vercel-blue-bright |
Vercel Blue Bright | #52A8FF |
vercel-red |
Vercel Red | #FF6166 |
vercel-amber |
Vercel Amber | #F2A60D |
vercel-green |
Vercel Green | #62C073 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
light-bg-200 |
#FAFAFA |
surface |
light-bg-100 |
#FFFFFF |
surface-elevated |
light-bg-100 |
#FFFFFF |
text-primary |
light-gray-1000 |
#171717 |
text-secondary |
light-gray-600 |
#666666 |
text-tertiary |
dark-gray-600 |
#878787 |
primary |
vercel-black |
#000000 |
primary-hover |
light-gray-1000 |
#171717 |
accent |
vercel-blue |
#0070F3 |
accent-hover |
vercel-blue-bright |
#52A8FF |
warning |
vercel-amber |
#F2A60D |
warning-hover |
vercel-amber |
#F2A60D |
error |
vercel-red |
#FF6166 |
success |
vercel-green |
#62C073 |
border |
light-gray-200 |
#EAEAEA |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
dark-bg-100 |
#0A0A0A |
surface |
dark-gray-100 |
#1A1A1A |
surface-elevated |
dark-gray-200 |
#1F1F1F |
text-primary |
dark-gray-1000 |
#EDEDED |
text-secondary |
dark-gray-900 |
#A1A1A1 |
text-tertiary |
dark-gray-700 |
#8F8F8F |
primary |
vercel-white |
#FFFFFF |
primary-hover |
dark-gray-1000 |
#EDEDED |
accent |
vercel-blue-bright |
#52A8FF |
accent-hover |
vercel-blue |
#0070F3 |
warning |
vercel-amber |
#F2A60D |
warning-hover |
vercel-amber |
#F2A60D |
error |
vercel-red |
#FF6166 |
success |
vercel-green |
#62C073 |
border |
dark-gray-500 |
#454545 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
vercel-black |
#000000 |
on-identity |
vercel-white |
#FFFFFF |
primary |
vercel-black |
#000000 |
primary-hover |
dark-gray-1000 |
#EDEDED |
accent |
vercel-blue |
#0070F3 |
accent-hover |
vercel-blue-bright |
#52A8FF |
success |
vercel-green |
#62C073 |
warning |
vercel-amber |
#F2A60D |
error |
vercel-red |
#FF6166 |
text-primary-light |
light-gray-1000 |
#171717 |
text-primary-dark |
dark-gray-1000 |
#EDEDED |
background-light |
light-bg-200 |
#FAFAFA |
background-dark |
dark-bg-100 |
#0A0A0A |
surface-light |
light-bg-100 |
#FFFFFF |
surface-dark |
dark-gray-100 |
#1A1A1A |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Geist's foreground/background pairs are designed AA-out-of- the-box: dark-gray-1000 (#EDEDED) on dark-bg-100 (#0A0A0A) gives ~17:1, and light-gray-1000 (#171717) on light-bg-100 (#FFFFFF) gives ~16:1. Both clear AA with substantial margin.
colorChoice → roles.colors.primary
- allowed: vercel-black, vercel-white
- forbidden: vercel-blue, vercel-red, vercel-amber, vercel-green
Vercel's primary brand color is monochrome — black in light mode, white in dark. The functional hues (blue/red/amber/ green) carry semantic meaning (link/error/warning/success) and must not stand in for the brand identity.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
Vercel's triangle mark is monochrome by design. Gradient, recolored, or skewed variants are explicitly disallowed by the brand guidelines at vercel.com/design/brands.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Geist Sans is the only display face on vercel.com; the visual hierarchy is established entirely by size. A 1.5× minimum heading-to-body ratio preserves the typographic rhythm without introducing a second family.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Geist Design System tokens are AA-compliant by construction; consumers must not derive intermediate stops that defeat that property.
compositionConstraint → roles.colors.identity
- pairsWith: vercel-white
- doesNotPairWith: vercel-blue, vercel-red, vercel-amber, vercel-green
The brand block is black-on-white or white-on-black only. Pairing the identity color directly with functional hues breaks the monochrome brand contract.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700, 800
Vercel's marketing surfaces use Geist Medium (500), SemiBold (600), and Bold (700) for headings. Lighter weights are reserved for fine UI labels; weights above 800 compromise the typeface's neutral geometric voice.
contextRestriction → roles.colors.accent
- forbiddenContexts: background, large-fill
- allowedContexts: link, focus-ring, data-viz-primary
Vercel Blue (#0070F3) is the documented link / focus accent — used as a thin stroke or small-glyph fill, never as a large background block. Large blue fills compete with the monochrome brand voice.
Provenance
- Source: https://vercel.com/design/brands
- License:
Proprietary — All Rights Reserved - Attribution: Vercel, Inc. — visual identity captured from the deployed stylesheet on vercel.com (Geist Design System tokens) and the open-source Geist font repository (github.com/vercel/geist-font). The Geist Design System and the Vercel marks are property of Vercel, Inc.; the Geist font binaries are released under the SIL Open Font License v1.1.
- Imported:
2026-05-17 - Notes: Vercel's marketing site renders in forced dark mode, but the Geist Design System publishes both light and dark token sets; this atom uses
identity: vercel-blackso brand surfaces render in the dark-first voice regardless of consumer theme.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Vercel
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.
Vercel
A clear hierarchy in Vercel'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
Vercel (Geist)
[email protected]font · heading
Geist Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Geist Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
Geist Mono
[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
→ vercel-blue #0070F3 accent-hover
→ vercel-blue-bright #52A8FF background-dark
→ dark-bg-100 #0A0A0A background-light
→ light-bg-200 #FAFAFA error
→ vercel-red #FF6166 identity
→ vercel-black #000000 on-identity
→ vercel-white #FFFFFF primary
→ vercel-black #000000 primary-hover
→ dark-gray-1000 #EDEDED success
→ vercel-green #62C073 surface-dark
→ dark-gray-100 #1A1A1A surface-light
→ light-bg-100 #FFFFFF text-primary-dark
→ dark-gray-1000 #EDEDED text-primary-light
→ light-gray-1000 #171717 warning
→ vercel-amber #F2A60D Typography
code
→ mono Geist Mono display
→ heading Geist Sans prose
→ body Geist Sans Palette mode mappings (from vercel)
Light mode (15 roles)
accent
→ vercel-blue accent-hover
→ vercel-blue-bright background
→ light-bg-200 border
→ light-gray-200 error
→ vercel-red primary
→ vercel-black primary-hover
→ light-gray-1000 success
→ vercel-green surface
→ light-bg-100 surface-elevated
→ light-bg-100 text-primary
→ light-gray-1000 text-secondary
→ light-gray-600 text-tertiary
→ dark-gray-600 warning
→ vercel-amber warning-hover
→ vercel-amber Dark mode (15 roles)
accent
→ vercel-blue-bright accent-hover
→ vercel-blue background
→ dark-bg-100 border
→ dark-gray-500 error
→ vercel-red primary
→ vercel-white primary-hover
→ dark-gray-1000 success
→ vercel-green surface
→ dark-gray-100 surface-elevated
→ dark-gray-200 text-primary
→ dark-gray-1000 text-secondary
→ dark-gray-900 text-tertiary
→ dark-gray-700 warning
→ vercel-amber warning-hover
→ vercel-amber Rules (8 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Geist's foreground/background pairs are designed AA-out-of- the-box: dark-gray-1000 (#EDEDED) on dark-bg-100 (#0A0A0A) gives ~17:1, and light-gray-1000 (#171717) on light-bg-100 (#FFFFFF) gives ~16:1. Both clear AA with substantial margin.
colorChoice roles.colors.primary allowed vercel-black, vercel-white forbidden vercel-blue, vercel-red, vercel-amber, vercel-green Vercel's primary brand color is monochrome — black in light mode, white in dark. The functional hues (blue/red/amber/ green) carry semantic meaning (link/error/warning/success) and must not stand in for the brand identity.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo Vercel's triangle mark is monochrome by design. Gradient, recolored, or skewed variants are explicitly disallowed by the brand guidelines at vercel.com/design/brands.
fontPairing typography.heading requires body minSizeRatio 1.5 Geist Sans is the only display face on vercel.com; the visual hierarchy is established entirely by size. A 1.5× minimum heading-to-body ratio preserves the typographic rhythm without introducing a second family.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Geist Design System tokens are AA-compliant by construction; consumers must not derive intermediate stops that defeat that property.
compositionConstraint roles.colors.identity pairsWith vercel-white doesNotPairWith vercel-blue, vercel-red, vercel-amber, vercel-green The brand block is black-on-white or white-on-black only. Pairing the identity color directly with functional hues breaks the monochrome brand contract.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 600, 700, 800 Vercel's marketing surfaces use Geist Medium (500), SemiBold (600), and Bold (700) for headings. Lighter weights are reserved for fine UI labels; weights above 800 compromise the typeface's neutral geometric voice.
contextRestriction roles.colors.accent forbiddenContexts background, large-fill allowedContexts link, focus-ring, data-viz-primary Vercel Blue (#0070F3) is the documented link / focus accent — used as a thin stroke or small-glyph fill, never as a large background block. Large blue fills compete with the monochrome brand voice.
Provenance
- Source
- https://vercel.com/design/brands
- License
Proprietary — All Rights Reserved- Attribution
- Vercel, Inc. — visual identity captured from the deployed stylesheet on vercel.com (Geist Design System tokens) and the open-source Geist font repository (github.com/vercel/geist-font). The Geist Design System and the Vercel marks are property of Vercel, Inc.; the Geist font binaries are released under the SIL Open Font License v1.1.
- Imported
2026-05-17- Notes
- Vercel's marketing site renders in forced dark mode, but the Geist Design System publishes both light and dark token sets; this atom uses `identity: vercel-black` so brand surfaces render in the dark-first voice regardless of consumer theme.