# Vercel

> Generated by BrandSweets from the vercel BrandDoc (v2, schema 1). Do not edit by hand.

## Identity

**Tagline:** Develop. Preview. Ship.

**Mission:** Enable teams to build, preview, and ship the best web experiences.

**Sector:** cloud platform / frontend infrastructure

**Audience:** frontend developers and the teams shipping the web

**Founded:** 2015

**Domain:** vercel.com

**Guidelines:** https://vercel.com/design/brands


Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. The brand is stark and confident: pure black and white, a single triangle mark, and the open-source Geist typeface. Everything signals speed and precision.

### Values

- **Speed** — Fast product, fast brand — nothing should slow the reader or the build down.
- **Developer experience** — Every surface treats the developer as a peer.

## Voice

**Tone:** fast, confident, developer-first, minimal

### Do

- Speak to developers as peers
- Show, don't tell — a command or a deploy URL beats a paragraph
- Keep it terse and high-energy
- Reward the reader's technical fluency

### Don't

- Don't over-explain basics to a developer audience
- Avoid marketing fluff and empty superlatives
- Never slow the reader down with hedging

### Sample copy

- **button** _(cta)_: "Deploy" — `cta-button`
- **success toast** _(notification)_: "Deployed to production in 12s." — `deploy-toast`
- **docs** _(body)_: "Push to your Git branch to get an instant preview deployment." — `docs-line`
- **hero headline** _(headline)_: "Your complete platform for the web." — `hero-headline`

### Vocabulary

- **Preferred:** deploy, preview, ship, frontend, the web
- **Avoided:** synergy, leverage, best-in-class, solutioning
- **Preview Deployment:** Two words, capitalized when naming the feature.
- **Vercel:** Always capitalized; the platform, never a verb.

## Colors

| Role | Name | Hex | Dark | Usage |
| --- | --- | --- | --- | --- |
| `primary` | — | `#000000` | `#ffffff` | The brand is black. Primary ink for logo, headings, buttons. Inverts to white in dark mode. |
| `accent` | Vercel Blue | `#0070f3` | — | Vercel blue — used sparingly for links and highlighted actions. |
| `surface` | — | `#ffffff` | `#0a0a0a` | Background — pure white in light mode; near-black in dark mode. |
| `text` | — | `#111111` | `#f5f5f5` | Body and heading ink on white; near-white on the dark surface. |
| `danger` | — | `#ee0000` | — | Errors, failed deployments. |

### Scales

- **primary:** 50 `#f2f2f2`, 100 `#e6e6e6`, 200 `#cccccc`, 300 `#b3b3b3`, 400 `#999999`, 500 `#808080`, 600 `#666666`, 700 `#4d4d4d`, 800 `#333333`, 900 `#1a1a1a`, 950 `#000000`
- **accent:** 50 `#e6f2ff`, 100 `#cce4ff`, 200 `#99caff`, 300 `#5eaaff`, 400 `#2b8bff`, 500 `#0070f3`, 600 `#005ad1`, 700 `#0047a8`, 800 `#003a87`, 900 `#00306e`, 950 `#001c42`
- **surface:** 50 `#ffffff`, 100 `#fafafa`, 200 `#f2f2f2`, 300 `#ebebeb`, 400 `#d4d4d4`, 500 `#a3a3a3`, 600 `#737373`, 700 `#525252`, 800 `#333333`, 900 `#1a1a1a`, 950 `#0a0a0a`
- **text:** 50 `#f5f5f5`, 100 `#e5e5e5`, 200 `#cccccc`, 300 `#a3a3a3`, 400 `#737373`, 500 `#525252`, 600 `#404040`, 700 `#2e2e2e`, 800 `#1f1f1f`, 900 `#111111`, 950 `#000000`
- **danger:** 50 `#ffe9e9`, 100 `#ffd1d1`, 200 `#ffa3a3`, 300 `#ff6b6b`, 400 `#ff3838`, 500 `#ee0000`, 600 `#c50000`, 700 `#9c0000`, 800 `#7d0000`, 900 `#660000`, 950 `#3d0000`

## Typography

### Families

#### Geist `geist`
- **Source:** commissioned
- **Foundry:** Vercel
- **Weights:** 400 Regular, 500 Medium, 600 Semibold, 700 Bold
- **Fallback stack:** `Geist, system-ui, "Helvetica Neue", Arial, sans-serif`
- **Licensing:** Geist, commissioned and released by Vercel — SIL Open Font License. Self-hosting and rehosting are permitted.
- **License:** https://vercel.com/font
- **Variable axes:** wght 100–900 (def 400)

#### Geist Mono `geist-mono`
- **Source:** commissioned
- **Foundry:** Vercel
- **Weights:** 400 Regular, 500 Medium
- **Fallback stack:** `"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace`
- **Licensing:** Geist Mono by Vercel — SIL Open Font License; used for code, commands, and deploy URLs.
- **License:** https://vercel.com/font
- **Variable axes:** wght 100–900 (def 400)

### Role assignments

- **display:** Geist (`geist`) — weights 600, 700
- **body:** Geist (`geist`) — weights 400, 500
- **mono:** Geist Mono (`geist-mono`)

### Scale

| Step | Size (rem) | Line height | Tracking (em) |
| --- | --- | --- | --- |
| xs | 0.75 | 1.5 | — |
| sm | 0.875 | 1.5 | — |
| base | 1 | 1.5 | — |
| lg | 1.25 | 1.4 | — |
| xl | 1.75 | 1.2 | -0.015 |
| 2xl | 2.5 | 1.1 | -0.02 |
| display | 4 | 1 | -0.04 |

## Logos

### primary
- **Formats:**
  - `svg` (24×24): data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20role%3D%22img%22%3E%3Ctitle%3EVercel%3C%2Ftitle%3E%3Cpath%20d%3D%22m12%201.608%2012%2020.784H0Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E
  - `png` (566×128): brands/vercel/logo-primary@2x.png
- **Clearspace:** 0.5× logo-height — Clear space of half the lockup height on all sides.
- **Min size:** 80px w (screen)
- **Allowed backgrounds:** light
- **Disallowed backgrounds:** dark, photo
- **Notes:** Official monochrome mark from simple-icons (CC0 / public domain). Source: https://vercel.com/geist/brands

### mark
- **Formats:**
  - `svg` (64×56): brands/vercel/triangle.svg
- **Clearspace:** 0.5× mark-width
- **Min size:** 16px w (screen)
- **Allowed backgrounds:** any
- **Notes:** The triangle mark is solid black on light, solid white on dark. Never outlined.

### mono
- **Formats:**
  - `svg` (24×24): data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20role%3D%22img%22%3E%3Ctitle%3EVercel%3C%2Ftitle%3E%3Cpath%20d%3D%22m12%201.608%2012%2020.784H0Z%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E
- **Clearspace:** 1× logo-height — Default clearspace of one logo-height on all sides (auto-seeded; refine after review).
- **Min size:** 24px w (screen)
- **Allowed backgrounds:** light, muted
- **Disallowed backgrounds:** dark
- **Notes:** Official monochrome mark from simple-icons (CC0 / public domain). Source: https://vercel.com/geist/brands

### inverse
- **Formats:**
  - `svg` (283×64): brands/vercel/logo-inverse.svg
- **Clearspace:** 0.5× logo-height
- **Min size:** 80px w (screen)
- **Allowed backgrounds:** dark, brand, photo

### favicon
- **Formats:**
  - `svg` (32×32): brands/vercel/favicon.svg
  - `png` (32×32): brands/vercel/favicon-32.png
  - `ico` (32×32): brands/vercel/favicon.ico
- **Allowed backgrounds:** any

## Usage Rules

- **[SHOULD] Black and white lead; blue accents** (color) — The system is monochrome. Use Vercel blue only for links and a single primary action per view. `black-and-white-first`
- **[MUST] Meet WCAG AA** (accessibility) — Maintain 4.5:1 for body text in both light and dark modes. `contrast-aa`
- **[MUST] Set brand type in Geist** (typography) — Use Geist for all brand and product surfaces; Geist Mono for code, commands, and deploy URLs. `geist-only`
- **[MUST] Keep the triangle solid** (logo) — The mark is a solid fill — black on light, white on dark. Never outline, gradient, or recolor it. `triangle-solid`

## Boards

- **Vercel — Brand** — `cover` (`board-cover`)
- **Logo** — `logo-suite` (`board-logos`)
- **Color** — `color-system` (`board-colors`)
- **Geist** — `type-specimen` (`board-type`)
- **Buttons** — `ui-preview` (`board-ui`)
- **Layout Grid** — `custom-html` (`board-grid`)

## Resources

- Tokens (JSON): /b/vercel/tokens.json
- Tokens (CSS): /b/vercel/brand.css
- This document: /b/vercel/brand.md
- MCP endpoint (public read): mcp.brandsweets.com/vercel/mcp
- Agent integration guide: /agents.md