# Build.

Select a palette. Structure your theme

Palettes

10 themes

Color System

Premium palettes,
zero configuration.

Pick a vibe. Grab the variables. See how it Looks on Components.

CSS Output

:root {
  --bg: #000000;
  --card-bg: #111111;
  --text-primary: #ffffff;
  --text-secondary: #a1a1a1;
  --text-muted: #666666;
  --border: #333333;
  --accent: #ffffff;
  --accent-subtle: #333333;
  --accent-text: #000000;
  --success: #0070f3;
  --success-bg: rgba(0,112,243,0.1);
  --warning: #f5a623;
  --warning-bg: rgba(245,166,35,0.1);
  --danger: #ee0000;
  --danger-bg: rgba(238,0,0,0.1);
  --muted: #222222;
}

Geist

Vercel-inspired stark contrast

bg#000000

card-bg#111111

text#ffffff

border#333333

accent#ffffff

success#0070f3

warning#f5a623

danger#ee0000

Revenue

$48.2K

+12.4%

Active Users

8,421

+5.2%

Churn Rate

2.1%

-0.4%

✓

Deployed

v2.4.1 is live on production.

⚠

Rate limit

80% of monthly quota used.

Build failed

Unexpected token in config.ts.

Arjun Krishnan

Product Designer

Pro

Email address

Stack

ReactTypeScriptNext.jsTailwindPrisma

Usage

Storage72%

API Quota45%

Bandwidth88%

Typography

The quick brown fox

Jumps over the lazy dog. Accent color makes important details stand out while muted text recedes quietly.

# Build.

Premium palettes, zero configuration.

Geist

Premium palettes,
zero configuration.