@dataimago/tokens 0.1.0-alpha.3 → 0.1.0-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -4
- package/dist/index.cjs +209 -40
- package/dist/index.mjs +209 -40
- package/dist/tokens.css +208 -46
- package/dist/tokens.dtcg.json +756 -0
- package/dist/tokens.scss +208 -46
- package/dist/tokens.studio.json +751 -0
- package/dist/tokens.w3c.dtcg.json +906 -0
- package/package.json +5 -2
- package/src/README.md +40 -156
- package/src/colors.json +14 -12
- package/src/dataviz.json +115 -0
- package/src/effects.json +7 -7
- package/src/theme-colors-p3.json +438 -0
- package/src/theme-colors.json +82 -24
- package/src/typography.json +10 -10
|
@@ -0,0 +1,438 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"surface": {
|
|
4
|
+
"page": {
|
|
5
|
+
"light": {
|
|
6
|
+
"srgb": "#ededeb",
|
|
7
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
8
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
9
|
+
},
|
|
10
|
+
"dark": {
|
|
11
|
+
"srgb": "#141410",
|
|
12
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
13
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
14
|
+
},
|
|
15
|
+
"description": "Main page background — warm-grey (light) / ink-900 (dark)"
|
|
16
|
+
},
|
|
17
|
+
"page-scrolled": {
|
|
18
|
+
"light": {
|
|
19
|
+
"srgb": "#ededeb",
|
|
20
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
21
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
22
|
+
},
|
|
23
|
+
"dark": {
|
|
24
|
+
"srgb": "#141410",
|
|
25
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
26
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
27
|
+
},
|
|
28
|
+
"description": "Page background when navbar shrinks — matches page"
|
|
29
|
+
},
|
|
30
|
+
"elevated": {
|
|
31
|
+
"light": {
|
|
32
|
+
"srgb": "#f7f7f6",
|
|
33
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
34
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
35
|
+
},
|
|
36
|
+
"dark": {
|
|
37
|
+
"srgb": "#1c1917",
|
|
38
|
+
"oklch": "oklch(21.61% 0.0061 56.04)",
|
|
39
|
+
"p3": "color(display-p3 0.1078 0.0985 0.0911)"
|
|
40
|
+
},
|
|
41
|
+
"description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
|
|
42
|
+
},
|
|
43
|
+
"figure-plate": {
|
|
44
|
+
"light": {
|
|
45
|
+
"srgb": "#f7f7f6",
|
|
46
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
47
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
48
|
+
},
|
|
49
|
+
"dark": {
|
|
50
|
+
"srgb": "#dcdcda",
|
|
51
|
+
"oklch": "oklch(89.39% 0.0027 106.45)",
|
|
52
|
+
"p3": "color(display-p3 0.8627 0.8627 0.8556)"
|
|
53
|
+
},
|
|
54
|
+
"description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
|
|
55
|
+
},
|
|
56
|
+
"sunken": {
|
|
57
|
+
"light": {
|
|
58
|
+
"srgb": "#f7f7f6",
|
|
59
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
60
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
61
|
+
},
|
|
62
|
+
"dark": {
|
|
63
|
+
"srgb": "#0c0a09",
|
|
64
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
65
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
66
|
+
},
|
|
67
|
+
"description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
68
|
+
},
|
|
69
|
+
"navbar": {
|
|
70
|
+
"light": {
|
|
71
|
+
"srgb": "#ededeb",
|
|
72
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
73
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
74
|
+
},
|
|
75
|
+
"dark": {
|
|
76
|
+
"srgb": "#141410",
|
|
77
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
78
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
79
|
+
},
|
|
80
|
+
"description": "Navbar background — matches page in both themes"
|
|
81
|
+
},
|
|
82
|
+
"navbar-scrolled": {
|
|
83
|
+
"light": {
|
|
84
|
+
"srgb": "#ededeb",
|
|
85
|
+
"oklch": "oklch(94.55% 0.0027 106.45)",
|
|
86
|
+
"p3": "color(display-p3 0.9294 0.9294 0.9223)"
|
|
87
|
+
},
|
|
88
|
+
"dark": {
|
|
89
|
+
"srgb": "#141410",
|
|
90
|
+
"oklch": "oklch(18.97% 0.0078 107.13)",
|
|
91
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0643)"
|
|
92
|
+
},
|
|
93
|
+
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
94
|
+
},
|
|
95
|
+
"code": {
|
|
96
|
+
"light": {
|
|
97
|
+
"srgb": "#f7f7f6",
|
|
98
|
+
"oklch": "oklch(97.59% 0.0013 106.42)",
|
|
99
|
+
"p3": "color(display-p3 0.9686 0.9686 0.9651)"
|
|
100
|
+
},
|
|
101
|
+
"dark": {
|
|
102
|
+
"srgb": "#1c1917",
|
|
103
|
+
"oklch": "oklch(21.61% 0.0061 56.04)",
|
|
104
|
+
"p3": "color(display-p3 0.1078 0.0985 0.0911)"
|
|
105
|
+
},
|
|
106
|
+
"description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
"border": {
|
|
110
|
+
"subtle": {
|
|
111
|
+
"light": {
|
|
112
|
+
"srgb": "rgba(12, 10, 9, 0.45)",
|
|
113
|
+
"oklch": "oklch(14.69% 0.0041 49.25 / 0.45)",
|
|
114
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.45)"
|
|
115
|
+
},
|
|
116
|
+
"dark": {
|
|
117
|
+
"srgb": "rgba(253, 249, 242, 0.45)",
|
|
118
|
+
"oklch": "oklch(98.33% 0.0102 81.8 / 0.45)",
|
|
119
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518 / 0.45)"
|
|
120
|
+
},
|
|
121
|
+
"description": "Subtle borders — element separation. THE ALPHA IS THE ROLE: border.subtle / moderate / strong / card share one base color and are distinguished by opacity alone, so a gamut conversion that drops the alpha channel collapses four semantic roles into one opaque value (this happened in 17995c3, #72, 2026-06-28). No number is quoted here on purpose: the scale is set by the founder decision recorded in wi-20260817-border-alpha-scale-retune and gated by tools/contrast-check.mjs at the WCAG 1.4.11 non-text threshold (3:1). Read the value, not this sentence."
|
|
122
|
+
},
|
|
123
|
+
"moderate": {
|
|
124
|
+
"light": {
|
|
125
|
+
"srgb": "rgba(12, 10, 9, 0.60)",
|
|
126
|
+
"oklch": "oklch(14.69% 0.0041 49.25 / 0.60)",
|
|
127
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.60)"
|
|
128
|
+
},
|
|
129
|
+
"dark": {
|
|
130
|
+
"srgb": "rgba(253, 249, 242, 0.60)",
|
|
131
|
+
"oklch": "oklch(98.33% 0.0102 81.8 / 0.60)",
|
|
132
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518 / 0.60)"
|
|
133
|
+
},
|
|
134
|
+
"description": "Moderate borders — defined boundaries. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
|
|
135
|
+
},
|
|
136
|
+
"strong": {
|
|
137
|
+
"light": {
|
|
138
|
+
"srgb": "rgba(12, 10, 9, 0.75)",
|
|
139
|
+
"oklch": "oklch(14.69% 0.0041 49.25 / 0.75)",
|
|
140
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.75)"
|
|
141
|
+
},
|
|
142
|
+
"dark": {
|
|
143
|
+
"srgb": "rgba(253, 249, 242, 0.75)",
|
|
144
|
+
"oklch": "oklch(98.33% 0.0102 81.8 / 0.75)",
|
|
145
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518 / 0.75)"
|
|
146
|
+
},
|
|
147
|
+
"description": "Strong borders — prominent separation. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
|
|
148
|
+
},
|
|
149
|
+
"card": {
|
|
150
|
+
"light": {
|
|
151
|
+
"srgb": "rgba(12, 10, 9, 0.60)",
|
|
152
|
+
"oklch": "oklch(14.69% 0.0041 49.25 / 0.60)",
|
|
153
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.60)"
|
|
154
|
+
},
|
|
155
|
+
"dark": {
|
|
156
|
+
"srgb": "rgba(253, 249, 242, 0.60)",
|
|
157
|
+
"oklch": "oklch(98.33% 0.0102 81.8 / 0.60)",
|
|
158
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518 / 0.60)"
|
|
159
|
+
},
|
|
160
|
+
"description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
|
|
161
|
+
},
|
|
162
|
+
"figure-frame": {
|
|
163
|
+
"light": {
|
|
164
|
+
"srgb": "#6a6a6a",
|
|
165
|
+
"oklch": "oklch(52.43% 0 0)",
|
|
166
|
+
"p3": "color(display-p3 0.4157 0.4157 0.4157)"
|
|
167
|
+
},
|
|
168
|
+
"dark": {
|
|
169
|
+
"srgb": "#6a6a6a",
|
|
170
|
+
"oklch": "oklch(52.43% 0 0)",
|
|
171
|
+
"p3": "color(display-p3 0.4157 0.4157 0.4157)"
|
|
172
|
+
},
|
|
173
|
+
"description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
|
|
174
|
+
},
|
|
175
|
+
"code": {
|
|
176
|
+
"light": {
|
|
177
|
+
"srgb": "#d6d3d1",
|
|
178
|
+
"oklch": "oklch(86.87% 0.0043 56.37)",
|
|
179
|
+
"p3": "color(display-p3 0.8371 0.8278 0.8205)"
|
|
180
|
+
},
|
|
181
|
+
"dark": {
|
|
182
|
+
"srgb": "#292524",
|
|
183
|
+
"oklch": "oklch(26.85% 0.0063 34.3)",
|
|
184
|
+
"p3": "color(display-p3 0.1581 0.1456 0.1418)"
|
|
185
|
+
},
|
|
186
|
+
"description": "Code block border"
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
"content": {
|
|
190
|
+
"primary": {
|
|
191
|
+
"light": {
|
|
192
|
+
"srgb": "#14140f",
|
|
193
|
+
"oklch": "oklch(18.93% 0.0098 107.3)",
|
|
194
|
+
"p3": "color(display-p3 0.0784 0.0784 0.0608)"
|
|
195
|
+
},
|
|
196
|
+
"dark": {
|
|
197
|
+
"srgb": "#fdf9f2",
|
|
198
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
199
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
200
|
+
},
|
|
201
|
+
"description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
|
|
202
|
+
},
|
|
203
|
+
"secondary": {
|
|
204
|
+
"light": {
|
|
205
|
+
"srgb": "#6a6a6a",
|
|
206
|
+
"oklch": "oklch(52.43% 0 0)",
|
|
207
|
+
"p3": "color(display-p3 0.4157 0.4157 0.4157)"
|
|
208
|
+
},
|
|
209
|
+
"dark": {
|
|
210
|
+
"srgb": "#a8a29e",
|
|
211
|
+
"oklch": "oklch(71.61% 0.0091 56.26)",
|
|
212
|
+
"p3": "color(display-p3 0.6547 0.6361 0.6215)"
|
|
213
|
+
},
|
|
214
|
+
"description": "Secondary text — WCAG-AA on all light surfaces (≥4.6:1, darkened from stone-500 #7c7c7c which was 3.6:1) / ink-300 on dark"
|
|
215
|
+
},
|
|
216
|
+
"muted": {
|
|
217
|
+
"light": {
|
|
218
|
+
"srgb": "#706964",
|
|
219
|
+
"oklch": "oklch(52.57% 0.0118 58.05)",
|
|
220
|
+
"p3": "color(display-p3 0.4345 0.4127 0.3945)"
|
|
221
|
+
},
|
|
222
|
+
"dark": {
|
|
223
|
+
"srgb": "#89827d",
|
|
224
|
+
"oklch": "oklch(61.12% 0.0113 58.1)",
|
|
225
|
+
"p3": "color(display-p3 0.5325 0.5107 0.4925)"
|
|
226
|
+
},
|
|
227
|
+
"description": "Muted text — captions, meta info. WCAG-AA on all surfaces in both modes (darkened/lightened from #78716c which failed AA on page)"
|
|
228
|
+
},
|
|
229
|
+
"inverse": {
|
|
230
|
+
"light": {
|
|
231
|
+
"srgb": "#fdf9f2",
|
|
232
|
+
"oklch": "oklch(98.33% 0.0102 81.8)",
|
|
233
|
+
"p3": "color(display-p3 0.9894 0.977 0.9518)"
|
|
234
|
+
},
|
|
235
|
+
"dark": {
|
|
236
|
+
"srgb": "#0c0a09",
|
|
237
|
+
"oklch": "oklch(14.69% 0.0041 49.25)",
|
|
238
|
+
"p3": "color(display-p3 0.0457 0.0395 0.0358)"
|
|
239
|
+
},
|
|
240
|
+
"description": "Inverse text — for contrasting backgrounds"
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
"interactive": {
|
|
244
|
+
"primary": {
|
|
245
|
+
"light": {
|
|
246
|
+
"srgb": "#434739",
|
|
247
|
+
"oklch": "oklch(38.97% 0.0235 120.45)",
|
|
248
|
+
"p3": "color(display-p3 0.2656 0.2779 0.2287)"
|
|
249
|
+
},
|
|
250
|
+
"dark": {
|
|
251
|
+
"srgb": "#98a384",
|
|
252
|
+
"oklch": "oklch(69.82% 0.0456 123.46)",
|
|
253
|
+
"p3": "color(display-p3 0.604 0.6378 0.5291)"
|
|
254
|
+
},
|
|
255
|
+
"description": "Primary interactive — forest-700 on light (7.75:1 on stone-100, white text 9.0:1 — passes WCAG AAA) / forest-300 on dark"
|
|
256
|
+
},
|
|
257
|
+
"hover": {
|
|
258
|
+
"light": {
|
|
259
|
+
"srgb": "#363a2e",
|
|
260
|
+
"oklch": "oklch(34.07% 0.021 122.5)",
|
|
261
|
+
"p3": "color(display-p3 0.2146 0.2269 0.1848)"
|
|
262
|
+
},
|
|
263
|
+
"dark": {
|
|
264
|
+
"srgb": "#7e8a6b",
|
|
265
|
+
"oklch": "oklch(61.5% 0.0473 124.97)",
|
|
266
|
+
"p3": "color(display-p3 0.5029 0.5397 0.4313)"
|
|
267
|
+
},
|
|
268
|
+
"description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
|
|
269
|
+
},
|
|
270
|
+
"accent": {
|
|
271
|
+
"light": {
|
|
272
|
+
"srgb": "#1f618d",
|
|
273
|
+
"oklch": "oklch(47.31% 0.0963 242.42)",
|
|
274
|
+
"p3": "color(display-p3 0.198 0.375 0.5385)"
|
|
275
|
+
},
|
|
276
|
+
"dark": {
|
|
277
|
+
"srgb": "#3498db",
|
|
278
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
279
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
280
|
+
},
|
|
281
|
+
"description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
|
|
282
|
+
},
|
|
283
|
+
"focus": {
|
|
284
|
+
"light": {
|
|
285
|
+
"srgb": "#434739",
|
|
286
|
+
"oklch": "oklch(38.97% 0.0235 120.45)",
|
|
287
|
+
"p3": "color(display-p3 0.2656 0.2779 0.2287)"
|
|
288
|
+
},
|
|
289
|
+
"dark": {
|
|
290
|
+
"srgb": "#98a384",
|
|
291
|
+
"oklch": "oklch(69.82% 0.0456 123.46)",
|
|
292
|
+
"p3": "color(display-p3 0.604 0.6378 0.5291)"
|
|
293
|
+
},
|
|
294
|
+
"description": "Focus indicators — mirrors interactive.primary"
|
|
295
|
+
}
|
|
296
|
+
},
|
|
297
|
+
"state": {
|
|
298
|
+
"success": {
|
|
299
|
+
"light": {
|
|
300
|
+
"srgb": "#007a58",
|
|
301
|
+
"oklch": "oklch(51.36% 0.1073 165.46)",
|
|
302
|
+
"p3": "color(display-p3 0.2046 0.471 0.3541)"
|
|
303
|
+
},
|
|
304
|
+
"dark": {
|
|
305
|
+
"srgb": "#009e73",
|
|
306
|
+
"oklch": "oklch(61.98% 0.1295 165.46)",
|
|
307
|
+
"p3": "color(display-p3 0.2733 0.6102 0.4624)"
|
|
308
|
+
},
|
|
309
|
+
"description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
310
|
+
},
|
|
311
|
+
"warning": {
|
|
312
|
+
"light": {
|
|
313
|
+
"srgb": "#906306",
|
|
314
|
+
"oklch": "oklch(53.38% 0.1098 77.05)",
|
|
315
|
+
"p3": "color(display-p3 0.5386 0.3957 0.1307)"
|
|
316
|
+
},
|
|
317
|
+
"dark": {
|
|
318
|
+
"srgb": "#e69f00",
|
|
319
|
+
"oklch": "oklch(75.27% 0.1576 76.77)",
|
|
320
|
+
"p3": "color(display-p3 0.861 0.6354 0.2169)"
|
|
321
|
+
},
|
|
322
|
+
"description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
323
|
+
},
|
|
324
|
+
"error": {
|
|
325
|
+
"light": {
|
|
326
|
+
"srgb": "#a4262c",
|
|
327
|
+
"oklch": "oklch(47.54% 0.1619 23.66)",
|
|
328
|
+
"p3": "color(display-p3 0.5915 0.1933 0.192)"
|
|
329
|
+
},
|
|
330
|
+
"dark": {
|
|
331
|
+
"srgb": "#ef5350",
|
|
332
|
+
"oklch": "oklch(65.39% 0.1926 25.14)",
|
|
333
|
+
"p3": "color(display-p3 0.8678 0.3692 0.339)"
|
|
334
|
+
},
|
|
335
|
+
"description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
336
|
+
},
|
|
337
|
+
"info": {
|
|
338
|
+
"light": {
|
|
339
|
+
"srgb": "#1f618d",
|
|
340
|
+
"oklch": "oklch(47.31% 0.0963 242.42)",
|
|
341
|
+
"p3": "color(display-p3 0.198 0.375 0.5385)"
|
|
342
|
+
},
|
|
343
|
+
"dark": {
|
|
344
|
+
"srgb": "#3498db",
|
|
345
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
346
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
347
|
+
},
|
|
348
|
+
"description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
349
|
+
}
|
|
350
|
+
},
|
|
351
|
+
"presentation": {
|
|
352
|
+
"accent": {
|
|
353
|
+
"light": {
|
|
354
|
+
"srgb": "#3498db",
|
|
355
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
356
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
357
|
+
},
|
|
358
|
+
"dark": {
|
|
359
|
+
"srgb": "#3498db",
|
|
360
|
+
"oklch": "oklch(65.31% 0.1347 242.69)",
|
|
361
|
+
"p3": "color(display-p3 0.3208 0.588 0.8369)"
|
|
362
|
+
},
|
|
363
|
+
"description": "Presentation accent — Flat-UI peter-river; reserved for reveal.js 2030s-feel highlights. Not for body prose or interactive primary use. Pairs well with copper on dark slides."
|
|
364
|
+
},
|
|
365
|
+
"accent-hover": {
|
|
366
|
+
"light": {
|
|
367
|
+
"srgb": "#2980b9",
|
|
368
|
+
"oklch": "oklch(57.59% 0.119 242.28)",
|
|
369
|
+
"p3": "color(display-p3 0.2638 0.495 0.7068)"
|
|
370
|
+
},
|
|
371
|
+
"dark": {
|
|
372
|
+
"srgb": "#2980b9",
|
|
373
|
+
"oklch": "oklch(57.59% 0.119 242.28)",
|
|
374
|
+
"p3": "color(display-p3 0.2638 0.495 0.7068)"
|
|
375
|
+
},
|
|
376
|
+
"description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
|
|
377
|
+
}
|
|
378
|
+
},
|
|
379
|
+
"vertical-accent": {
|
|
380
|
+
"$comment": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink.",
|
|
381
|
+
"dissertation": {
|
|
382
|
+
"light": {
|
|
383
|
+
"srgb": "#b87333",
|
|
384
|
+
"oklch": "oklch(61.8% 0.1171 60.4)",
|
|
385
|
+
"p3": "color(display-p3 0.7242 0.4389 0.1259)"
|
|
386
|
+
},
|
|
387
|
+
"dark": {
|
|
388
|
+
"srgb": "#ce8e5c",
|
|
389
|
+
"oklch": "oklch(69.98% 0.1021 58.08)",
|
|
390
|
+
"p3": "color(display-p3 0.8089 0.5486 0.3177)"
|
|
391
|
+
},
|
|
392
|
+
"description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
|
|
393
|
+
},
|
|
394
|
+
"rpkg": {
|
|
395
|
+
"light": {
|
|
396
|
+
"srgb": "#3b82f6",
|
|
397
|
+
"oklch": "oklch(62.31% 0.188 259.81)",
|
|
398
|
+
"p3": "color(display-p3 0.3047 0.5035 0.9338)"
|
|
399
|
+
},
|
|
400
|
+
"dark": {
|
|
401
|
+
"srgb": "#60a5fa",
|
|
402
|
+
"oklch": "oklch(71.37% 0.1434 254.62)",
|
|
403
|
+
"p3": "color(display-p3 0.4405 0.6403 0.9545)"
|
|
404
|
+
},
|
|
405
|
+
"description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
|
|
406
|
+
},
|
|
407
|
+
"SGPc": {
|
|
408
|
+
"light": {
|
|
409
|
+
"srgb": "#5a6310",
|
|
410
|
+
"oklch": "oklch(47.61% 0.1017 115.99)",
|
|
411
|
+
"p3": "color(display-p3 0.3595 0.3871 0.1309)"
|
|
412
|
+
},
|
|
413
|
+
"dark": {
|
|
414
|
+
"srgb": "#b2bf22",
|
|
415
|
+
"oklch": "oklch(76.9% 0.1655 114.7)",
|
|
416
|
+
"p3": "color(display-p3 0.7074 0.7474 0.2714)"
|
|
417
|
+
},
|
|
418
|
+
"description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
|
|
419
|
+
}
|
|
420
|
+
},
|
|
421
|
+
"brand-mark": {
|
|
422
|
+
"$comment": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build.",
|
|
423
|
+
"red": {
|
|
424
|
+
"light": {
|
|
425
|
+
"srgb": "#cc0000",
|
|
426
|
+
"oklch": "oklch(53.08% 0.2178 29.23)",
|
|
427
|
+
"p3": "color(display-p3 0.7331 0.1519 0.1019)"
|
|
428
|
+
},
|
|
429
|
+
"dark": {
|
|
430
|
+
"srgb": "#ff0000",
|
|
431
|
+
"oklch": "oklch(62.8% 0.2577 29.23)",
|
|
432
|
+
"p3": "color(display-p3 1 0 0)"
|
|
433
|
+
},
|
|
434
|
+
"description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
}
|
package/src/theme-colors.json
CHANGED
|
@@ -16,10 +16,15 @@
|
|
|
16
16
|
"dark": "#1c1917",
|
|
17
17
|
"description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
|
|
18
18
|
},
|
|
19
|
+
"figure-plate": {
|
|
20
|
+
"light": "#f7f7f6",
|
|
21
|
+
"dark": "#dcdcda",
|
|
22
|
+
"description": "Figure plate: the ground a .box figure sits on, in HTML (figure img.box, the figure modal) and the PDF (di-figure-plate). Figures are dark ink and Okabe-Ito colours drawn for a light ground, so the plate stays light in dark mode, dimmed one step to cut glare: stone-50 (light) / stone-200 (dark). Dark-mode plate #dcdcda: dark ink 13.5:1, okabe-ito blue 3.8, vermillion 2.8, bluish-green 2.5, reddish-purple 2.2, sky-blue 1.7, orange 1.6 (the light plate's 4.8/3.6/3.2/2.9/2.2/2.1); the light content.secondary frame 3.9:1 on it. Hue separation is checked plate-independently by the data-viz colour-blind gate. Maintainer decision 2026-11-01 (dimmed light plate); a 42%-white mix over the dark page (#777774) was rejected (colours ~1.2:1)."
|
|
23
|
+
},
|
|
19
24
|
"sunken": {
|
|
20
|
-
"light": "#
|
|
25
|
+
"light": "#f7f7f6",
|
|
21
26
|
"dark": "#0c0a09",
|
|
22
|
-
"description": "Input fields,
|
|
27
|
+
"description": "Input fields and insets. Light: the card colour, stone-50 (since 2026-11-02; it was the warm paper-200 #faf2e3). Dark: ink-900, below the page. Code blocks use surface.code."
|
|
23
28
|
},
|
|
24
29
|
"navbar": {
|
|
25
30
|
"light": "#ededeb",
|
|
@@ -32,31 +37,36 @@
|
|
|
32
37
|
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
33
38
|
},
|
|
34
39
|
"code": {
|
|
35
|
-
"light": "#
|
|
40
|
+
"light": "#f7f7f6",
|
|
36
41
|
"dark": "#1c1917",
|
|
37
|
-
"description": "Code block and inline code background"
|
|
42
|
+
"description": "Code block and inline code background: the card colour (surface.elevated) in both modes, so code reads as a card on the page (2026-11-02; light mode was the warm paper-200 #faf2e3)"
|
|
38
43
|
}
|
|
39
44
|
},
|
|
40
45
|
"border": {
|
|
41
46
|
"subtle": {
|
|
42
|
-
"light": "rgba(12, 10, 9, 0.
|
|
43
|
-
"dark": "rgba(253, 249, 242, 0.
|
|
44
|
-
"description": "Subtle borders — element separation"
|
|
47
|
+
"light": "rgba(12, 10, 9, 0.45)",
|
|
48
|
+
"dark": "rgba(253, 249, 242, 0.45)",
|
|
49
|
+
"description": "Subtle borders — element separation. THE ALPHA IS THE ROLE: border.subtle / moderate / strong / card share one base color and are distinguished by opacity alone, so a gamut conversion that drops the alpha channel collapses four semantic roles into one opaque value (this happened in 17995c3, #72, 2026-06-28). No number is quoted here on purpose: the scale is set by the founder decision recorded in wi-20260817-border-alpha-scale-retune and gated by tools/contrast-check.mjs at the WCAG 1.4.11 non-text threshold (3:1). Read the value, not this sentence."
|
|
45
50
|
},
|
|
46
51
|
"moderate": {
|
|
47
|
-
"light": "rgba(12, 10, 9, 0.
|
|
48
|
-
"dark": "rgba(253, 249, 242, 0.
|
|
49
|
-
"description": "Moderate borders — defined boundaries"
|
|
52
|
+
"light": "rgba(12, 10, 9, 0.60)",
|
|
53
|
+
"dark": "rgba(253, 249, 242, 0.60)",
|
|
54
|
+
"description": "Moderate borders — defined boundaries. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
|
|
50
55
|
},
|
|
51
56
|
"strong": {
|
|
52
|
-
"light": "rgba(12, 10, 9, 0.
|
|
53
|
-
"dark": "rgba(253, 249, 242, 0.
|
|
54
|
-
"description": "Strong borders — prominent separation"
|
|
57
|
+
"light": "rgba(12, 10, 9, 0.75)",
|
|
58
|
+
"dark": "rgba(253, 249, 242, 0.75)",
|
|
59
|
+
"description": "Strong borders — prominent separation. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
|
|
55
60
|
},
|
|
56
61
|
"card": {
|
|
57
|
-
"light": "rgba(12, 10, 9, 0.
|
|
58
|
-
"dark": "rgba(253, 249, 242, 0.
|
|
59
|
-
"description": "Card border color with transparency for subtle definition"
|
|
62
|
+
"light": "rgba(12, 10, 9, 0.60)",
|
|
63
|
+
"dark": "rgba(253, 249, 242, 0.60)",
|
|
64
|
+
"description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
|
|
65
|
+
},
|
|
66
|
+
"figure-frame": {
|
|
67
|
+
"light": "#6a6a6a",
|
|
68
|
+
"dark": "#6a6a6a",
|
|
69
|
+
"description": "Figure frame: the 1px rule round a .box figure and the border of an enlarged figure in the figure modal. It sits on surface.figure-plate, which is light in both modes, so the frame keeps the light content.secondary value in both: 5.0:1 on the light plate #f7f7f6 and 3.9:1 on the dimmed dark-mode plate #dcdcda (WCAG 1.4.11 non-text, 3:1). The PDF's di-figure-frame is the same colour (2026-11-01)."
|
|
60
70
|
},
|
|
61
71
|
"code": {
|
|
62
72
|
"light": "#d6d3d1",
|
|
@@ -71,14 +81,14 @@
|
|
|
71
81
|
"description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
|
|
72
82
|
},
|
|
73
83
|
"secondary": {
|
|
74
|
-
"light": "#
|
|
84
|
+
"light": "#6a6a6a",
|
|
75
85
|
"dark": "#a8a29e",
|
|
76
|
-
"description": "Secondary text —
|
|
86
|
+
"description": "Secondary text — WCAG-AA on all light surfaces (≥4.6:1, darkened from stone-500 #7c7c7c which was 3.6:1) / ink-300 on dark"
|
|
77
87
|
},
|
|
78
88
|
"muted": {
|
|
79
|
-
"light": "#
|
|
80
|
-
"dark": "#
|
|
81
|
-
"description": "Muted text — captions, meta info"
|
|
89
|
+
"light": "#706964",
|
|
90
|
+
"dark": "#89827d",
|
|
91
|
+
"description": "Muted text — captions, meta info. WCAG-AA on all surfaces in both modes (darkened/lightened from #78716c which failed AA on page)"
|
|
82
92
|
},
|
|
83
93
|
"inverse": {
|
|
84
94
|
"light": "#fdf9f2",
|
|
@@ -98,9 +108,9 @@
|
|
|
98
108
|
"description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
|
|
99
109
|
},
|
|
100
110
|
"accent": {
|
|
101
|
-
"light": "#
|
|
102
|
-
"dark": "#
|
|
103
|
-
"description": "Accent —
|
|
111
|
+
"light": "#1f618d",
|
|
112
|
+
"dark": "#3498DB",
|
|
113
|
+
"description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
|
|
104
114
|
},
|
|
105
115
|
"focus": {
|
|
106
116
|
"light": "#434739",
|
|
@@ -108,6 +118,28 @@
|
|
|
108
118
|
"description": "Focus indicators — mirrors interactive.primary"
|
|
109
119
|
}
|
|
110
120
|
},
|
|
121
|
+
"state": {
|
|
122
|
+
"success": {
|
|
123
|
+
"light": "#007a58",
|
|
124
|
+
"dark": "#009E73",
|
|
125
|
+
"description": "State: success. Okabe-Ito bluish-green, darkened in light mode for text: 4.56:1 on page and 4.99:1 on card (dark 5.40 / 5.11). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
126
|
+
},
|
|
127
|
+
"warning": {
|
|
128
|
+
"light": "#906306",
|
|
129
|
+
"dark": "#E69F00",
|
|
130
|
+
"description": "State: warning. Okabe-Ito orange, darkened in light mode to an amber that holds text contrast: 4.51:1 on page and 4.93:1 on card (dark 8.20 / 7.76). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
131
|
+
},
|
|
132
|
+
"error": {
|
|
133
|
+
"light": "#a4262c",
|
|
134
|
+
"dark": "#ef5350",
|
|
135
|
+
"description": "State: error. Red rather than Okabe-Ito vermillion: darkened vermillion collapses into the amber warning under deuteranopia (ΔE 2.0). 6.2:1 on page in light mode (dark 5.30 / 5.02). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
136
|
+
},
|
|
137
|
+
"info": {
|
|
138
|
+
"light": "#1f618d",
|
|
139
|
+
"dark": "#3498DB",
|
|
140
|
+
"description": "State: info. The house slate accent (interactive.accent), so notes and info read slate-blue against the stone surfaces: 5.68:1 on page in light mode (dark 5.86). 2026-11-02; replaces the Flat-UI functional colours as the semantic layer"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
111
143
|
"presentation": {
|
|
112
144
|
"accent": {
|
|
113
145
|
"light": "#3498DB",
|
|
@@ -119,6 +151,32 @@
|
|
|
119
151
|
"dark": "#2980B9",
|
|
120
152
|
"description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
|
|
121
153
|
}
|
|
154
|
+
},
|
|
155
|
+
"vertical-accent": {
|
|
156
|
+
"$comment": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink.",
|
|
157
|
+
"dissertation": {
|
|
158
|
+
"light": "#B87333",
|
|
159
|
+
"dark": "#CE8E5C",
|
|
160
|
+
"description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
|
|
161
|
+
},
|
|
162
|
+
"rpkg": {
|
|
163
|
+
"light": "#3B82F6",
|
|
164
|
+
"dark": "#60A5FA",
|
|
165
|
+
"description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
|
|
166
|
+
},
|
|
167
|
+
"SGPc": {
|
|
168
|
+
"light": "#5A6310",
|
|
169
|
+
"dark": "#B2BF22",
|
|
170
|
+
"description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
"brand-mark": {
|
|
174
|
+
"$comment": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build.",
|
|
175
|
+
"red": {
|
|
176
|
+
"light": "#cc0000",
|
|
177
|
+
"dark": "#ff0000",
|
|
178
|
+
"description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
|
|
179
|
+
}
|
|
122
180
|
}
|
|
123
181
|
}
|
|
124
182
|
}
|
package/src/typography.json
CHANGED
|
@@ -2,23 +2,23 @@
|
|
|
2
2
|
"font": {
|
|
3
3
|
"family": {
|
|
4
4
|
"sans": {
|
|
5
|
-
"value": "Noto Sans,
|
|
6
|
-
"description": "Primary sans-serif font - body text"
|
|
5
|
+
"value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
|
|
6
|
+
"description": "Primary sans-serif font - body text. Noto Sans Math is second so a glyph Noto Sans lacks (arrows such as U+2192, maths operators) is drawn by the shipped Noto, not a system font; a page downloads the maths face only when it needs such a glyph. Fira Sans, a leftover of the ai-native extension, was dropped (2026-11-01)."
|
|
7
7
|
},
|
|
8
8
|
"mono": {
|
|
9
|
-
"value": "
|
|
10
|
-
"description": "
|
|
9
|
+
"value": "Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace",
|
|
10
|
+
"description": "Noto Sans Mono — code blocks and technical content; matches the shipped font"
|
|
11
11
|
},
|
|
12
12
|
"display": {
|
|
13
13
|
"value": "var(--font-family-display-editorial)",
|
|
14
|
-
"description": "
|
|
14
|
+
"description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
|
|
15
15
|
},
|
|
16
16
|
"display-editorial": {
|
|
17
|
-
"value": "Josefin Sans, system-ui, sans-serif",
|
|
18
|
-
"description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
|
|
17
|
+
"value": "Josefin Sans, Noto Sans, Noto Sans Math, system-ui, sans-serif",
|
|
18
|
+
"description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. The Noto Sans fallback serves untagged text; tagged languages are handled by fonts/lang.css. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
|
|
19
19
|
},
|
|
20
20
|
"display-documentation": {
|
|
21
|
-
"value": "Noto Sans, system-ui, sans-serif",
|
|
21
|
+
"value": "Noto Sans, Noto Sans Math, system-ui, sans-serif",
|
|
22
22
|
"description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
|
|
23
23
|
},
|
|
24
24
|
"brand": {
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"description": "Brand font - dataimago navbar and branding elements"
|
|
27
27
|
},
|
|
28
28
|
"math": {
|
|
29
|
-
"value": "Noto Sans Math,
|
|
30
|
-
"description": "
|
|
29
|
+
"value": "Noto Sans Math, math",
|
|
30
|
+
"description": "Noto Sans Math, falling back to the browser's maths face; native MathML is the maths contract"
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"size": {
|