Color tokens
Norio colors come from the design-token system in tokens/tokens.json. After npm run tokens, values are emitted as CSS custom properties — primarily --color-surface-*, --color-text-*, --color-border-*, and --color-accent-*.
Use these variables in SCSS/CSS — not the docs chrome --tc-* utilities, which only style this documentation kit.
Surface
| Token | Light (example) | Role |
|---|---|---|
--color-surface-base | #FFFFFF | Page background |
--color-surface-subtle | #F4F4F4 | Subtle panels |
--color-surface-raised | #E8E8E8 | Raised surfaces |
--color-surface-inverse | #000000 | Inverse / dark blocks |
Text
| Token | Light (example) | Role |
|---|---|---|
--color-text-tertiary | #000000 | Primary ink / headings |
--color-text-secondary | #696969 | Supporting copy |
--color-text-inverse | brand | Text tied to brand/accent |
--color-text-on-inverse | #FFFFFF | Text on inverse surfaces |
Borders & accent
--color-border-base/--color-border-strong--color-accent-base/--color-accent-strong
Dark mode remaps the same token names under :root[data-color-scheme="dark"] (and via SiteShell colorScheme="dark"). Edit tokens/tokens.json; never hand-edit generated files.