A. Tokens
A.1 Full token table, with the source of every value
Section titled “A.1 Full token table, with the source of every value”| Token | Light | Source (light) | Dark | Source (dark) |
|---|---|---|---|---|
bg |
255 244 232 #FFF4E8 |
brand | 0 0 0 #000000 |
release 0.12 recipe (decisions 275, 300) |
surface |
246 236 224 #F6ECE0 |
brand-mix: Cream + 4% Ink | 11 11 11 #0B0B0B |
release 0.12 recipe (decisions 275, 300) |
panel |
255 255 255 #FFFFFF |
brand (white card, p.4/p.16) | 20 20 20 #141414 |
release 0.12 recipe (decisions 275, 300) |
hover |
239 230 219 #EFE6DB |
brand-mix: Cream + 7% Ink | 28 28 28 #1C1C1C |
release 0.12 recipe (decisions 275, 300) |
line |
213 208 198 #D5D0C6 |
brand-mix: Cream + 18% Ink (p.16 rules = Ink @ 18%) | 44 44 44 #2C2C2C |
release 0.12 recipe (decisions 275, 300) |
outline |
130 138 131 #828A83 |
brand-mix: Cream + 53% Ink | 120 120 120 #787878 |
release 0.12 recipe (decisions 275, 300) |
ink |
20 44 42 #142C2A |
brand | 255 244 232 #FFF4E8 |
brand (reversed text) |
muted |
91 104 99 #5B6863 |
brand-mix: Ink + 30% Cream | 172 172 172 #ACACAC |
release 0.12 recipe (decisions 275, 300) |
focus |
0 110 99 #006E63 |
= accent-ink | 223 255 143 #DFFF8F |
release 0.12 recipe (decisions 275, 300) |
accent |
0 110 99 #006E63 |
brand | 0 110 99 #006E63 |
release 0.12 recipe (decisions 275, 300) |
accent-hover |
2 103 93 #02675D |
brand-mix: accent + 10% Ink | 2 103 93 #02675D |
release 0.12 recipe (decisions 275, 300) |
accent-active |
4 97 88 #046158 |
brand-mix: accent + 20% Ink | 4 97 88 #046158 |
release 0.12 recipe (decisions 275, 300) |
on-accent |
255 244 232 #FFF4E8 |
brand (tested pair 5.68) | 255 244 232 #FFF4E8 |
release 0.12 recipe (decisions 275, 300) |
accent-soft |
224 238 236 #E0EEEC |
brand-mix: panel + 12% accent | 18 29 28 #121D1C |
release 0.12 recipe (decisions 275, 300) |
accent-ink |
0 110 99 #006E63 |
brand | 128 177 166 #80B1A6 |
release 0.12 recipe (decisions 275, 300) |
brand |
0 110 99 #006E63 |
= accent (tenant-overridable) | 0 110 99 #006E63 |
release 0.12 recipe (decisions 275, 300) |
brand-hover |
2 103 93 #02675D |
= accent-hover (tenant-overridable) | 2 103 93 #02675D |
release 0.12 recipe (decisions 275, 300) |
brand-active |
4 97 88 #046158 |
= accent-active (tenant-overridable) | 4 97 88 #046158 |
release 0.12 recipe (decisions 275, 300) |
on-brand |
255 244 232 #FFF4E8 |
= on-accent | 255 244 232 #FFF4E8 |
release 0.12 recipe (decisions 275, 300) |
brand-soft |
224 238 236 #E0EEEC |
= accent-soft (tenant-overridable) | 18 29 28 #121D1C |
release 0.12 recipe (decisions 275, 300) |
brand-ink |
0 110 99 #006E63 |
= accent-ink (tenant-overridable) | 128 177 166 #80B1A6 |
release 0.12 recipe (decisions 275, 300) |
brand-boundary |
0 110 99 #006E63 |
= brand-ink | 128 177 166 #80B1A6 |
release 0.12 recipe (decisions 275, 300) |
emphasis |
255 116 71 #FF7447 |
brand | 255 116 71 #FF7447 |
brand |
emphasis-hover |
255 129 87 #FF8157 |
brand-mix: emphasis + 10% Cream | 255 129 87 #FF8157 |
brand-mix: emphasis + 10% Cream |
emphasis-active |
255 142 103 #FF8E67 |
brand-mix: emphasis + 20% Cream | 255 142 103 #FF8E67 |
brand-mix: emphasis + 20% Cream |
on-emphasis |
20 44 42 #142C2A |
brand (tested pair) | 20 44 42 #142C2A |
brand (tested pair) |
emphasis-soft |
255 238 233 #FFEEE9 |
brand-mix: panel + 12% emphasis | 34 26 23 #221A17 |
release 0.12 recipe (decisions 275, 300) |
success |
223 255 143 #DFFF8F |
brand | 223 255 143 #DFFF8F |
brand |
success-hover |
203 234 133 #CBEA85 |
brand-mix: success + 10% Ink | 203 234 133 #CBEA85 |
brand-mix: success + 10% Ink |
success-active |
182 213 123 #B6D57B |
brand-mix: success + 20% Ink | 182 213 123 #B6D57B |
brand-mix: success + 20% Ink |
on-success |
20 44 42 #142C2A |
brand (tested pair) | 20 44 42 #142C2A |
brand (tested pair) |
success-soft |
251 255 242 #FBFFF2 |
brand-mix: panel + 12% success | 32 34 27 #20221B |
release 0.12 recipe (decisions 275, 300) |
success-ink |
83 109 73 #536D49 |
brand-mix: Citron + 69% Ink | 233 252 170 #E9FCAA |
release 0.12 recipe (decisions 275, 300) |
warn |
255 212 71 #FFD447 |
brand | 255 212 71 #FFD447 |
brand |
warn-hover |
232 195 68 #E8C344 |
brand-mix: warn + 10% Ink | 232 195 68 #E8C344 |
brand-mix: warn + 10% Ink |
warn-active |
208 178 65 #D0B241 |
brand-mix: warn + 20% Ink | 208 178 65 #D0B241 |
brand-mix: warn + 20% Ink |
on-warn |
20 44 42 #142C2A |
brand (tested pair) | 20 44 42 #142C2A |
brand (tested pair) |
warn-soft |
255 250 233 #FFFAE9 |
brand-mix: panel + 12% warn | 34 32 23 #222017 |
release 0.12 recipe (decisions 275, 300) |
warn-ink |
105 104 52 #696834 |
brand-mix: Yellow + 64% Ink | 255 222 119 #FFDE77 |
release 0.12 recipe (decisions 275, 300) |
info |
181 205 255 #B5CDFF |
brand | 181 205 255 #B5CDFF |
brand |
info-hover |
165 189 234 #A5BDEA |
brand-mix: info + 10% Ink | 165 189 234 #A5BDEA |
brand-mix: info + 10% Ink |
info-active |
149 173 212 #95ADD4 |
brand-mix: info + 20% Ink | 149 173 212 #95ADD4 |
brand-mix: info + 20% Ink |
on-info |
20 44 42 #142C2A |
brand (tested pair) | 20 44 42 #142C2A |
brand (tested pair) |
info-soft |
246 249 255 #F6F9FF |
brand-mix: panel + 12% info | 30 31 34 #1E1F22 |
release 0.12 recipe (decisions 275, 300) |
info-ink |
81 105 123 #51697B |
brand-mix: Sky + 62% Ink | 203 217 248 #CBD9F8 |
release 0.12 recipe (decisions 275, 300) |
danger |
185 28 28 #B91C1C |
Ref (sampled #B91C1C) | 252 165 165 #FCA5A5 |
Ref (sampled #FCA5A5) |
danger-hover |
153 27 27 #991B1B |
Ref (sampled #991B1B) | 253 185 182 #FDB9B6 |
Ref-mix: #FCA5A5 + 25% Cream |
danger-active |
133 30 29 #851E1D |
Ref-mix: #991B1B + 15% Ink | 253 201 195 #FDC9C3 |
Ref-mix: #FCA5A5 + 45% Cream |
on-danger |
255 244 232 #FFF4E8 |
brand | 20 44 42 #142C2A |
brand |
danger-line |
252 165 165 #FCA5A5 |
Ref (sampled, danger-zone card border) | 124 98 97 #7C6261 |
Ref-mix: Ink + 45% #FCA5A5 |
sidebar |
223 255 143 #DFFF8F |
brand (p.16 sidebar) | 11 11 11 #0B0B0B |
release 0.12 recipe (decisions 275, 300) |
sidebar-hover |
242 255 210 #F2FFD2 |
brand-mix: Citron + 60% white | 28 28 28 #1C1C1C |
release 0.12 recipe (decisions 275, 300) |
sidebar-active |
0 110 99 #006E63 |
brand (p.16 active item) | 0 110 99 #006E63 |
release 0.12 recipe (decisions 275, 300) |
--shadow-color |
20 44 42 |
brand (overlays only) | 20 44 42 |
brand |
Removed: --color-accent-bright (a pastel; cream on it would be 1.97), --color-secondary*,
--color-on-secondary, --brand-tint-10/15-alpha, --color-danger-ink (0 call sites, not mapped in
Tailwind). There is no orange text token: orange appears only as a fill with an ink label, or as decoration.
A.2 Computed contrast (text tokens must reach ≥4.5 on every surface they can sit on)
Section titled “A.2 Computed contrast (text tokens must reach ≥4.5 on every surface they can sit on)”Universal background set: bg, surface, panel, hover, plus the five softs (accent, emphasis, success, warn, info).
| Text token | Light: bg / surface / panel / hover · worst soft | Dark: bg / surface / panel / hover · worst soft |
|---|---|---|
ink |
13.60 / 12.64 / 14.75 / 11.95 · 12.37 | 19.36 / 18.14 / 16.98 / 15.71 · 14.82 |
muted |
5.37 / 4.99 / 5.83 / 4.72 · 4.88 | 9.25 / 8.67 / 8.12 / 7.51 · 7.08 |
accent-ink (= default brand-ink, focus) |
5.68 / 5.28 / 6.16 / 4.99 · 5.16 | 8.76 / 8.21 / 7.68 / 7.11 · 6.71 |
success-ink |
5.30 / 4.93 / 5.75 / 4.66 · 4.82 | 18.97 / 17.78 / 16.64 / 15.39 · 14.52 |
warn-ink |
5.33 / 4.96 / 5.78 / 4.69 · 4.85 | 15.97 / 14.97 / 14.01 / 12.96 · 12.23 |
info-ink |
5.29 / 4.92 / 5.74 / 4.65 · 4.82 | 14.82 / 13.89 / 13.00 / 12.03 · 11.35 |
danger (text and fill) |
5.96 / 5.54 / 6.47 / 5.24 · 5.43 | 11.06 / 10.37 / 9.71 / 8.98 · 8.47 |
The worst cell in the whole matrix is 4.65 in light (info-ink on hover) and 6.71 in dark
(accent-ink on success-soft; dark ratios recomputed for the solid-black set, decision 316). On the light Citron
sidebar: ink 13.23, muted 5.23, accent-ink 5.52. On sidebar-hover: ink 14.06, muted 5.55. On the dark
sidebar (#0B0B0B): ink 18.14, muted 8.67; on the dark sidebar-hover: ink 15.71, muted 7.51.
| Fill · label | Light rest / hover / active | Dark rest / hover / active |
|---|---|---|
accent · on-accent |
5.68 / 6.24 / 6.78 | 5.68 / 6.24 / 6.78 |
emphasis · ink |
5.51 / 5.99 / 6.55 | same |
success · ink |
13.23 / 10.99 / 8.99 | same |
warn · ink |
10.37 / 8.66 / 7.11 | same |
info · ink |
9.23 / 7.77 / 6.47 | same |
danger · on-danger |
5.96 / 7.66 / 8.80 | 7.77 / 8.99 / 10.06 |
| Non-text (≥3:1) | Light vs bg / surface / panel (/ sidebar) | Dark |
|---|---|---|
focus |
5.68 / 5.28 / 6.16 / 5.52 | 18.84 / 17.66 / 16.53 / 17.66 |
outline (form-control boundary, needs ≥3:1) |
3.27 / 3.04 / 3.55 | 4.76 / 4.46 / 4.17 |
accent as a selected fill (nav pill, tab underline) |
5.68 / 5.28 / 6.16 / 5.52 | 3.41 / 3.20 / 2.99 / 3.20 |
danger-line (decorative card border) |
1.90 vs panel | 3.31 vs panel |
line (decorative hairline, about 1.3 to 1.5:1 in dark; control edges use outline, not line) |
1.42 / 1.32 / 1.54 | 1.50 / 1.41 / 1.32 (ink on line 12.87) |
Banned translucent cases (measured): on-accent/75 on teal is 3.90 and /80 is 4.22. Cream at 80 % on
danger is 3.90. Orange text on cream is 2.47.
Part of Space Works brand → SpaceWorks UI: design-system spec, published from docs/ui-brand-spec.md. Edit it there.
Related v2.1 references
Section titled “Related v2.1 references”Required and diagnostic contrast pairs · Sources, aliases and provenance