Geist

Geist is the dev-tool aesthetic — Vercel, Linear, Stripe, Resend, Raycast share its DNA. Mostly grayscale. Hairline borders carry depth instead of shadows. The CTA is near-black. No accent color blares for attention.

It feels expensive without being decorative.

When to use it

• A polished product docs site for a developer audience.
• Marketing-adjacent docs where the brand wants to feel premium.
• Anywhere you’d say “make it look like Vercel.”

If your brand has a strong accent color you want to feature, tang is friendlier. If you want playful, this isn’t the theme.

Set it

{ "theme": "geist" }

Token table

From packages/theme-geist/src/styles/theme.css:

Colors — light

Colors — dark

Inverts the above: near-white primary on near-black surface. Geist’s defining property is that the primary stays consistent — buttons are always fg-colored, never bright.

Typography

If you don’t want to ship the Geist webfonts (~95KB total), Tangly falls back gracefully to Inter.

Layout

What makes geist different

• No accent color. Every theme except geist has a tang/blue/green/burnt accent. Geist’s primary is the foreground. CTAs are near-black on light, near-white on dark.
• Hairline borders. Borders are rgba(0, 0, 0, 0.08) — barely visible, but enough to separate planes without shadows.
• Mono UI labels. Some chrome (filenames, IDs, version numbers) renders in Geist Mono. Looks like a dev tool — because it is.

Customizing

If you want geist’s chrome but a colored accent, it stops being geist — but the theme makes it easy:

{
  "theme": "geist",
  "colors": {
    "primary": "#7c3aed",
    "light":   "#a78bfa",
    "dark":    "#5b21b6"
  }
}

Most projects keep geist’s grayscale and just override fonts:

{
  "theme": "geist",
  "fonts": {
    "heading": { "family": "Inter" },
    "body":    { "family": "Inter" }
  }
}

Source

packages/theme-geist/src/styles/theme.css