# Next.js

> `nextjs@1.0.0`

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** · `nextjs@1.0.0` · 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** `(geist@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Geist Sans** `(geist@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Geist Mono** `(geist-mono@1.0.0)` | 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: `nextjs@1.0.0` from the encyclopedia.*