Vercel — Geist Design System

# Vercel Design Guidelines

> Design for clarity, precision, and evidence-led communication.

## Overview

Vercel's design language emphasizes clarity, precision, and evidence-led communication. The aesthetic is restrained, typographically driven, and optimized for both light and dark modes.

## Brand Values

- **Precise**: Clear hierarchy, exact typography
- **Calm**: Restrained color, no decoration
- **Direct**: Technically literate, reader-focused
- **Editorial**: Strong information architecture

## Typography

| Role | Family |
|------|--------|
| Primary Sans | Geist Sans |
| Monospace | Geist Mono |

Use Geist Sans for prose, headings, labels, controls, tables. Use Geist Mono only for code, commands, paths, timestamps.

### Type Roles

| Role | Usage |
|------|-------|
| Display | Page-defining statement |
| Title | Normal page title |
| Heading 24 | Major sections |
| Body | Reading text |
| Label | Compact names |

## Color

Design in monochrome. Use color only when it adds significant meaning.

| Token | Light | Dark |
|-------|-------|------|
| Primary Surface | `#ffffff` | `#000000` |
| Secondary | `#fafafa` | `#111111` |
| Text Primary | `#000000` | `#ffffff` |
| Text Secondary | `#666666` | `#888888` |

## Grid

- Desktop: 12 columns
- Tablet: 6 columns
- Mobile: 4 columns

## Do's and Don'ts

### Do's
- Design in monochrome first
- Use Geist typography system
- Create hierarchy through typography
- Make evidence the focal point

### Don'ts
- No decorative gradients, glows, blobs
- No all-caps eyebrows
- No cards nested inside cards
- No visible theme controls

## Resources

- [vercel.com](https://vercel.com)
- [vercel.com/font](https://vercel.com/font)