Reference
Design Tokens
Every CSS custom property — what it does, its default values in both themes, and where it's used.
Colour tokens
| Token | Light | Dark | Used for |
|---|---|---|---|
--bg | #f9f8f6 | #111110 | Page background |
--surface | #ffffff | #191918 | Topbar, sidebar, cards |
--surface-2 | #f2f1ef | #222220 | Hover states, code headers |
--border | #e4e2dd | #2e2d2b | All borders and dividers |
--text | #1a1917 | #e8e6e1 | Headings, primary labels |
--text-2 | #6b6760 | #9a9792 | Body text, paragraphs |
--text-3 | #9c9890 | #5c5a57 | Muted text, nav labels |
--accent | #2a5bd7 | #4f7ef5 | Links, active nav, brand dot |
--accent-soft | #edf1fd | #1a2340 | Active nav background |
--code-bg | #f2f1ef | #151514 | Code block background |
--code-border | #dddbd6 | #2a2927 | Code block border |
Layout & animation tokens
| Token | Value | Used for |
|---|---|---|
--sidebar-w | 272px | Sidebar width |
--header-h | 52px | Topbar height |
--radius | 6px | Border radius on cards, callouts, code blocks |
--transition | 0.18s ease | All hover and theme transitions |
Complete token block
CSS
:root {
--bg: #f9f8f6;
--surface: #ffffff;
--surface-2: #f2f1ef;
--border: #e4e2dd;
--text: #1a1917;
--text-2: #6b6760;
--text-3: #9c9890;
--accent: #2a5bd7;
--accent-soft: #edf1fd;
--code-bg: #f2f1ef;
--code-border: #dddbd6;
--sidebar-w: 272px;
--header-h: 52px;
--radius: 6px;
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--transition: 0.18s ease;
}
[data-theme="dark"] {
--bg: #111110;
--surface: #191918;
--surface-2: #222220;
--border: #2e2d2b;
--text: #e8e6e1;
--text-2: #9a9792;
--text-3: #5c5a57;
--accent: #4f7ef5;
--accent-soft: #1a2340;
--code-bg: #151514;
--code-border: #2a2927;
--shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}