Geist

# Geist — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Vercel. "Geist" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Geist
**Owner:** Vercel
**Official documentation:** https://vercel.com/geist
**Visual character:** Triangle-company minimalism: true black on true white, Geist type discipline, one electric blue, gradients saved for launch days.

---

## Summary

The dev-tooling design system that helped redefine premium developer surfaces.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Black / Foreground | `#000000` | `--geist-foreground` | Primary text and primary buttons |
| White / Background | `#ffffff` | `--geist-background` | Page background |
| Accents 5 Gray | `#666666` | `--accents-5` | Secondary text |
| Accents 2 | `#eaeaea` | `--accents-2` | Borders and dividers |
| Accents 1 | `#fafafa` | `--accents-1` | Subtle background |
| Blue 600 / Link | `#0070f3` | `--geist-success` | Links and informational (Vercel blue) |
| Error Red | `#ee0000` | `--geist-error` | Errors |
| Warning Amber | `#f5a623` | `--geist-warning` | Warnings |
| Violet Gradient Anchor | `#7928ca` | `--geist-violet` | Marketing gradient accent |

## Typography

- **Body:** Geist Sans — weights 400, 500, 600, 700 — `'Geist', -apple-system, 'Segoe UI', sans-serif`
- **Mono:** Geist Mono — weights 400 — `'Geist Mono', ui-monospace, Menlo, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-72 | `72px` | `72px` |
| heading-40 | `40px` | `48px` |
| heading-24 | `24px` | `32px` |
| copy-16 | `16px` | `24px` |
| copy-14 | `14px` | `20px` |
| label-12 | `12px` | `16px` |

## Spacing

Base unit: `4px (gap unit)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `6px` |
| default | `8px` |
| large | `12px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| shadow-small | `0 2px 4px rgba(0,0,0,0.1)` |
| shadow-medium | `0 8px 30px rgba(0,0,0,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| default | `150ms ease` |

## Quick start (CSS)

```css
/* Geist — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://vercel.com/geist */

:root {
  /* Color */
  --geist-foreground: #000000; /* Primary text and primary buttons */
  --geist-background: #ffffff; /* Page background */
  --accents-5: #666666; /* Secondary text */
  --accents-2: #eaeaea; /* Borders and dividers */
  --accents-1: #fafafa; /* Subtle background */
  --geist-success: #0070f3; /* Links and informational (Vercel blue) */
  --geist-error: #ee0000; /* Errors */
  --geist-warning: #f5a623; /* Warnings */
  --geist-violet: #7928ca; /* Marketing gradient accent */

  /* Typography */
  --font-body: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  /* Type scale */
  --text-heading-72: 72px /* line-height 72px */;
  --text-heading-40: 40px /* line-height 48px */;
  --text-heading-24: 24px /* line-height 32px */;
  --text-copy-16: 16px /* line-height 24px */;
  --text-copy-14: 14px /* line-height 20px */;
  --text-label-12: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-small: 6px;
  --radius-default: 8px;
  --radius-large: 12px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-shadow-small: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-shadow-medium: 0 8px 30px rgba(0,0,0,0.12);

  /* Motion */
  --motion-default: 150ms ease;
}
```

## Origin

Geist emerged out of Vercel's product UI work and crystallized into a public system around 2022 alongside the platform's broader rebrand. Its visual language — restrained typography, sharp monospaced numerals, generous whitespace, single-accent neutrality — has become the dominant aesthetic for modern developer tools and inspired a wave of imitators.

## Governance

Vercel's central design and engineering teams own Geist; component implementations are open-sourced under @vercel/geist-ui and the Geist font family. Updates ship continuously alongside the platform; there's no public RFC process, but the team is unusually public about design decisions on social channels and the engineering blog.

## Known for

- The Geist Sans + Geist Mono typefaces — released open-source and now used widely beyond Vercel as the de-facto type stack for dev tools.
- Restraint as a feature — the system rarely uses color outside neutrals, treats accent like punctuation, and gets out of the way of code samples and dashboards.
- Tabular numerics throughout — the monospaced numerals in tables, deploy logs, and metrics are a deliberate aesthetic choice that reads as engineering-grade.

## Underrated

- The dialog and command-bar patterns are remarkably consistent across the platform — every interaction surface uses the same vocabulary of primary action, secondary action, escape.
- Dark mode is treated as the canonical surface; the light theme is the alternate. Most systems treat this the other way around.

## Watch out for

- The aesthetic is so distinctive that lifting it directly produces a Vercel-clone — the visual restraint reads as 'made with Geist' rather than 'this is your brand'.
- The system is optimized for developer surfaces (dashboards, logs, code editors). Applying it to consumer marketing reads as cold.

## Components worth studying

- **Command Bar** — Cross-platform command palette with keyboard-first navigation, recent items, and async search — the reference for dev-tool UI.
- **Geist UI Code Block** — Syntax-highlighted code with copy affordance, line numbers, and language badge — the canonical code presentation for dev tools.
- **Deployment Card** — Status, commit, branch, region, and timing in a dense card — the reference pattern for any list of long-running operations.

## When to choose Geist

Study Geist if you're building for developers — dashboards, deploy tools, terminals, observability. Don't lift it whole for a consumer or content-led product; the restraint that reads as premium for engineers reads as empty for everyone else.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Geist by Vercel — The dev-tooling design system that helped redefine premium developer surfaces. Character: Triangle-company minimalism: true black on true white, Geist type discipline, one electric blue, gradients saved for launch days. Use a primary colour near #000000, the typeface "Geist Sans" (or a close equivalent), corner radius around 6px, a spacing rhythm on a 4px (gap unit) base. Lean into what it's known for: The Geist Sans + Geist Mono typefaces — released open-source and now used widely beyond Vercel as the de-facto type stack for dev tools. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Geist](https://vercel.com/geist)
- [Geist Sans + Mono on GitHub](https://github.com/vercel/geist-font)
- [Geist UI components](https://geist-ui.dev/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/vercel-geist) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._