{
"id": "nextjs",
"version": "1.0.0",
"name": "Next.js",
"description": "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.\n",
"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.\n",
"importedDate": "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.\n"
},
"tags": [
"nextjs",
"framework",
"javascript",
"react",
"vercel",
"monochrome",
"dark-first"
],
"palette": {
"ref": "nextjs@1.0.0",
"swatches": [
{
"id": "next-black",
"name": "Next.js Black",
"value": "#000000",
"description": "Primary brand color — the triangle mark fill in light mode and the dark-mode canvas. Pure black.\n",
"aliases": []
},
{
"id": "next-white",
"name": "Next.js White",
"value": "#FFFFFF",
"description": "Companion brand color — the triangle mark fill in dark mode and the light-mode canvas. Pure white.\n",
"aliases": []
},
{
"id": "dark-bg-100",
"name": "Dark Background 100",
"value": "#0A0A0A",
"description": "Geist dark canvas tint used by nextjs.org dark mode.",
"aliases": []
},
{
"id": "dark-gray-100",
"name": "Dark Gray 100",
"value": "#1A1A1A",
"description": "Geist dark surface tint.",
"aliases": []
},
{
"id": "dark-gray-300",
"name": "Dark Gray 300",
"value": "#292929",
"description": "Geist dark gray for borders.",
"aliases": []
},
{
"id": "dark-gray-500",
"name": "Dark Gray 500",
"value": "#454545",
"description": "Geist dark gray for hairlines.",
"aliases": []
},
{
"id": "dark-gray-900",
"name": "Dark Gray 900",
"value": "#A1A1A1",
"description": "Geist muted text on dark.",
"aliases": []
},
{
"id": "dark-gray-1000",
"name": "Dark Gray 1000",
"value": "#EDEDED",
"description": "Geist primary text on dark.",
"aliases": []
},
{
"id": "light-bg-200",
"name": "Light Background 200",
"value": "#FAFAFA",
"description": "Geist light layered surface.",
"aliases": []
},
{
"id": "light-gray-200",
"name": "Light Gray 200",
"value": "#EAEAEA",
"description": "Geist light hairline border.",
"aliases": []
},
{
"id": "light-gray-600",
"name": "Light Gray 600",
"value": "#666666",
"description": "Geist secondary text on light.",
"aliases": []
},
{
"id": "light-gray-1000",
"name": "Light Gray 1000",
"value": "#171717",
"description": "Geist primary text on light.",
"aliases": []
},
{
"id": "vercel-blue",
"name": "Vercel Blue",
"value": "#0070F3",
"description": "Functional accent — link / focus.",
"aliases": []
},
{
"id": "vercel-blue-bright",
"name": "Vercel Blue Bright",
"value": "#52A8FF",
"description": "Functional accent on dark surfaces.",
"aliases": []
},
{
"id": "vercel-red",
"name": "Vercel Red",
"value": "#FF6166",
"description": "Functional error / destructive.",
"aliases": []
},
{
"id": "vercel-amber",
"name": "Vercel Amber",
"value": "#F2A60D",
"description": "Functional warning.",
"aliases": []
},
{
"id": "vercel-green",
"name": "Vercel Green",
"value": "#62C073",
"description": "Functional success.",
"aliases": []
}
],
"modes": {
"light": {
"roles": {
"background": "light-bg-200",
"surface": "next-white",
"surface-elevated": "next-white",
"text-primary": "light-gray-1000",
"text-secondary": "light-gray-600",
"text-tertiary": "dark-gray-500",
"primary": "next-black",
"primary-hover": "light-gray-1000",
"accent": "vercel-blue",
"accent-hover": "vercel-blue-bright",
"warning": "vercel-amber",
"warning-hover": "vercel-amber",
"error": "vercel-red",
"success": "vercel-green"
}
},
"dark": {
"roles": {
"background": "dark-bg-100",
"surface": "dark-gray-100",
"surface-elevated": "dark-gray-300",
"text-primary": "dark-gray-1000",
"text-secondary": "dark-gray-900",
"text-tertiary": "dark-gray-500",
"primary": "next-white",
"primary-hover": "dark-gray-1000",
"accent": "vercel-blue-bright",
"accent-hover": "vercel-blue",
"warning": "vercel-amber",
"warning-hover": "vercel-amber",
"error": "vercel-red",
"success": "vercel-green"
}
}
}
},
"fonts": [
{
"role": "heading",
"ref": "geist@1.0.0",
"family": "Geist",
"classification": "sans-serif",
"source": {
"kind": "external",
"family": "Geist",
"cssImportUrl": "https://cdn.jsdelivr.net/npm/@fontsource-variable/geist/index.css",
"notes": "Vercel's first-party distribution is the `geist` npm package (next/font compatible). The cssImportUrl above points at the community @fontsource-variable/geist bundle on jsDelivr for drop-in consumption.\n"
},
"fallbackStack": [
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Helvetica",
"Arial",
"sans-serif"
],
"availableStyles": [
{
"weight": 100,
"style": "normal"
},
{
"weight": 200,
"style": "normal"
},
{
"weight": 300,
"style": "normal"
},
{
"weight": 400,
"style": "normal"
},
{
"weight": 500,
"style": "normal"
},
{
"weight": 600,
"style": "normal"
},
{
"weight": 700,
"style": "normal"
},
{
"weight": 800,
"style": "normal"
},
{
"weight": 900,
"style": "normal"
}
]
},
{
"role": "body",
"ref": "geist@1.0.0",
"family": "Geist",
"classification": "sans-serif",
"source": {
"kind": "external",
"family": "Geist",
"cssImportUrl": "https://cdn.jsdelivr.net/npm/@fontsource-variable/geist/index.css",
"notes": "Vercel's first-party distribution is the `geist` npm package (next/font compatible). The cssImportUrl above points at the community @fontsource-variable/geist bundle on jsDelivr for drop-in consumption.\n"
},
"fallbackStack": [
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Helvetica",
"Arial",
"sans-serif"
],
"availableStyles": [
{
"weight": 100,
"style": "normal"
},
{
"weight": 200,
"style": "normal"
},
{
"weight": 300,
"style": "normal"
},
{
"weight": 400,
"style": "normal"
},
{
"weight": 500,
"style": "normal"
},
{
"weight": 600,
"style": "normal"
},
{
"weight": 700,
"style": "normal"
},
{
"weight": 800,
"style": "normal"
},
{
"weight": 900,
"style": "normal"
}
]
},
{
"role": "mono",
"ref": "geist-mono@1.0.0",
"family": "Geist Mono",
"classification": "monospace",
"source": {
"kind": "external",
"family": "Geist Mono",
"cssImportUrl": "https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono/index.css",
"notes": "First-party distribution: `geist` npm package, import path `geist/font/mono`. The cssImportUrl above points at the community @fontsource-variable/geist-mono bundle on jsDelivr for raw CSS consumption.\n"
},
"fallbackStack": [
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
],
"availableStyles": [
{
"weight": 100,
"style": "normal"
},
{
"weight": 200,
"style": "normal"
},
{
"weight": 300,
"style": "normal"
},
{
"weight": 400,
"style": "normal"
},
{
"weight": 500,
"style": "normal"
},
{
"weight": 600,
"style": "normal"
},
{
"weight": 700,
"style": "normal"
},
{
"weight": 800,
"style": "normal"
},
{
"weight": 900,
"style": "normal"
}
]
}
],
"roles": {
"colors": {
"identity": "next-black",
"on-identity": "next-white",
"primary": "next-black",
"primary-hover": "light-gray-1000",
"accent": "vercel-blue",
"accent-hover": "vercel-blue-bright",
"background": "light-bg-200",
"surface": "next-white",
"text-primary": "light-gray-1000",
"text-secondary": "light-gray-600"
},
"typography": {
"display": "heading",
"prose": "body",
"code": "mono"
}
},
"assets": [],
"rules": [
{
"type": "forbiddenTreatment",
"target": "logo",
"severity": "error",
"rationale": "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).\n",
"treatments": [
"stretched",
"rotated",
"recolored",
"gradient-fill",
"drop-shadow",
"on-busy-photo",
"composited-with-product-logo"
]
},
{
"type": "colorChoice",
"target": "roles.colors.primary",
"severity": "error",
"rationale": "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.\n",
"allowed": [
"next-black",
"next-white"
],
"forbidden": [
"vercel-blue",
"vercel-red",
"vercel-amber",
"vercel-green"
]
},
{
"type": "enumMembership",
"target": "typography.heading.fontWeight",
"severity": "warning",
"rationale": "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.\n",
"allowed": [
"500",
"600",
"700",
"800"
]
},
{
"type": "contrastRatio",
"target": "text-primary",
"severity": "error",
"rationale": "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.\n",
"against": "background",
"minRatio": 4.5,
"standard": "WCAG-AA"
},
{
"type": "contextRestriction",
"target": "roles.colors.accent",
"severity": "warning",
"rationale": "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.\n",
"allowedContexts": [
"link",
"focus-ring",
"data-viz-primary"
],
"forbiddenContexts": [
"background",
"large-fill"
]
},
{
"type": "fontPairing",
"target": "typography.heading",
"severity": "error",
"rationale": "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.\n",
"requires": "body",
"minSizeRatio": 1.5
},
{
"type": "compositionConstraint",
"target": "roles.colors.identity",
"severity": "error",
"rationale": "The brand block is black-on-white or white-on-black only. Pairing the triangle directly with functional hues breaks the monochrome brand contract.\n",
"pairsWith": [
"next-white"
],
"doesNotPairWith": [
"vercel-blue",
"vercel-red",
"vercel-amber",
"vercel-green"
]
},
{
"type": "accessibilityRequirement",
"target": "*",
"severity": "error",
"rationale": "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.\n",
"standard": "WCAG-AA",
"criterion": "1.4.3"
},
{
"type": "contextRestriction",
"target": "trademark.use",
"severity": "error",
"rationale": "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.\n",
"forbiddenContexts": [
"product-name-prefix",
"implied-endorsement"
]
}
]
}