Every semantic colour token, light and dark side by side. This page is generated from
tokens/tokens.json, so it
is always current. In CSS, each token is a --color-* variable holding an sRGB triplet. The token names are
the same as the Space Works kit’s, so a project can switch kits without code changes.
How the tokens behave:
accent is Blueprint, the action colour. brand defaults to the accent, and is the one family a
project may override with its own colour.emphasis is Hard Hat. It belongs to Nobody Builds and can never be overridden.success and danger are status colours outside the seven: a soft green and a red, because the
builder has neither. warn is Brick; info is Sky.*-soft tokens are opaque tinted fills for pills and cards. *-ink tokens are the text colour that
passes contrast on every surface.
Every value, with its contrast ratio, is checked by scripts/build-tokens.py and listed in the
UI brand spec.
Surfaces and text
| Token | Light | Dark |
|---|
--color-bg | #F5F7FB | #172033 |
--color-surface | #ECF0F7 | #1D2840 |
--color-panel | #FFFFFF | #22304B |
--color-hover | #E4E9F2 | #2A3957 |
--color-line | #D3DAE6 | #3E4D6B |
--color-outline | #7D8699 | #8592AD |
--color-ink | #172033 | #F5F7FB |
--color-muted | #4F5A70 | #C3C8D2 |
--color-focus | #2457A6 | #FDC521 |
Accent
| Token | Light | Dark |
|---|
--color-accent | #2457A6 | #7FA8E8 |
--color-accent-hover | #1F4C92 | #92B5EC |
--color-accent-active | #1A417E | #A5C2EF |
--color-on-accent | #F5F7FB | #172033 |
--color-accent-soft | #E3ECF8 | #263A5C |
--color-accent-ink | #2457A6 | #A9C8F0 |
Brand
| Token | Light | Dark |
|---|
--color-brand | #2457A6 | #7FA8E8 |
--color-brand-hover | #1F4C92 | #92B5EC |
--color-brand-active | #1A417E | #A5C2EF |
--color-on-brand | #F5F7FB | #172033 |
--color-brand-soft | #E3ECF8 | #263A5C |
--color-brand-ink | #2457A6 | #A9C8F0 |
--color-brand-boundary | #2457A6 | #A9C8F0 |
Emphasis
| Token | Light | Dark |
|---|
--color-emphasis | #FDC521 | #FDC521 |
--color-emphasis-hover | #FDCD45 | #FDCD45 |
--color-emphasis-active | #FED66A | #FED66A |
--color-on-emphasis | #172033 | #172033 |
--color-emphasis-soft | #FFF6D6 | #3A3424 |
Success
| Token | Light | Dark |
|---|
--color-success | #A6D98F | #A6D98F |
--color-success-hover | #95CA7E | #95CA7E |
--color-success-active | #84BA6E | #84BA6E |
--color-on-success | #172033 | #172033 |
--color-success-soft | #F1F9EC | #26382F |
--color-success-ink | #3B6B2B | #A6D98F |
Warn
| Token | Light | Dark |
|---|
--color-warn | #EA724A | #EA724A |
--color-warn-hover | #EC8261 | #EC8261 |
--color-warn-active | #EF9377 | #EF9377 |
--color-on-warn | #172033 | #172033 |
--color-warn-soft | #FCEBE4 | #3B2C2B |
--color-warn-ink | #A3412A | #F2A88E |
Info
| Token | Light | Dark |
|---|
--color-info | #CFE0F7 | #CFE0F7 |
--color-info-hover | #BDD3F1 | #BDD3F1 |
--color-info-active | #ABC6EB | #ABC6EB |
--color-on-info | #172033 | #172033 |
--color-info-soft | #EEF4FC | #24344F |
--color-info-ink | #2457A6 | #CFE0F7 |
Danger
| Token | Light | Dark |
|---|
--color-danger | #B91C1C | #FCA5A5 |
--color-danger-hover | #991B1B | #FDB9B6 |
--color-danger-active | #851E1D | #FDC9C3 |
--color-on-danger | #F5F7FB | #172033 |
--color-danger-line | #FCA5A5 | #7C6261 |
Sidebar
| Token | Light | Dark |
|---|
--color-sidebar | #CFE0F7 | #121A2B |
--color-sidebar-hover | #E0EBFA | #2A3957 |
--color-sidebar-active | #2457A6 | #7FA8E8 |
