---
name: Vercel
description: Sharp, monochrome, deeply geometric. Pure black/white with one signature blue. Hard edges, generous mono treatment, terminal vibes.
---

# Vercel

Vercel's brand is "developer infrastructure that looks like a terminal in dark mode". The visual language is uncompromising: pure black, pure white, one accent, mono fonts where appropriate, and geometric precision throughout.

## 1. Color

- **Primary** `#0070F3` — the signature Vercel blue. Used only for links, primary CTAs, and active state.
- **Background** `#000000` (dark mode default), `#FFFFFF` (light mode).
- **Foreground** inverted — `#FFFFFF` on black, `#000000` on white.
- **Subtle** `#888888` for secondary text, `#444444` for tertiary on dark, `#666666` on light.
- **Borders** `#333333` on dark, `#EAEAEA` on light.
- **Accent colors** for status: success `#0070F3`, warning `#F5A623`, error `#E00`.

No gradients. No tints beyond grayscale. The brand is monochromatic.

## 2. Typography

- Display: **Geist** or Inter. 600 weight on headlines, 400 on body.
- Mono: **Geist Mono** or JetBrains Mono — used heavily in marketing for code, version numbers, IDs, even paragraph callouts.

Sizes:
- Display L: 64px / 1.05 / 600 / letter-spacing -0.025em
- H1: 40px / 1.1 / 600
- H2: 24px / 1.25 / 600
- Body: 16px / 1.5 / 400
- Caption: 13px / 1.4 / 500
- Mono: 14px / 1.5 / 400

Mono on hero copy is a brand signature — feel free to set a hero subtitle in mono.

## 3. Spacing

4px base. Tight density on dashboards, generous on marketing (sections 80-120px vertical).

## 4. Layout

- Max width: 1080px content, 1440px on wide media.
- Grids are exact and geometric — 12 columns, no asymmetric drift.
- Hard-edge geometric SVG art is a signature (overlapping triangles, isometric grids, light rays).

## 5. Components

Buttons:
- Primary — `#FFFFFF` text on black (dark mode) or `#000000` text on white (light mode); border radius 6px; **1px white/black border** depending on theme. Hover inverts.
- Accent primary (CTA-CTA) — `#0070F3` background, white text, 6px radius.
- Secondary — transparent, 1px border at `#333` (dark) or `#EAEAEA` (light).

Cards: 8px radius, 1px border (no shadow). Background slightly lighter than canvas (`#111` on `#000`).

Inputs: 6px radius, 1px border, monospace placeholder is OK and on-brand.

Code blocks: a signature element. 6px radius, 1px border, mono font, syntax highlighting in the Vercel palette (blue, gray, white).

## 6. Motion

Snap — 100-160ms transitions. Easing: `cubic-bezier(0.25, 0.1, 0.25, 1)`. The brand feels instant.

Hovers are immediate inversions or border-color shifts — no fade.

## 7. Voice

- Headlines: terse + technical. "Develop. Preview. Ship." "The Frontend Cloud."
- Body: declarative + structured. Often bullet-shaped sentences.
- CTAs: "Start Deploying", "View Documentation". Title Case is fine. No exclamation.

## 8. Brand

- The Vercel triangle logo is canonical — never tinted, never on top of imagery.
- Geometric SVG patterns (triangles, isometric grids, gradient light cones) appear in hero backgrounds.
- Code is shown everywhere — the brand is "engineer-first".
- Terminal screenshots and CLI output are welcome.

## 9. Anti-patterns

- Pastel colors. Forbidden.
- Drop shadows. Use borders.
- Rounded corners > 12px. Vercel is sharp.
- Stock photography of people.
- Italic display type.
- Multi-color gradients. The brand is monochromatic + one blue.
- Emoji-heavy marketing.
- "Modern", "innovative" — voice is concrete, not buzzword.
