# Design Reference - Vercel
> Minimal black-and-white interface with sharp hierarchy, quiet panels, and exacting system rhythm.

Theme: light
Industry: infrastructure
Captured: 2026-04-23T10:30:00.000Z

## Source
- Source: Public source
- Source URL: https://vercel.com
- Original site: https://vercel.com
- License note: Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.

## Technical Summary
A restrained infrastructure system with monochrome surfaces, crisp typography, hairline borders, and product proof through dashboards, logs, and deployment states.

## Tags
- infrastructure
- minimal
- monochrome
- developer
- systems

## Colors
| Name | Value | Token | Group | Role |
| --- | --- | --- | --- | --- |
| Black | `#000000` | `--color-black` | neutral | Primary text and dark surface. |
| White | `#ffffff` | `--color-white` | surface | Primary light surface. |
| Gray 100 | `#f5f5f5` | `--color-gray-100` | surface | Subtle background. |
| Gray 300 | `#d4d4d4` | `--color-gray-300` | neutral | Border and disabled state. |
| Blue | `#0070f3` | `--color-blue` | accent | Links and active product state. |

## Typography
### Geist - `--font-geist`
Single family for dense product UI, labels, tables, and command surfaces.
- Family: `Geist, ui-sans-serif, system-ui, sans-serif`
- Weights: 400, 500, 600
- Sizes: 12px, 13px, 14px, 16px, 20px, 40px
- Line heights: 1.2, 1.4, 1.5

## Spacing
- Base unit: 4px
- Density: compact

| Name | Value | Token |
| --- | --- | --- |
| 4 | `4px` | `--spacing-4` |
| 8 | `8px` | `--spacing-8` |
| 12 | `12px` | `--spacing-12` |
| 16 | `16px` | `--spacing-16` |
| 24 | `24px` | `--spacing-24` |
| 32 | `32px` | `--spacing-32` |
| 48 | `48px` | `--spacing-48` |
| 64 | `64px` | `--spacing-64` |

## Radius
- Default: 6px
- Controls: 6px
- Panels: 8px

## Components
### Deployment row
Role: Data
- Dense row
- status dot
- timestamp
- monospace hash

### Metric tile
Role: Data
- White panel
- hairline border
- large numeric value

## Do
- Use monochrome first.
- Make status explicit.
- Use blue only for live interaction.

## Dont
- Do not decorate with extra brand color.
- Do not use large rounded cards.
- Do not obscure system state.