# Vercel

> `vercel@1.0.0`

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)** · `vercel@1.0.0` · 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** `(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 |
|----|------|-------|
| `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-black` so brand surfaces render in the dark-first voice regardless of consumer theme. 

---

*Generated by the brand-atoms converter. Source: `vercel@1.0.0` from the encyclopedia.*