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;
}