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.
How the tokens behave:
accent is Maker Teal, the action colour. brand defaults to the accent, and is the one family a
makerspace may override with its own colour.emphasis is Workshop Orange. It belongs to Space Works and can never be overridden.*-soft tokens are opaque tinted fills for pills and cards. *-ink tokens are the text colour that
passes contrast on every surface.danger comes from the UX references, because the brand palette has no red. It is reserved for
destructive actions and errors.
How every value was derived, with its contrast ratio, is in the UI brand spec.
Surfaces and text
| Token | Light | Dark |
|---|
--color-bg | #FFF4E8 | #142C2A |
--color-surface | #F6ECE0 | #193935 |
--color-panel | #FFFFFF | #1F433F |
--color-hover | #EFE6DB | #254D48 |
--color-line | #D5D0C6 | #4D6D67 |
--color-outline | #828A83 | #93A198 |
--color-ink | #142C2A | #FFF4E8 |
--color-muted | #5B6863 | #C7C4BA |
--color-focus | #006E63 | #DFFF8F |
Accent
| Token | Light | Dark |
|---|
--color-accent | #006E63 | #006E63 |
--color-accent-hover | #02675D | #02675D |
--color-accent-active | #046158 | #046158 |
--color-on-accent | #FFF4E8 | #FFF4E8 |
--color-accent-soft | #E0EEEC | #1A4A45 |
--color-accent-ink | #006E63 | #ABC8BC |
Brand
| Token | Light | Dark |
|---|
--color-brand | #006E63 | #006E63 |
--color-brand-hover | #02675D | #02675D |
--color-brand-active | #046158 | #046158 |
--color-on-brand | #FFF4E8 | #FFF4E8 |
--color-brand-soft | #E0EEEC | #1A4A45 |
--color-brand-ink | #006E63 | #ABC8BC |
--color-brand-boundary | #006E63 | #ABC8BC |
Emphasis
| Token | Light | Dark |
|---|
--color-emphasis | #FF7447 | #FF7447 |
--color-emphasis-hover | #FF8157 | #FF8157 |
--color-emphasis-active | #FF8E67 | #FF8E67 |
--color-on-emphasis | #142C2A | #142C2A |
--color-emphasis-soft | #FFEEE9 | #2F4640 |
Success
| Token | Light | Dark |
|---|
--color-success | #DFFF8F | #DFFF8F |
--color-success-hover | #CBEA85 | #CBEA85 |
--color-success-active | #B6D57B | #B6D57B |
--color-on-success | #142C2A | #142C2A |
--color-success-soft | #FBFFF2 | #2C5045 |
--color-success-ink | #536D49 | #DFFF8F |
Warn
| Token | Light | Dark |
|---|
--color-warn | #FFD447 | #FFD447 |
--color-warn-hover | #E8C344 | #E8C344 |
--color-warn-active | #D0B241 | #D0B241 |
--color-on-warn | #142C2A | #142C2A |
--color-warn-soft | #FFFAE9 | #2F4D40 |
--color-warn-ink | #696834 | #FFD447 |
Info
| Token | Light | Dark |
|---|
--color-info | #B5CDFF | #B5CDFF |
--color-info-hover | #A5BDEA | #A5BDEA |
--color-info-active | #95ADD4 | #95ADD4 |
--color-on-info | #142C2A | #142C2A |
--color-info-soft | #F6F9FF | #2A4D4C |
--color-info-ink | #51697B | #B5CDFF |
Danger
| Token | Light | Dark |
|---|
--color-danger | #B91C1C | #FCA5A5 |
--color-danger-hover | #991B1B | #FDB9B6 |
--color-danger-active | #851E1D | #FDC9C3 |
--color-on-danger | #FFF4E8 | #142C2A |
--color-danger-line | #FCA5A5 | #7C6261 |
Sidebar
| Token | Light | Dark |
|---|
--color-sidebar | #DFFF8F | #113532 |
--color-sidebar-hover | #F2FFD2 | #254D48 |
--color-sidebar-active | #006E63 | #006E63 |
