Start here
Theming
Every value is a CSS custom property on :root. Components only read semantic aliases, so you can retheme without touching them.
Semantic tokens
| Token | Role | Value |
|---|---|---|
--surface-body | Page background | #DEDAD1 |
--surface-raised | Controls and cards | #F3F1EC |
--surface-screen | Live screens | #151513 |
--text-1 | Primary text | #1B1A18 |
--text-2 | Secondary text | #4A4741 |
--accent | The one action colour | #E5521A |
--border-ink | Hard edges | #1B1A18 |
--focus-ring | Keyboard focus | #E5521A |
Override
css
/* src/app.css */
:root {
--accent: var(--screen-blue);
--surface-body: var(--platinum-100);
}