{
"id": "vercel",
"version": "1.0.0",
"name": "Vercel",
"description": "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.\n",
"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.\n",
"importedDate": "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.\n"
},
"tags": [
"vercel",
"frontend-cloud",
"developer-tools",
"brand",
"dark-first",
"monochrome"
],
"palette": {
"ref": "vercel@1.0.0",
"swatches": [
{
"id": "vercel-black",
"name": "Vercel Black",
"value": "#000000",
"description": "Pure black — the canvas of the marketing site.",
"aliases": []
},
{
"id": "vercel-white",
"name": "Vercel White",
"value": "#FFFFFF",
"description": "Pure white — the foreground of the marketing site.",
"aliases": []
},
{
"id": "dark-bg-100",
"name": "Dark Background 100",
"value": "#0A0A0A",
"description": "ds-background-100 (hsl 0,0%,4%) — page canvas in dark mode.",
"aliases": []
},
{
"id": "dark-bg-200",
"name": "Dark Background 200",
"value": "#000000",
"description": "ds-background-200 — deeper canvas / under-page.",
"aliases": []
},
{
"id": "dark-gray-100",
"name": "Dark Gray 100",
"value": "#1A1A1A",
"description": "ds-gray-100 — subtle surface tint.",
"aliases": []
},
{
"id": "dark-gray-200",
"name": "Dark Gray 200",
"value": "#1F1F1F",
"description": "ds-gray-200.",
"aliases": []
},
{
"id": "dark-gray-300",
"name": "Dark Gray 300",
"value": "#292929",
"description": "ds-gray-300.",
"aliases": []
},
{
"id": "dark-gray-400",
"name": "Dark Gray 400",
"value": "#2E2E2E",
"description": "ds-gray-400.",
"aliases": []
},
{
"id": "dark-gray-500",
"name": "Dark Gray 500",
"value": "#454545",
"description": "ds-gray-500 — borders.",
"aliases": []
},
{
"id": "dark-gray-600",
"name": "Dark Gray 600",
"value": "#878787",
"description": "ds-gray-600.",
"aliases": []
},
{
"id": "dark-gray-700",
"name": "Dark Gray 700",
"value": "#8F8F8F",
"description": "ds-gray-700.",
"aliases": []
},
{
"id": "dark-gray-800",
"name": "Dark Gray 800",
"value": "#7D7D7D",
"description": "ds-gray-800.",
"aliases": []
},
{
"id": "dark-gray-900",
"name": "Dark Gray 900",
"value": "#A1A1A1",
"description": "ds-gray-900 — muted text.",
"aliases": []
},
{
"id": "dark-gray-1000",
"name": "Dark Gray 1000",
"value": "#EDEDED",
"description": "ds-gray-1000 — primary text in dark mode.",
"aliases": []
},
{
"id": "light-bg-100",
"name": "Light Background 100",
"value": "#FFFFFF",
"description": "Page canvas in light mode.",
"aliases": []
},
{
"id": "light-bg-200",
"name": "Light Background 200",
"value": "#FAFAFA",
"description": "Subtle layered surface.",
"aliases": []
},
{
"id": "light-gray-200",
"name": "Light Gray 200",
"value": "#EAEAEA",
"description": "Hairline border.",
"aliases": []
},
{
"id": "light-gray-600",
"name": "Light Gray 600",
"value": "#666666",
"description": "Secondary text.",
"aliases": []
},
{
"id": "light-gray-1000",
"name": "Light Gray 1000",
"value": "#171717",
"description": "Primary text in light mode (rgb 23,23,23 — body color on vercel.com).",
"aliases": []
},
{
"id": "vercel-blue",
"name": "Vercel Blue",
"value": "#0070F3",
"description": "ds-blue-600 — the classic Vercel link / accent blue.",
"aliases": []
},
{
"id": "vercel-blue-bright",
"name": "Vercel Blue Bright",
"value": "#52A8FF",
"description": "ds-blue-900 — bright link blue used on dark surfaces.",
"aliases": []
},
{
"id": "vercel-red",
"name": "Vercel Red",
"value": "#FF6166",
"description": "ds-red-900 — error / destructive.",
"aliases": []
},
{
"id": "vercel-amber",
"name": "Vercel Amber",
"value": "#F2A60D",
"description": "ds-amber-900 — warning.",
"aliases": []
},
{
"id": "vercel-green",
"name": "Vercel Green",
"value": "#62C073",
"description": "ds-green-900 — success.",
"aliases": []
}
],
"modes": {
"light": {
"roles": {
"background": "light-bg-200",
"surface": "light-bg-100",
"surface-elevated": "light-bg-100",
"text-primary": "light-gray-1000",
"text-secondary": "light-gray-600",
"text-tertiary": "dark-gray-600",
"primary": "vercel-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",
"border": "light-gray-200"
}
},
"dark": {
"roles": {
"background": "dark-bg-100",
"surface": "dark-gray-100",
"surface-elevated": "dark-gray-200",
"text-primary": "dark-gray-1000",
"text-secondary": "dark-gray-900",
"text-tertiary": "dark-gray-700",
"primary": "vercel-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",
"border": "dark-gray-500"
}
}
}
},
"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": "vercel-black",
"on-identity": "vercel-white",
"primary": "vercel-black",
"primary-hover": "dark-gray-1000",
"accent": "vercel-blue",
"accent-hover": "vercel-blue-bright",
"success": "vercel-green",
"warning": "vercel-amber",
"error": "vercel-red",
"text-primary-light": "light-gray-1000",
"text-primary-dark": "dark-gray-1000",
"background-light": "light-bg-200",
"background-dark": "dark-bg-100",
"surface-light": "light-bg-100",
"surface-dark": "dark-gray-100"
},
"typography": {
"display": "heading",
"prose": "body",
"code": "mono"
}
},
"assets": [],
"rules": [
{
"type": "contrastRatio",
"target": "text-primary",
"severity": "error",
"rationale": "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.\n",
"against": "background",
"minRatio": 4.5,
"standard": "WCAG-AA"
},
{
"type": "colorChoice",
"target": "roles.colors.primary",
"severity": "error",
"rationale": "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.\n",
"allowed": [
"vercel-black",
"vercel-white"
],
"forbidden": [
"vercel-blue",
"vercel-red",
"vercel-amber",
"vercel-green"
]
},
{
"type": "forbiddenTreatment",
"target": "logo",
"severity": "error",
"rationale": "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.\n",
"treatments": [
"stretched",
"rotated",
"recolored",
"drop-shadow",
"gradient-fill",
"on-busy-photo"
]
},
{
"type": "enumMembership",
"target": "typography.heading.fontWeight",
"severity": "warning",
"rationale": "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.\n",
"allowed": [
"500",
"600",
"700",
"800"
]
},
{
"type": "fontPairing",
"target": "typography.heading",
"severity": "error",
"rationale": "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.\n",
"requires": "body",
"minSizeRatio": 1.5
},
{
"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": "roles.colors.accent",
"severity": "warning",
"rationale": "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.\n",
"allowedContexts": [
"link",
"focus-ring",
"data-viz-primary"
],
"forbiddenContexts": [
"background",
"large-fill"
]
},
{
"type": "compositionConstraint",
"target": "roles.colors.identity",
"severity": "error",
"rationale": "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.\n",
"pairsWith": [
"vercel-white"
],
"doesNotPairWith": [
"vercel-blue",
"vercel-red",
"vercel-amber",
"vercel-green"
]
}
]
}