W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Next.js
Next.js is the React framework for the web — a production-grade meta-framework from Vercel that ships with file-based routing, server components, streaming, edge runtime, and a tightly integrated developer experience. The brand voice is engineer- direct and product-led, inherited from Vercel: short sentences, monochrome surfaces, deference to a live demo over an adjective. The visual identity is the triangle mark, black on white in light mode and white on black in dark mode — dark-first in expression, monochrome by design.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/nextjs/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/nextjs/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.
Next.js
Next.js is the React framework for the web — a production-grade meta-framework from Vercel that ships with file-based routing, server components, streaming, edge runtime, and a tightly integrated developer experience. The brand voice is engineer- direct and product-led, inherited from Vercel: short sentences, monochrome surfaces, deference to a live demo over an adjective. The visual identity is the triangle mark, black on white in light mode and white on black in dark mode — dark-first in expression, monochrome by design.
Tags: nextjs, framework, javascript, react, vercel, monochrome, dark-first
Atoms
Palette
Next.js · [email protected] · MIT
Next.js brand palette — black-and-white minimal, dark-first. The Next.js triangle mark is rendered as a monochrome glyph: black on white in light mode, white on black in dark mode. There is no brand-signature hue; identity is carried by the mark, the Geist typeface, and the high-contrast monochrome treatment. Supporting Geist neutral ramps + Vercel functional hues (blue/red/amber/ green) provide UI status colors for the docs site.
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 |
|---|---|---|
next-black |
Next.js Black | #000000 |
next-white |
Next.js White | #FFFFFF |
dark-bg-100 |
Dark Background 100 | #0A0A0A |
dark-gray-100 |
Dark Gray 100 | #1A1A1A |
dark-gray-300 |
Dark Gray 300 | #292929 |
dark-gray-500 |
Dark Gray 500 | #454545 |
dark-gray-900 |
Dark Gray 900 | #A1A1A1 |
dark-gray-1000 |
Dark Gray 1000 | #EDEDED |
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 |
next-white |
#FFFFFF |
surface-elevated |
next-white |
#FFFFFF |
text-primary |
light-gray-1000 |
#171717 |
text-secondary |
light-gray-600 |
#666666 |
text-tertiary |
dark-gray-500 |
#454545 |
primary |
next-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 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
dark-bg-100 |
#0A0A0A |
surface |
dark-gray-100 |
#1A1A1A |
surface-elevated |
dark-gray-300 |
#292929 |
text-primary |
dark-gray-1000 |
#EDEDED |
text-secondary |
dark-gray-900 |
#A1A1A1 |
text-tertiary |
dark-gray-500 |
#454545 |
primary |
next-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 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
next-black |
#000000 |
on-identity |
next-white |
#FFFFFF |
primary |
next-black |
#000000 |
primary-hover |
light-gray-1000 |
#171717 |
accent |
vercel-blue |
#0070F3 |
accent-hover |
vercel-blue-bright |
#52A8FF |
background |
light-bg-200 |
#FAFAFA |
surface |
next-white |
#FFFFFF |
text-primary |
light-gray-1000 |
#171717 |
text-secondary |
light-gray-600 |
#666666 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, gradient-fill, drop-shadow, on-busy-photo, composited-with-product-logo
The Next.js triangle mark is monochrome by design. Gradient, recolored, or skewed variants are explicitly disallowed per the Vercel brand expression at vercel.com/design/brands (which governs Next.js as a Vercel-stewarded property).
colorChoice → roles.colors.primary
- allowed: next-black, next-white
- forbidden: vercel-blue, vercel-red, vercel-amber, vercel-green
Next.js's primary brand color is monochrome — black in light mode, white in dark. The functional hues (blue/red/amber/green) carry semantic meaning and must not stand in as the brand identity.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Geist's foreground/background pairs are designed AA-out-of-the-box: light-gray-1000 (#171717) on light-bg-200 (#FAFAFA) gives ~15:1 and dark-gray-1000 (#EDEDED) on dark-bg-100 (#0A0A0A) gives ~17:1. Both clear AA with substantial margin.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Geist Sans is the only display face on nextjs.org and 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.
compositionConstraint → roles.colors.identity
- pairsWith: next-white
- doesNotPairWith: vercel-blue, vercel-red, vercel-amber, vercel-green
The brand block is black-on-white or white-on-black only. Pairing the triangle directly with functional hues breaks the monochrome brand contract.
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.
contextRestriction → trademark.use
- forbiddenContexts: product-name-prefix, implied-endorsement
The Vercel brand policy forbids product names that imply Next.js or Vercel endorsement. Use the mark to indicate compatibility, not as part of a product identity.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700, 800
Next.js 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 Geist'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 inherited from the Geist Design System — 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://nextjs.org/
- License:
MIT - Attribution: Next.js is MIT-licensed and maintained by Vercel, Inc. The Next.js triangle mark and "Next.js" word mark are property of Vercel. The brand expression is monochrome black/white paired with the open-source Geist typeface family; status hues mirror the Geist Design System functional ramps shared with the Vercel atom. This atom is brand-atoms' machine- readable encoding; no logos are bundled.
- Imported:
2026-05-18 - Notes: Next.js does not publish a standalone brand-guidelines document; the brand expression on nextjs.org is the source of truth. Geist is in the brand-atoms catalog (geist@1, geist-mono@1), released by Vercel under the SIL Open Font License v1.1.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Next.js
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.
Next.js
A clear hierarchy in Next.js'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
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
→ light-bg-200 #FAFAFA identity
→ next-black #000000 on-identity
→ next-white #FFFFFF primary
→ next-black #000000 primary-hover
→ light-gray-1000 #171717 surface
→ next-white #FFFFFF text-primary
→ light-gray-1000 #171717 text-secondary
→ light-gray-600 #666666 Typography
code
→ mono Geist Mono display
→ heading Geist Sans prose
→ body Geist Sans Palette mode mappings (from nextjs)
Light mode (14 roles)
accent
→ vercel-blue accent-hover
→ vercel-blue-bright background
→ light-bg-200 error
→ vercel-red primary
→ next-black primary-hover
→ light-gray-1000 success
→ vercel-green surface
→ next-white surface-elevated
→ next-white text-primary
→ light-gray-1000 text-secondary
→ light-gray-600 text-tertiary
→ dark-gray-500 warning
→ vercel-amber warning-hover
→ vercel-amber Dark mode (14 roles)
accent
→ vercel-blue-bright accent-hover
→ vercel-blue background
→ dark-bg-100 error
→ vercel-red primary
→ next-white primary-hover
→ dark-gray-1000 success
→ vercel-green surface
→ dark-gray-100 surface-elevated
→ dark-gray-300 text-primary
→ dark-gray-1000 text-secondary
→ dark-gray-900 text-tertiary
→ dark-gray-500 warning
→ vercel-amber warning-hover
→ vercel-amber Rules (9 typed constraints)
error · 7 rules
forbiddenTreatment logo treatments stretched, rotated, recolored, gradient-fill, drop-shadow, on-busy-photo, composited-with-product-logo The Next.js triangle mark is monochrome by design. Gradient, recolored, or skewed variants are explicitly disallowed per the Vercel brand expression at vercel.com/design/brands (which governs Next.js as a Vercel-stewarded property).
colorChoice roles.colors.primary allowed next-black, next-white forbidden vercel-blue, vercel-red, vercel-amber, vercel-green Next.js's primary brand color is monochrome — black in light mode, white in dark. The functional hues (blue/red/amber/green) carry semantic meaning and must not stand in as the brand identity.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Geist's foreground/background pairs are designed AA-out-of-the-box: light-gray-1000 (#171717) on light-bg-200 (#FAFAFA) gives ~15:1 and dark-gray-1000 (#EDEDED) on dark-bg-100 (#0A0A0A) gives ~17:1. Both clear AA with substantial margin.
fontPairing typography.heading requires body minSizeRatio 1.5 Geist Sans is the only display face on nextjs.org and 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.
compositionConstraint roles.colors.identity pairsWith next-white doesNotPairWith vercel-blue, vercel-red, vercel-amber, vercel-green The brand block is black-on-white or white-on-black only. Pairing the triangle directly with functional hues breaks the monochrome brand contract.
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.
contextRestriction trademark.use forbiddenContexts product-name-prefix, implied-endorsement The Vercel brand policy forbids product names that imply Next.js or Vercel endorsement. Use the mark to indicate compatibility, not as part of a product identity.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 600, 700, 800 Next.js 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 Geist'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 inherited from the Geist Design System — 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://nextjs.org/
- License
MIT- Attribution
- Next.js is MIT-licensed and maintained by Vercel, Inc. The Next.js triangle mark and "Next.js" word mark are property of Vercel. The brand expression is monochrome black/white paired with the open-source Geist typeface family; status hues mirror the Geist Design System functional ramps shared with the Vercel atom. This atom is brand-atoms' machine- readable encoding; no logos are bundled.
- Imported
2026-05-18- Notes
- Next.js does not publish a standalone brand-guidelines document; the brand expression on nextjs.org is the source of truth. Geist is in the brand-atoms catalog (geist@1, geist-mono@1), released by Vercel under the SIL Open Font License v1.1.