Loading...
Loading...
One brand color → every token you need, light and dark, contrast-checked.
Every token here is contrast-checked. Text, buttons, borders, states — nothing left to guess.
$0
$12
$29
Every token here is contrast-checked. Text, buttons, borders, states — nothing left to guess.
$0
$12
$29
Tokens
Click a name to rename it
| Token | Used for | Light | Dark |
|---|---|---|---|
--bg | Page background | Aa #F8FAFF | Aa #171B22 |
--surface | Cards, panels, inputs | Aa #FFFFFF | Aa #2D323B |
--surface-raised | Menus, popovers, hover rows | Aa #E6EBF4 | Aa #3E444F |
--border | Dividers, input borders | Aa #D4D9E3 1.4:1 ✓ | Aa #3E444F 1.8:1 ✓ |
--text | Body & headings | Aa #2D323B 12.3:1 ✓ | Aa #F8FAFF 16.5:1 ✓ |
--text-muted | Captions, placeholders, metadata | Aa #676D7A 5.0:1 ✓ | Aa #BBC1CB 9.5:1 ✓ |
--primary | Buttons, links, active states | Aa #2563EB 5.0:1 ✓ | Aa #A0C1FF 9.5:1 ✓ |
--primary-hover | Hovered primary controls | Aa #0E47C6 7.3:1 ✓ | Aa #C6DAFF 12.2:1 ✓ |
--on-primary | Text on primary buttons | Aa #FFFFFF 5.2:1 ✓ | Aa #111111 10.4:1 ✓ |
--primary-subtle | Tinted backgrounds, selected rows, badges | Aa #F3F7FF | Aa #00124C |
--accent | Highlights, secondary actions, charts | Aa #8D42D6 5.2:1 ✓ | Aa #D0AEFF 9.2:1 ✓ |
--on-accent | Text on accent fills | Aa #FFFFFF 5.4:1 ✓ | Aa #111111 10.1:1 ✓ |
--accent-subtle | Tinted accent backgrounds | Aa #F9F5FF | Aa #270045 |
--success | Positive states | Aa #16A34A 3.2:1 ✓ | Aa #8DD59A 10.0:1 ✓ |
--warning | Caution states | Aa #D97706 3.0:1 ✓ | Aa #F3B17D 9.4:1 ✓ |
--danger | Errors, destructive actions | Aa #E14B42 3.8:1 ✓ | Aa #FFA69B 9.2:1 ✓ |
--on-success | Text on success fills | Aa #111111 5.7:1 ✓ | Aa #111111 10.9:1 ✓ |
--on-warning | Text on warning fills | Aa #111111 5.9:1 ✓ | Aa #111111 10.3:1 ✓ |
--on-danger | Text on danger fills | Aa #111111 4.8:1 ✓ | Aa #111111 10.1:1 ✓ |
Scales 50–950
:root {
--bg: #F8FAFF;
--surface: #FFFFFF;
--surface-raised: #E6EBF4;
--border: #D4D9E3;
--text: #2D323B;
--text-muted: #676D7A;
--primary: #2563EB;
--primary-hover: #0E47C6;
--on-primary: #FFFFFF;
--primary-subtle: #F3F7FF;
--accent: #8D42D6;
--on-accent: #FFFFFF;
--accent-subtle: #F9F5FF;
--success: #16A34A;
--warning: #D97706;
--danger: #E14B42;
--on-success: #111111;
--on-warning: #111111;
--on-danger: #111111;
/* scales */
--primary-50: #F3F7FF;
--primary-100: #E1ECFF;
--primary-200: #C6DAFF;
--primary-300: #A0C1FF;
--primary-400: #71A1FF;
--primary-500: #467FF5;
--primary-600: #2563EB;
--primary-700: #0E47C6;
--primary-800: #0133A6;
--primary-900: #00247F;
--primary-950: #00124C;
--accent-50: #F9F5FF;
--accent-100: #F0E6FF;
--accent-200: #E2CFFF;
--accent-300: #D0AEFF;
--accent-400: #B886F7;
--accent-500: #9E62E1;
--accent-600: #8D42D6;
--accent-700: #7024B1;
--accent-800: #5A0F94;
--accent-900: #440074;
--accent-950: #270045;
--neutral-50: #F8FAFF;
--neutral-100: #E6EBF4;
--neutral-200: #D4D9E3;
--neutral-300: #BBC1CB;
--neutral-400: #9DA3AF;
--neutral-500: #808692;
--neutral-600: #676D7A;
--neutral-700: #505763;
--neutral-800: #3E444F;
--neutral-900: #2D323B;
--neutral-950: #171B22;
--success-50: #E5FFE8;
--success-100: #C7FBCF;
--success-200: #AEEBB8;
--success-300: #8DD59A;
--success-400: #63B975;
--success-500: #16A34A;
--success-600: #008438;
--success-700: #00692B;
--success-800: #005320;
--success-900: #003D16;
--success-950: #002209;
--warning-50: #FFF5ED;
--warning-100: #FFE6D4;
--warning-200: #FFCEA9;
--warning-300: #F3B17D;
--warning-400: #DB8F51;
--warning-500: #D97706;
--warning-600: #A25700;
--warning-700: #824400;
--warning-800: #673500;
--warning-900: #4D2600;
--warning-950: #2C1300;
--danger-50: #FFF4F2;
--danger-100: #FFE4E0;
--danger-200: #FFCBC4;
--danger-300: #FFA69B;
--danger-400: #F97468;
--danger-500: #E14B42;
--danger-600: #DC2626;
--danger-700: #A5000D;
--danger-800: #840008;
--danger-900: #630004;
--danger-950: #3A0002;
}
[data-theme="dark"] {
--bg: #171B22;
--surface: #2D323B;
--surface-raised: #3E444F;
--border: #3E444F;
--text: #F8FAFF;
--text-muted: #BBC1CB;
--primary: #A0C1FF;
--primary-hover: #C6DAFF;
--on-primary: #111111;
--primary-subtle: #00124C;
--accent: #D0AEFF;
--on-accent: #111111;
--accent-subtle: #270045;
--success: #8DD59A;
--warning: #F3B17D;
--danger: #FFA69B;
--on-success: #111111;
--on-warning: #111111;
--on-danger: #111111;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #171B22;
--surface: #2D323B;
--surface-raised: #3E444F;
--border: #3E444F;
--text: #F8FAFF;
--text-muted: #BBC1CB;
--primary: #A0C1FF;
--primary-hover: #C6DAFF;
--on-primary: #111111;
--primary-subtle: #00124C;
--accent: #D0AEFF;
--on-accent: #111111;
--accent-subtle: #270045;
--success: #8DD59A;
--warning: #F3B17D;
--danger: #FFA69B;
--on-success: #111111;
--on-warning: #111111;
--on-danger: #111111;
}
}