Guide
Theming and tokens
Change colors, spacing, and type without rewriting the components.
Example
css
:root {--color-canvas: #000;--color-surface: #000;--color-surface-2: #1a1a1a;--color-elevated: #1f1f1f;--color-line: #ffffff24;--color-line-strong: #ffffff3d;--color-fg: #f4e7d8;--color-muted: #a0a0a0;--color-faint: #7d7d7d;--color-primary: #f4e7d8;--color-primary-hover: #fff;--color-primary-fg: #090c0a;--color-warning: #ffae00;--color-success: #00ca50;--color-danger: #ff565f;--color-ring: #47a8ff;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-card: 12px;--font-sans: "Geist Sans", sans-serif;--font-display: "Geist Sans", sans-serif;--font-mono: "Geist Mono", monospace;}