Tweak the design tokens below to match your brand. Every change updates the live preview in real time. When you are happy, copy the generated CSS and drop it into your project's globals.css.
Click any colour swatch to open the picker. Toggle your site theme to edit the other mode.
Storage
6.2 / 10 GB
System Update
Maintenance on Sunday 2–4 AM UTC.
Pick a seed colour — the full 10-step scale is generated automatically. Click any swatch to fine-tune individual steps.
Paste this into your globals.css to apply your theme.
:root {
--background: #f8f9f5;
--foreground: #1c2218;
--surface: #ffffff;
--surface-raised: #eef2e8;
--surface-overlay: #e3e9da;
--border: #c4cdb8;
--muted-fg: #60705a;
--primary-default: #435240;
--primary-default-fg: #f4f7f1;
--primary-muted: #adc09e;
--success: #059669;
--success-bg: #ecfdf5;
--success-fg: #064e3b;
--danger: #e11d48;
--danger-bg: #fff1f2;
--danger-fg: #881337;
--warning: #d97706;
--warning-bg: #fffbeb;
--warning-fg: #78350f;
}
.dark {
--background: #131a10;
--foreground: #e2eada;
--surface: #1c241a;
--surface-raised: #252e22;
--surface-overlay: #2d392a;
--border: #3c4d38;
--muted-fg: #9ea593;
--primary-default: #adc09e;
--primary-default-fg: #1c2218;
--primary-muted: #435240;
--success: #34d399;
--success-bg: #022c1e;
--success-fg: #a7f3d0;
--danger: #fb7185;
--danger-bg: #200a10;
--danger-fg: #fecdd3;
--warning: #fbbf24;
--warning-bg: #1c1300;
--warning-fg: #fde68a;
}
/* ─── Primary colour scale ─────────────────────────────────────────
Components use these steps for hover, disabled, and active states.
─────────────────────────────────────────────────────────────────── */
@theme {
--color-primary-50: #f4f7f1;
--color-primary-100: #e2eada;
--color-primary-200: #c8d5be;
--color-primary-300: #adc09e;
--color-primary-400: #a4b496;
--color-primary-500: #9ea593;
--color-primary-600: #7e8c73;
--color-primary-700: #60705a;
--color-primary-800: #435240;
--color-primary-900: #2c3629;
}All semantic design tokens and their current values for both themes.
| Token | Label | Light | Dark |
|---|---|---|---|
| --background | Background | #F8F9F5 | #131A10 |
| --foreground | Foreground | #1C2218 | #E2EADA |
| --surface | Surface | #FFFFFF | #1C241A |
| --surface-raised | Surface Raised | #EEF2E8 | #252E22 |
| --surface-overlay | Surface Overlay | #E3E9DA | #2D392A |
| --border | Border | #C4CDB8 | #3C4D38 |
| --muted-fg | Muted Text | #60705A | #9EA593 |
| --primary-default | Primary | #435240 | #ADC09E |
| --primary-default-fg | Primary Foreground | #F4F7F1 | #1C2218 |
| --primary-muted | Primary Muted | #ADC09E | #435240 |
| --success | Success | #059669 | #34D399 |
| --success-bg | Success Background | #ECFDF5 | #022C1E |
| --success-fg | Success Foreground | #064E3B | #A7F3D0 |
| --danger | Danger | #E11D48 | #FB7185 |
| --danger-bg | Danger Background | #FFF1F2 | #200A10 |
| --danger-fg | Danger Foreground | #881337 | #FECDD3 |
| --warning | Warning | #D97706 | #FBBF24 |
| --warning-bg | Warning Background | #FFFBEB | #1C1300 |
| --warning-fg | Warning Foreground | #78350F | #FDE68A |