@hubpav/hwio-brand 0.7.11 → 0.9.0

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.
Files changed (9) hide show
  1. package/dist/design/er3o.md +45 -25
  2. package/dist/design/hwio-forestry.md +103 -77
  3. package/dist/design/hwio.md +104 -78
  4. package/dist/docusaurus.css +19 -19
  5. package/dist/tokens.json +530 -137
  6. package/dist/vars.css +163 -57
  7. package/package.json +1 -1
  8. package/src/brand.json +397 -108
  9. package/src/design/body.md +13 -12
package/dist/tokens.json CHANGED
@@ -1,25 +1,32 @@
1
1
  {
2
+ "guidelines": {
3
+ "reference": "HBG.261028.01",
4
+ "revision": 4,
5
+ "issued": "2026-10-30",
6
+ "note": "Revision 4 (issued 2026-10-30) takes the owner's decisions on the web's change requests: Panel #f7f7f7 (CR-1), the web type sizes apply from 1 024 px (CR-2), chart colours on dark grounds and the gradient figure on the dark ground (D44). Revisions 2 and 3 carry the same rules otherwise.",
7
+ "source": "company/docs brand/hbg.261028.01-r4-en-hardwario-brand-guidelines.typ; values of record in templates/brandbook.typ (brand-* definitions)"
8
+ },
2
9
  "palette": {
3
10
  "white": "#ffffff",
4
- "sky": "#F1FAFF",
5
- "gray-100": "#f3f4f6",
6
- "gray-200": "#e5e7eb",
7
- "gray-300": "#d1d5db",
8
- "gray-500": "#6b6a6a",
9
- "muted": "#5c5f70",
10
- "ink": "#252532",
11
11
  "red": "#e30427",
12
- "rose": "#f43f5e",
13
12
  "blue": "#016ad4",
14
- "blue-light": "#009cfa",
15
- "blue-dark": "#06367a",
16
- "night-100": "#0f0f14",
17
- "night-200": "#1a1a22",
18
- "night-300": "#23232f",
19
- "night-content": "#e7e7ee",
20
- "green": "#15803d",
21
- "amber": "#b45309",
22
- "error": "#dc2626",
13
+ "navy": "#06367a",
14
+ "sky": "#009cfa",
15
+ "gray": "#6b6a6a",
16
+ "ink": "#252532",
17
+ "panel": "#f7f7f7",
18
+ "mist": "#e8e8e8",
19
+ "hairline": "#dcdcdc",
20
+ "green": "#2e7d4f",
21
+ "amber": "#c76a00",
22
+ "dark-ground": "#16161d",
23
+ "dark-red": "#f43f5e",
24
+ "dark-gray": "#d1d5db",
25
+ "dark-mist": "#2e2e3a",
26
+ "dark-hairline": "#3b3b46",
27
+ "dark-green": "#34c47a",
28
+ "dark-amber": "#f59e0b",
29
+ "gradient-figure-end": "#3976c5",
23
30
  "forestry": "#2B7036",
24
31
  "forestry-light": "#5aa864",
25
32
  "er3o-green": "#01CC9B",
@@ -29,7 +36,27 @@
29
36
  "er3o-ink": "#061920",
30
37
  "er3o-graphite": "#404040",
31
38
  "er3o-text": "#333333",
32
- "er3o-gray-50": "#f9fafb"
39
+ "er3o-gray-50": "#f9fafb",
40
+ "er3o-gray-100": "#f3f4f6",
41
+ "er3o-success": "#15803d",
42
+ "er3o-warning": "#b45309",
43
+ "er3o-error": "#dc2626"
44
+ },
45
+ "gradient": {
46
+ "from": "red",
47
+ "to": "sky",
48
+ "angle": "90deg",
49
+ "css": "linear-gradient(90deg, #e30427, #009cfa)",
50
+ "figure": {
51
+ "to": "gradient-figure-end",
52
+ "at": 0.75,
53
+ "css": "linear-gradient(90deg, #e30427, #3976c5)"
54
+ },
55
+ "figureDark": {
56
+ "from": "dark-red",
57
+ "to": "sky",
58
+ "css": "linear-gradient(90deg, #f43f5e, #009cfa)"
59
+ }
33
60
  },
34
61
  "themes": {
35
62
  "hwio": {
@@ -49,30 +76,66 @@
49
76
  "noise": "0"
50
77
  },
51
78
  "shapeKey": "hwio",
79
+ "guidelines": true,
80
+ "typographyKey": "hwio",
81
+ "layoutKey": "grid",
82
+ "layout": {
83
+ "container": "1328px",
84
+ "pad": "24px",
85
+ "width": "1280px",
86
+ "columns": 12,
87
+ "gutter": "24px"
88
+ },
52
89
  "roles": {
53
90
  "base-100": "#ffffff",
54
- "base-200": "#F1FAFF",
55
- "base-300": "#e5e7eb",
91
+ "base-200": "#f7f7f7",
92
+ "base-300": "#dcdcdc",
56
93
  "base-content": "#252532",
57
- "primary": "#06367a",
94
+ "primary": "#016ad4",
58
95
  "primary-content": "#ffffff",
59
- "secondary": "#016ad4",
96
+ "secondary": "#06367a",
60
97
  "secondary-content": "#ffffff",
61
98
  "accent": "#e30427",
62
99
  "accent-content": "#ffffff",
63
100
  "neutral": "#252532",
64
- "neutral-content": "#f3f4f6",
65
- "info": "#009cfa",
66
- "info-content": "#06367a",
67
- "success": "#15803d",
101
+ "neutral-content": "#ffffff",
102
+ "info": "#016ad4",
103
+ "info-content": "#ffffff",
104
+ "success": "#2e7d4f",
68
105
  "success-content": "#ffffff",
69
- "warning": "#b45309",
70
- "warning-content": "#ffffff",
71
- "error": "#dc2626",
106
+ "warning": "#c76a00",
107
+ "warning-content": "#252532",
108
+ "error": "#e30427",
72
109
  "error-content": "#ffffff"
73
110
  },
74
111
  "extras": {
75
- "--hwio-kicker-on-neutral": "#fb7185"
112
+ "--hwio-gradient": "linear-gradient(90deg, #e30427, #009cfa)",
113
+ "--hwio-gradient-figure": "linear-gradient(90deg, #e30427, #3976c5)",
114
+ "--hwio-chart-1": "#016ad4",
115
+ "--hwio-chart-2": "#009cfa",
116
+ "--hwio-chart-3": "#6b6a6a",
117
+ "--hwio-chart-highlight": "#06367a",
118
+ "--hwio-chart-forecast": "#e8e8e8",
119
+ "--hwio-chart-failure": "#e30427",
120
+ "--hwio-chart-label": "#252532",
121
+ "--hwio-chart-outline": "#016ad4",
122
+ "--hwio-chart-outline-width": "1px",
123
+ "--hwio-motion-easing": "ease-out",
124
+ "--hwio-motion-fast": "200ms",
125
+ "--hwio-motion-base": "300ms",
126
+ "--hwio-motion-slow": "400ms",
127
+ "--hwio-motion-reveal": "400ms",
128
+ "--hwio-text-secondary": "#6b6a6a",
129
+ "--hwio-text-secondary-on-neutral": "#d1d5db",
130
+ "--hwio-kicker-on-neutral": "#d1d5db",
131
+ "--hwio-link": "#016ad4",
132
+ "--hwio-link-hover": "#06367a",
133
+ "--hwio-nav-hover": "#016ad4",
134
+ "--hwio-footer-hover": "#009cfa",
135
+ "--hwio-mist": "#e8e8e8",
136
+ "--hwio-icon": "#06367a",
137
+ "--hwio-icon-bg": "var(--color-base-200)",
138
+ "--hwio-note-opacity": "1"
76
139
  }
77
140
  },
78
141
  "hwio-dark": {
@@ -92,30 +155,67 @@
92
155
  "noise": "0"
93
156
  },
94
157
  "shapeKey": "hwio",
158
+ "guidelines": true,
159
+ "typographyKey": "hwio",
160
+ "layoutKey": "grid",
161
+ "layout": {
162
+ "container": "1328px",
163
+ "pad": "24px",
164
+ "width": "1280px",
165
+ "columns": 12,
166
+ "gutter": "24px"
167
+ },
95
168
  "roles": {
96
- "base-100": "#0f0f14",
97
- "base-200": "#1a1a22",
98
- "base-300": "#23232f",
99
- "base-content": "#e7e7ee",
169
+ "base-100": "#16161d",
170
+ "base-200": "#252532",
171
+ "base-300": "#3b3b46",
172
+ "base-content": "#ffffff",
100
173
  "primary": "#009cfa",
101
- "primary-content": "#0f0f14",
174
+ "primary-content": "#16161d",
102
175
  "secondary": "#009cfa",
103
- "secondary-content": "#0f0f14",
176
+ "secondary-content": "#16161d",
104
177
  "accent": "#f43f5e",
105
- "accent-content": "#0f0f14",
106
- "neutral": "#23232f",
107
- "neutral-content": "#e7e7ee",
178
+ "accent-content": "#16161d",
179
+ "neutral": "#252532",
180
+ "neutral-content": "#ffffff",
108
181
  "info": "#009cfa",
109
- "info-content": "#06367a",
110
- "success": "#15803d",
111
- "success-content": "#ffffff",
112
- "warning": "#b45309",
113
- "warning-content": "#ffffff",
114
- "error": "#dc2626",
115
- "error-content": "#ffffff"
182
+ "info-content": "#16161d",
183
+ "success": "#34c47a",
184
+ "success-content": "#16161d",
185
+ "warning": "#f59e0b",
186
+ "warning-content": "#16161d",
187
+ "error": "#f43f5e",
188
+ "error-content": "#16161d"
116
189
  },
117
190
  "extras": {
118
- "--hwio-kicker-on-neutral": "#fb7185"
191
+ "--hwio-gradient": "linear-gradient(90deg, #e30427, #009cfa)",
192
+ "--hwio-gradient-figure": "linear-gradient(90deg, #f43f5e, #009cfa)",
193
+ "--hwio-chart-1": "#009cfa",
194
+ "--hwio-chart-2": "#016ad4",
195
+ "--hwio-chart-3": "#d1d5db",
196
+ "--hwio-chart-highlight": "#ffffff",
197
+ "--hwio-chart-forecast": "#2e2e3a",
198
+ "--hwio-chart-failure": "#f43f5e",
199
+ "--hwio-chart-label": "#ffffff",
200
+ "--hwio-chart-outline": "transparent",
201
+ "--hwio-chart-outline-width": "0px",
202
+ "--hwio-motion-easing": "ease-out",
203
+ "--hwio-motion-fast": "200ms",
204
+ "--hwio-motion-base": "300ms",
205
+ "--hwio-motion-slow": "400ms",
206
+ "--hwio-motion-reveal": "400ms",
207
+ "--hwio-text-secondary": "#d1d5db",
208
+ "--hwio-text-secondary-on-neutral": "#d1d5db",
209
+ "--hwio-kicker-on-neutral": "#d1d5db",
210
+ "--hwio-link": "#009cfa",
211
+ "--hwio-link-hover": "#ffffff",
212
+ "--hwio-nav-hover": "#009cfa",
213
+ "--hwio-footer-hover": "#009cfa",
214
+ "--hwio-mist": "#2e2e3a",
215
+ "--hwio-icon": "#ffffff",
216
+ "--hwio-icon-bg": "var(--color-base-200)",
217
+ "--hwio-note-opacity": "1",
218
+ "--hwio-kicker-on-alt": "#d1d5db"
119
219
  }
120
220
  },
121
221
  "hwio-forestry": {
@@ -135,30 +235,66 @@
135
235
  "noise": "0"
136
236
  },
137
237
  "shapeKey": "hwio",
238
+ "guidelines": true,
239
+ "typographyKey": "hwio",
240
+ "layoutKey": "grid",
241
+ "layout": {
242
+ "container": "1328px",
243
+ "pad": "24px",
244
+ "width": "1280px",
245
+ "columns": 12,
246
+ "gutter": "24px"
247
+ },
138
248
  "roles": {
139
249
  "base-100": "#ffffff",
140
- "base-200": "#F1FAFF",
141
- "base-300": "#e5e7eb",
250
+ "base-200": "#f7f7f7",
251
+ "base-300": "#dcdcdc",
142
252
  "base-content": "#252532",
143
253
  "primary": "#2B7036",
144
254
  "primary-content": "#ffffff",
145
- "secondary": "#016ad4",
255
+ "secondary": "#06367a",
146
256
  "secondary-content": "#ffffff",
147
257
  "accent": "#2B7036",
148
258
  "accent-content": "#ffffff",
149
259
  "neutral": "#252532",
150
- "neutral-content": "#f3f4f6",
151
- "info": "#009cfa",
152
- "info-content": "#06367a",
153
- "success": "#15803d",
260
+ "neutral-content": "#ffffff",
261
+ "info": "#016ad4",
262
+ "info-content": "#ffffff",
263
+ "success": "#2e7d4f",
154
264
  "success-content": "#ffffff",
155
- "warning": "#b45309",
156
- "warning-content": "#ffffff",
157
- "error": "#dc2626",
265
+ "warning": "#c76a00",
266
+ "warning-content": "#252532",
267
+ "error": "#e30427",
158
268
  "error-content": "#ffffff"
159
269
  },
160
270
  "extras": {
161
- "--hwio-kicker-on-neutral": "#fb7185"
271
+ "--hwio-gradient": "linear-gradient(90deg, #e30427, #009cfa)",
272
+ "--hwio-gradient-figure": "linear-gradient(90deg, #e30427, #3976c5)",
273
+ "--hwio-chart-1": "#016ad4",
274
+ "--hwio-chart-2": "#009cfa",
275
+ "--hwio-chart-3": "#6b6a6a",
276
+ "--hwio-chart-highlight": "#06367a",
277
+ "--hwio-chart-forecast": "#e8e8e8",
278
+ "--hwio-chart-failure": "#e30427",
279
+ "--hwio-chart-label": "#252532",
280
+ "--hwio-chart-outline": "#016ad4",
281
+ "--hwio-chart-outline-width": "1px",
282
+ "--hwio-motion-easing": "ease-out",
283
+ "--hwio-motion-fast": "200ms",
284
+ "--hwio-motion-base": "300ms",
285
+ "--hwio-motion-slow": "400ms",
286
+ "--hwio-motion-reveal": "400ms",
287
+ "--hwio-text-secondary": "#6b6a6a",
288
+ "--hwio-text-secondary-on-neutral": "#d1d5db",
289
+ "--hwio-kicker-on-neutral": "#d1d5db",
290
+ "--hwio-link": "#016ad4",
291
+ "--hwio-link-hover": "#06367a",
292
+ "--hwio-nav-hover": "#2B7036",
293
+ "--hwio-footer-hover": "#009cfa",
294
+ "--hwio-mist": "#e8e8e8",
295
+ "--hwio-icon": "#06367a",
296
+ "--hwio-icon-bg": "var(--color-base-200)",
297
+ "--hwio-note-opacity": "1"
162
298
  }
163
299
  },
164
300
  "hwio-forestry-dark": {
@@ -178,30 +314,67 @@
178
314
  "noise": "0"
179
315
  },
180
316
  "shapeKey": "hwio",
317
+ "guidelines": true,
318
+ "typographyKey": "hwio",
319
+ "layoutKey": "grid",
320
+ "layout": {
321
+ "container": "1328px",
322
+ "pad": "24px",
323
+ "width": "1280px",
324
+ "columns": 12,
325
+ "gutter": "24px"
326
+ },
181
327
  "roles": {
182
- "base-100": "#0f0f14",
183
- "base-200": "#1a1a22",
184
- "base-300": "#23232f",
185
- "base-content": "#e7e7ee",
328
+ "base-100": "#16161d",
329
+ "base-200": "#252532",
330
+ "base-300": "#3b3b46",
331
+ "base-content": "#ffffff",
186
332
  "primary": "#5aa864",
187
- "primary-content": "#0f0f14",
333
+ "primary-content": "#16161d",
188
334
  "secondary": "#009cfa",
189
- "secondary-content": "#0f0f14",
335
+ "secondary-content": "#16161d",
190
336
  "accent": "#5aa864",
191
- "accent-content": "#0f0f14",
192
- "neutral": "#23232f",
193
- "neutral-content": "#e7e7ee",
337
+ "accent-content": "#16161d",
338
+ "neutral": "#252532",
339
+ "neutral-content": "#ffffff",
194
340
  "info": "#009cfa",
195
- "info-content": "#06367a",
196
- "success": "#15803d",
197
- "success-content": "#ffffff",
198
- "warning": "#b45309",
199
- "warning-content": "#ffffff",
200
- "error": "#dc2626",
201
- "error-content": "#ffffff"
341
+ "info-content": "#16161d",
342
+ "success": "#34c47a",
343
+ "success-content": "#16161d",
344
+ "warning": "#f59e0b",
345
+ "warning-content": "#16161d",
346
+ "error": "#f43f5e",
347
+ "error-content": "#16161d"
202
348
  },
203
349
  "extras": {
204
- "--hwio-kicker-on-neutral": "#fb7185"
350
+ "--hwio-gradient": "linear-gradient(90deg, #e30427, #009cfa)",
351
+ "--hwio-gradient-figure": "linear-gradient(90deg, #f43f5e, #009cfa)",
352
+ "--hwio-chart-1": "#009cfa",
353
+ "--hwio-chart-2": "#016ad4",
354
+ "--hwio-chart-3": "#d1d5db",
355
+ "--hwio-chart-highlight": "#ffffff",
356
+ "--hwio-chart-forecast": "#2e2e3a",
357
+ "--hwio-chart-failure": "#f43f5e",
358
+ "--hwio-chart-label": "#ffffff",
359
+ "--hwio-chart-outline": "transparent",
360
+ "--hwio-chart-outline-width": "0px",
361
+ "--hwio-motion-easing": "ease-out",
362
+ "--hwio-motion-fast": "200ms",
363
+ "--hwio-motion-base": "300ms",
364
+ "--hwio-motion-slow": "400ms",
365
+ "--hwio-motion-reveal": "400ms",
366
+ "--hwio-text-secondary": "#d1d5db",
367
+ "--hwio-text-secondary-on-neutral": "#d1d5db",
368
+ "--hwio-kicker-on-neutral": "#d1d5db",
369
+ "--hwio-link": "#009cfa",
370
+ "--hwio-link-hover": "#ffffff",
371
+ "--hwio-nav-hover": "#5aa864",
372
+ "--hwio-footer-hover": "#009cfa",
373
+ "--hwio-mist": "#2e2e3a",
374
+ "--hwio-icon": "#ffffff",
375
+ "--hwio-icon-bg": "var(--color-base-200)",
376
+ "--hwio-note-opacity": "1",
377
+ "--hwio-kicker-on-alt": "#d1d5db"
205
378
  }
206
379
  },
207
380
  "er3o": {
@@ -221,6 +394,13 @@
221
394
  "noise": "0"
222
395
  },
223
396
  "shapeKey": "er3o",
397
+ "guidelines": false,
398
+ "typographyKey": "er3o",
399
+ "layoutKey": "hub",
400
+ "layout": {
401
+ "container": "1275px",
402
+ "pad": "27px"
403
+ },
224
404
  "roles": {
225
405
  "base-100": "#ffffff",
226
406
  "base-200": "#f9fafb",
@@ -253,7 +433,21 @@
253
433
  }
254
434
  }
255
435
  },
436
+ "breakpoints": {
437
+ "sm": "40rem",
438
+ "md": "48rem",
439
+ "lg": "64rem",
440
+ "xl": "80rem",
441
+ "2xl": "96rem"
442
+ },
256
443
  "layout": {
444
+ "grid": {
445
+ "container": "1328px",
446
+ "pad": "24px",
447
+ "width": "1280px",
448
+ "columns": 12,
449
+ "gutter": "24px"
450
+ },
257
451
  "hub": {
258
452
  "container": "1275px",
259
453
  "pad": "27px"
@@ -264,75 +458,229 @@
264
458
  }
265
459
  },
266
460
  "typography": {
267
- "$comment": "Type ramp and rhythm as implemented in @hubpav/hwio-ui/styles.css today (direction A, R9). A test in packages/brand/test/design-md.test.mjs fails when the two drift. fontSize is the large-screen value; responsive lists the smaller breakpoints (base, md = 48rem). The 2026 redesign (R13-R16) evolves these blocks; the fixed constraints are the logo, red, navy and Inter (R14).",
268
- "roles": {
269
- "display": {
270
- "element": "h1",
271
- "fontSize": "3.5rem",
272
- "responsive": {
273
- "base": "2.5rem",
274
- "md": "3rem"
461
+ "presets": {
462
+ "hwio": {
463
+ "roles": {
464
+ "display": {
465
+ "element": "h1",
466
+ "fontSize": "4.5rem",
467
+ "responsive": {
468
+ "base": "2.5rem",
469
+ "md": "3rem",
470
+ "lg": "3.75rem"
471
+ },
472
+ "from": "xl",
473
+ "fontWeight": 700,
474
+ "lineHeight": 1.2,
475
+ "letterSpacing": "-0.02em"
476
+ },
477
+ "heading": {
478
+ "element": "h2",
479
+ "fontSize": "3rem",
480
+ "responsive": {
481
+ "base": "2rem",
482
+ "lg": "2.5rem"
483
+ },
484
+ "from": "xl",
485
+ "fontWeight": 600,
486
+ "lineHeight": 1.3,
487
+ "lineHeightSteps": {
488
+ "lg": 1.2
489
+ },
490
+ "letterSpacing": "-0.015em"
491
+ },
492
+ "subheading": {
493
+ "element": "h3",
494
+ "fontSize": "2rem",
495
+ "responsive": {
496
+ "base": "1.5rem",
497
+ "lg": "1.75rem"
498
+ },
499
+ "from": "xl",
500
+ "fontWeight": 600,
501
+ "lineHeight": 1.3,
502
+ "letterSpacing": "-0.01em"
503
+ },
504
+ "title": {
505
+ "element": "h4",
506
+ "fontSize": "1.25rem",
507
+ "fontWeight": 700,
508
+ "lineHeight": 1.3,
509
+ "letterSpacing": "0"
510
+ },
511
+ "lead": {
512
+ "selector": ".hwio-lead",
513
+ "fontSize": "1.1875rem",
514
+ "fontWeight": 400,
515
+ "lineHeight": 1.55,
516
+ "letterSpacing": "0"
517
+ },
518
+ "body": {
519
+ "element": "body",
520
+ "fontSize": "1rem",
521
+ "fontWeight": 400,
522
+ "lineHeight": 1.6,
523
+ "letterSpacing": "0"
524
+ },
525
+ "caption": {
526
+ "selector": ".hwio-caption",
527
+ "fontSize": "0.8125rem",
528
+ "fontWeight": 400,
529
+ "lineHeight": 1.4,
530
+ "letterSpacing": "0"
531
+ },
532
+ "kicker": {
533
+ "selector": ".hwio-kicker",
534
+ "fontSize": "0.8125rem",
535
+ "fontWeight": 700,
536
+ "lineHeight": 1.4,
537
+ "letterSpacing": "0.07em",
538
+ "textTransform": "uppercase"
539
+ },
540
+ "chip": {
541
+ "selector": ".hwio-chip",
542
+ "fontSize": "0.75rem",
543
+ "fontWeight": 700,
544
+ "lineHeight": 1.4,
545
+ "letterSpacing": "0.07em",
546
+ "textTransform": "uppercase"
547
+ },
548
+ "figure": {
549
+ "selector": ".hwio-figure",
550
+ "fontSize": "2.5rem",
551
+ "fontWeight": 700,
552
+ "lineHeight": 1.2,
553
+ "letterSpacing": "-0.02em"
554
+ },
555
+ "button": {
556
+ "selector": ".btn",
557
+ "fontSize": "0.9375rem",
558
+ "fontWeight": 700,
559
+ "lineHeight": 1,
560
+ "letterSpacing": "0"
561
+ }
275
562
  },
276
- "fontWeight": 700,
277
- "lineHeight": 1.05,
278
- "letterSpacing": "-0.03em"
279
- },
280
- "heading": {
281
- "element": "h2",
282
- "fontSize": "2.5rem",
283
- "responsive": {
284
- "base": "2rem"
563
+ "weights": {
564
+ "nav": 400,
565
+ "label": 700,
566
+ "strong": 700,
567
+ "footerTitle": 700
285
568
  },
286
- "fontWeight": 700,
287
- "lineHeight": 1.1,
288
- "letterSpacing": "-0.025em"
289
- },
290
- "subheading": {
291
- "element": "h3",
292
- "fontSize": "1.375rem",
293
- "fontWeight": 700,
294
- "lineHeight": 1.2,
295
- "letterSpacing": "-0.01em"
296
- },
297
- "title": {
298
- "element": "h4",
299
- "fontSize": "1.125rem",
300
- "fontWeight": 700,
301
- "lineHeight": 1.3,
302
- "letterSpacing": "-0.005em"
303
- },
304
- "lead": {
305
- "selector": ".hwio-lead",
306
- "fontSize": "1.1875rem",
307
- "fontWeight": 400,
308
- "lineHeight": 1.55,
309
- "letterSpacing": "0"
310
- },
311
- "body": {
312
- "element": "body",
313
- "fontSize": "1.0625rem",
314
- "fontWeight": 400,
315
- "lineHeight": 1.6,
316
- "letterSpacing": "0"
317
- },
318
- "kicker": {
319
- "selector": ".hwio-kicker",
320
- "fontSize": "0.875rem",
321
- "fontWeight": 600,
322
- "lineHeight": 1.4,
323
- "letterSpacing": "0"
569
+ "vars": {
570
+ "--hwio-choice-title-size": "var(--hwio-type-subheading-size)",
571
+ "--hwio-choice-title-leading": "var(--hwio-type-subheading-leading)",
572
+ "--hwio-choice-title-tracking": "var(--hwio-type-subheading-tracking)"
573
+ }
324
574
  },
325
- "button": {
326
- "selector": ".btn",
327
- "fontSize": "0.9375rem",
328
- "fontWeight": 600,
329
- "lineHeight": 1,
330
- "letterSpacing": "0"
575
+ "er3o": {
576
+ "roles": {
577
+ "display": {
578
+ "element": "h1",
579
+ "fontSize": "3.5rem",
580
+ "responsive": {
581
+ "base": "2.5rem",
582
+ "md": "3rem"
583
+ },
584
+ "from": "lg",
585
+ "fontWeight": 700,
586
+ "lineHeight": 1.05,
587
+ "letterSpacing": "-0.03em"
588
+ },
589
+ "heading": {
590
+ "element": "h2",
591
+ "fontSize": "2.5rem",
592
+ "responsive": {
593
+ "base": "2rem"
594
+ },
595
+ "from": "md",
596
+ "fontWeight": 700,
597
+ "lineHeight": 1.1,
598
+ "letterSpacing": "-0.025em"
599
+ },
600
+ "subheading": {
601
+ "element": "h3",
602
+ "fontSize": "1.375rem",
603
+ "fontWeight": 700,
604
+ "lineHeight": 1.2,
605
+ "letterSpacing": "-0.01em"
606
+ },
607
+ "title": {
608
+ "element": "h4",
609
+ "fontSize": "1.125rem",
610
+ "fontWeight": 700,
611
+ "lineHeight": 1.3,
612
+ "letterSpacing": "-0.005em"
613
+ },
614
+ "lead": {
615
+ "selector": ".hwio-lead",
616
+ "fontSize": "1.1875rem",
617
+ "fontWeight": 400,
618
+ "lineHeight": 1.55,
619
+ "letterSpacing": "0"
620
+ },
621
+ "body": {
622
+ "element": "body",
623
+ "fontSize": "1.0625rem",
624
+ "fontWeight": 400,
625
+ "lineHeight": 1.6,
626
+ "letterSpacing": "0"
627
+ },
628
+ "caption": {
629
+ "selector": ".hwio-caption",
630
+ "fontSize": "0.875rem",
631
+ "fontWeight": 400,
632
+ "lineHeight": 1.4,
633
+ "letterSpacing": "0"
634
+ },
635
+ "kicker": {
636
+ "selector": ".hwio-kicker",
637
+ "fontSize": "0.875rem",
638
+ "fontWeight": 600,
639
+ "lineHeight": 1.4,
640
+ "letterSpacing": "0",
641
+ "textTransform": "none"
642
+ },
643
+ "chip": {
644
+ "selector": ".hwio-chip",
645
+ "fontSize": "0.875rem",
646
+ "fontWeight": 500,
647
+ "letterSpacing": "0",
648
+ "textTransform": "none"
649
+ },
650
+ "figure": {
651
+ "selector": ".hwio-figure",
652
+ "fontSize": "2.5rem",
653
+ "responsive": {
654
+ "base": "2.25rem"
655
+ },
656
+ "from": "lg",
657
+ "fontWeight": 700,
658
+ "lineHeight": 1,
659
+ "letterSpacing": "-0.03em"
660
+ },
661
+ "button": {
662
+ "selector": ".btn",
663
+ "fontSize": "0.9375rem",
664
+ "fontWeight": 600,
665
+ "lineHeight": 1,
666
+ "letterSpacing": "0"
667
+ }
668
+ },
669
+ "weights": {
670
+ "nav": 500,
671
+ "label": 600,
672
+ "strong": 600,
673
+ "footerTitle": 500
674
+ },
675
+ "vars": {
676
+ "--hwio-choice-title-size": "1.75rem",
677
+ "--hwio-choice-title-leading": "1.15",
678
+ "--hwio-choice-title-tracking": "-0.02em"
679
+ }
331
680
  }
332
681
  }
333
682
  },
334
683
  "rhythm": {
335
- "$comment": "Spacing rhythm as implemented in styles.css: Tailwind --spacing is 4px; .hwio-section is 20/28 units, compact 10/12 units; controls are 48px tall; card padding 32px.",
336
684
  "unit": "8px",
337
685
  "section": {
338
686
  "base": "80px",
@@ -345,6 +693,51 @@
345
693
  "control": "48px",
346
694
  "cardPadding": "32px"
347
695
  },
696
+ "motion": {
697
+ "easing": "ease-out",
698
+ "fast": "200ms",
699
+ "base": "300ms",
700
+ "slow": "400ms"
701
+ },
702
+ "icons": {
703
+ "set": "lucide",
704
+ "color": "navy",
705
+ "colorOnDark": "white",
706
+ "stroke": "2px",
707
+ "grid": "24px",
708
+ "sizes": [
709
+ "16px",
710
+ "24px",
711
+ "32px"
712
+ ]
713
+ },
714
+ "charts": {
715
+ "series": [
716
+ "blue",
717
+ "sky",
718
+ "gray"
719
+ ],
720
+ "highlight": "navy",
721
+ "forecast": "mist",
722
+ "failure": "red",
723
+ "label": "ink",
724
+ "outline": {
725
+ "color": "blue",
726
+ "width": "1px",
727
+ "appliesTo": "sky"
728
+ },
729
+ "dark": {
730
+ "series": [
731
+ "sky",
732
+ "blue",
733
+ "dark-gray"
734
+ ],
735
+ "highlight": "white",
736
+ "forecast": "dark-mist",
737
+ "failure": "dark-red",
738
+ "label": "white"
739
+ }
740
+ },
348
741
  "fonts": {
349
742
  "display": "block",
350
743
  "families": {