@felloinnovations/brand-kit 0.5.0 → 0.5.3

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 (124) hide show
  1. package/AGENTS.md +29 -9
  2. package/CHANGELOG.md +110 -0
  3. package/README.md +14 -6
  4. package/design-system/01-how-claude-decides.md +5 -3
  5. package/design-system/03-colour.md +22 -3
  6. package/design-system/05-space-and-layout.md +2 -1
  7. package/design-system/08-choosing-components.md +20 -4
  8. package/design-system/09-charts.md +7 -4
  9. package/design-system/10-patterns.md +1 -1
  10. package/design-system/11-page-recipes.md +40 -1
  11. package/design-system/13-motion.md +4 -4
  12. package/design-system/15-ai-experiences.md +11 -0
  13. package/design-system/17-decisions.md +51 -0
  14. package/design-system/components/AppShell/README.md +89 -21
  15. package/design-system/components/AppShell/preview.html +148 -3
  16. package/design-system/components/AppShell/style.css +47 -0
  17. package/design-system/components/Avatar/README.md +6 -3
  18. package/design-system/components/Avatar/preview.html +2 -1
  19. package/design-system/components/Avatar/style.css +3 -0
  20. package/design-system/components/Banner/README.md +9 -5
  21. package/design-system/components/Banner/preview.html +9 -0
  22. package/design-system/components/Banner/style.css +3 -0
  23. package/design-system/components/Button/README.md +29 -2
  24. package/design-system/components/Button/preview.html +33 -1
  25. package/design-system/components/Button/style.css +21 -0
  26. package/design-system/components/Calendar/README.md +148 -0
  27. package/design-system/components/Calendar/preview.html +449 -0
  28. package/design-system/components/Calendar/style.css +61 -0
  29. package/design-system/components/Card/README.md +13 -0
  30. package/design-system/components/Card/preview.html +23 -0
  31. package/design-system/components/Card/style.css +19 -0
  32. package/design-system/components/ChatCard/README.md +74 -3
  33. package/design-system/components/ChatCard/preview.html +126 -25
  34. package/design-system/components/ChatCard/style.css +6 -0
  35. package/design-system/components/CheckRow/README.md +1 -1
  36. package/design-system/components/CheckRow/preview.html +1 -1
  37. package/design-system/components/CheckRow/style.css +1 -1
  38. package/design-system/components/Chip/README.md +16 -7
  39. package/design-system/components/Chip/preview.html +25 -1
  40. package/design-system/components/Chip/style.css +5 -0
  41. package/design-system/components/Combobox/README.md +10 -4
  42. package/design-system/components/Combobox/preview.html +19 -4
  43. package/design-system/components/Combobox/style.css +7 -1
  44. package/design-system/components/CommentThread/README.md +138 -0
  45. package/design-system/components/CommentThread/preview.html +134 -0
  46. package/design-system/components/CommentThread/style.css +41 -0
  47. package/design-system/components/DateInput/README.md +38 -4
  48. package/design-system/components/DateInput/preview.html +50 -2
  49. package/design-system/components/DateInput/style.css +6 -0
  50. package/design-system/components/Dialog/README.md +26 -3
  51. package/design-system/components/Dialog/preview.html +80 -0
  52. package/design-system/components/Dialog/style.css +28 -3
  53. package/design-system/components/EmptyState/README.md +1 -1
  54. package/design-system/components/Fold/README.md +21 -0
  55. package/design-system/components/Fold/preview.html +44 -1
  56. package/design-system/components/Fold/style.css +30 -0
  57. package/design-system/components/InlineEdit/README.md +116 -0
  58. package/design-system/components/InlineEdit/preview.html +135 -0
  59. package/design-system/components/InlineEdit/style.css +34 -0
  60. package/design-system/components/Input/README.md +20 -1
  61. package/design-system/components/Input/preview.html +24 -0
  62. package/design-system/components/Input/style.css +13 -1
  63. package/design-system/components/KanbanBoard/README.md +69 -5
  64. package/design-system/components/KanbanBoard/preview.html +129 -0
  65. package/design-system/components/KanbanBoard/style.css +32 -1
  66. package/design-system/components/ListDetail/preview.html +1 -1
  67. package/design-system/components/Matrix/README.md +1 -1
  68. package/design-system/components/Matrix/preview.html +1 -1
  69. package/design-system/components/Motion/README.md +2 -2
  70. package/design-system/components/Motion/preview.html +8 -8
  71. package/design-system/components/PlanTimeline/README.md +144 -0
  72. package/design-system/components/PlanTimeline/preview.html +109 -0
  73. package/design-system/components/PlanTimeline/style.css +64 -0
  74. package/design-system/components/README.md +12 -7
  75. package/design-system/components/ScoreHero/README.md +2 -2
  76. package/design-system/components/ScoreHero/style.css +1 -1
  77. package/design-system/components/ShareBar/README.md +1 -1
  78. package/design-system/components/ShareBar/style.css +1 -1
  79. package/design-system/components/Skeleton/README.md +82 -17
  80. package/design-system/components/Skeleton/preview.html +84 -2
  81. package/design-system/components/Skeleton/style.css +9 -14
  82. package/design-system/components/Starter/README.md +1 -1
  83. package/design-system/components/Starter/preview.html +1 -1
  84. package/design-system/components/Stepper/README.md +81 -5
  85. package/design-system/components/Stepper/preview.html +64 -1
  86. package/design-system/components/Stepper/style.css +29 -0
  87. package/design-system/components/StreakCalendar/README.md +1 -0
  88. package/design-system/components/Table/README.md +8 -4
  89. package/design-system/components/Table/preview.html +16 -1
  90. package/design-system/components/Table/style.css +3 -1
  91. package/design-system/components/TextDiff/README.md +96 -0
  92. package/design-system/components/TextDiff/preview.html +42 -0
  93. package/design-system/components/TextDiff/style.css +21 -0
  94. package/design-system/components/TickStrip/README.md +1 -1
  95. package/design-system/components/TickStrip/preview.html +1 -1
  96. package/design-system/components/TickStrip/style.css +1 -1
  97. package/design-system/components/Timeline/README.md +4 -2
  98. package/design-system/components/TrendLine/README.md +38 -7
  99. package/design-system/components/TrendLine/preview.html +140 -3
  100. package/design-system/components/TrendLine/style.css +12 -2
  101. package/design-system/components/Well/README.md +1 -1
  102. package/design-system/components/Well/style.css +2 -2
  103. package/design-system/components/_house.css +1 -1
  104. package/design-system/components/bundle.css +501 -30
  105. package/design-system/tokens.json +17 -7
  106. package/dist/fello-core.css +2 -2
  107. package/dist/fello.css +2 -2
  108. package/dist/fello.scoped.css +2 -2
  109. package/dist/index.d.ts +1 -1
  110. package/dist/scoped.js +2 -2
  111. package/dist/tokens.d.ts +16 -8
  112. package/dist/tokens.js +16 -8
  113. package/package.json +7 -2
  114. package/scripts/check-drift.mjs +325 -0
  115. package/scripts/token-model.mjs +2 -1
  116. package/tokens/_dark.css +3 -2
  117. package/tokens/_product.css +13 -11
  118. package/tokens/palettes.ts +1 -1
  119. package/tokens/shadcn-compat.css +1 -1
  120. package/tokens/shadcn-compat.hsl.css +1 -1
  121. package/tokens/tokens.css +23 -15
  122. package/tokens/tokens.md +56 -50
  123. package/tokens/tokens.root.css +23 -15
  124. package/tokens/tokens.ts +17 -9
package/tokens/_product.css CHANGED
@@ -34,6 +34,7 @@
34
34
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c); /* #f7f4f4: the zebra row, the page a step cooler */
35
35
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
36
36
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
37
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface)); /* an error status's ground (#15): the alert red at 8%, the tint-needs formula */
37
38
  --ws-edge: var(--color-gray-stroke);
38
39
  --ws-edge-card: var(--color-gray-3); /* the designer's border/card */
39
40
  --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent); /* the card edge on a screen under 1.5 dppx, where 0.5 px rounds up to 1 */
@@ -151,18 +152,18 @@
151
152
  --ws-rating-middle: var(--color-brand-mid-blue);
152
153
  --ws-rating-needs-work: var(--ws-chart-needs-work);
153
154
 
154
- /* === Loading shimmer (North style1.css:1458-1469) ===
155
- A sweep in the chart colours over the ghost grey; Seth's hexes, not kit colours. */
156
- /* Drawn at 300% wide, so a still frame (position 0 or 100%, reduced motion) shows a third of it: the grey runs to 34%
157
- and from 66%, so both ends of the sweep are a plain ghost with no tint at its edge. */
158
- /* D15: the grey is the tray made warmer, each tint its chart tone over a near-white: Seth's values exactly. Blended
159
- "in srgb", as the hex stops always were (a derived stop would otherwise blend in Oklab). */
160
- --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c); /* #ece8e4 */
155
+ /* === Loading shimmer (North style1.css:1458-1469; one quiet tone since 0.5.1, Amit 10 Nov 2026) ===
156
+ The ghost grey with a lighter pass of the same grey: no chart hues. North's timing stays (--ws-loop-shimmer,
157
+ --ws-ease-shimmer). */
158
+ /* Drawn at 300% wide, so a still frame (position 0 or 100%, reduced motion) shows a third of it: the pass runs from
159
+ 34% to 66%, so both ends of the sweep are the plain ghost. The ground is the ghost itself, the same at rest and in
160
+ motion, so it shows on the cream (1.29:1) and on the tray (1.13:1) and a ghost in a card's foot needs no ground of
161
+ its own; the pass is the ghost 70% of the way to the cream, 1.07:1 off the cream and 1.06:1 off the tray. Blended
162
+ "in srgb", as the stops always were (a derived stop would otherwise blend in Oklab). */
163
+ --ws-shimmer-ground: var(--ws-ghost); /* #e3dfdb */
161
164
  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%,
162
- color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%,
163
- color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%,
164
- color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%,
165
- var(--ws-shimmer-ground) 66% 100%); /* #f6ddd8, #e4dcf3, #d6eaea */
165
+ color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%,
166
+ var(--ws-shimmer-ground) 66% 100%); /* the pass #f6f3f0 */
166
167
 
167
168
  /* === Chat card tints and the scrim (colour) ===
168
169
  Ignite globals.css "Agent cards" (8 Oct 2026) and the motion block. */
@@ -282,6 +283,7 @@
282
283
  --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
283
284
  --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
284
285
  --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
286
+ --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent); /* the menu's drop cast upward: a drawer that rises from the bottom of a pane */
285
287
  --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent); /* the centred chat bar (North) */
286
288
  /* Seth's hover washes (North): a list row .03, a nav or menu row .05, an icon button .06. */
287
289
  /* Each alpha is the 8-bit step rgba(.03 / .05 / .06) always painted (8, 13 and 15 of 255), so a wash laid as a
package/tokens/palettes.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
3
  tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
- 422 tokens: 111 kit, 311 product layer; dark: 99 night, 42 navy ground. */
4
+ 424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
5
5
 
6
6
  /** The palette contract (D15): the only tokens a palette sets, each with its group and one-line meaning. */
7
7
  export const contract = [
package/tokens/shadcn-compat.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
3
  tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
- 422 tokens: 111 kit, 311 product layer; dark: 99 night, 42 navy ground. */
4
+ 424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
5
5
 
6
6
  /* Maps shadcn's semantic names onto Fello brand tokens. Import AFTER
7
7
  tokens.css (or fello.css). Existing shadcn components then render in brand
package/tokens/shadcn-compat.hsl.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
3
  tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
- 422 tokens: 111 kit, 311 product layer; dark: 99 night, 42 navy ground. */
4
+ 424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
5
5
 
6
6
  /* shadcn's names as bare HSL channels, for a host whose Tailwind config writes
7
7
  hsl(var(--primary)) (Tailwind v3 shadcn, Campfire). Literal values, so the dark
package/tokens/tokens.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
3
  tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
- 422 tokens: 111 kit, 311 product layer; dark: 99 night, 42 navy ground. */
4
+ 424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
5
5
 
6
6
  /* "static" so every token is emitted as a custom property even when no
7
7
  utility references it. Without it Tailwind prunes the unused ones and a
@@ -126,6 +126,7 @@
126
126
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
127
127
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
128
128
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
129
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
129
130
  --ws-edge: var(--color-gray-stroke);
130
131
  --ws-edge-card: var(--color-gray-3);
131
132
  --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
@@ -199,8 +200,8 @@
199
200
  --ws-rating-strong: var(--color-stat-positive);
200
201
  --ws-rating-middle: var(--color-brand-mid-blue);
201
202
  --ws-rating-needs-work: var(--ws-chart-needs-work);
202
- --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
203
- --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
203
+ --ws-shimmer-ground: var(--ws-ghost);
204
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
204
205
  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
205
206
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
206
207
  --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
@@ -273,6 +274,7 @@
273
274
  --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
274
275
  --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
275
276
  --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
277
+ --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
276
278
  --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
277
279
  --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
278
280
  --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
@@ -457,6 +459,7 @@
457
459
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
458
460
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
459
461
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
462
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
460
463
  --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
461
464
  --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
462
465
  --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
@@ -496,8 +499,8 @@
496
499
  --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
497
500
  --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
498
501
  --ws-chart-cell-edge: var(--ws-edge-slot);
499
- --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
500
- --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
502
+ --ws-shimmer-ground: var(--ws-ghost);
503
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
501
504
  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
502
505
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
503
506
  --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
@@ -518,6 +521,7 @@
518
521
  --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
519
522
  --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
520
523
  --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
524
+ --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
521
525
  --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
522
526
  --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
523
527
  --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
@@ -614,6 +618,7 @@
614
618
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
615
619
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
616
620
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
621
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
617
622
  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
618
623
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
619
624
  --ws-track: var(--ws-tray);
@@ -662,12 +667,11 @@
662
667
  --ws-float-rim: 0 0 0 0 transparent;
663
668
  --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
664
669
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
665
- --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
666
670
  --ws-raised-sunk: var(--ws-surface-sunk);
667
671
  --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
668
672
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
669
673
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
670
- --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
674
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
671
675
  --ws-inverse: var(--color-text-heading);
672
676
  --ws-on-inverse: var(--ws-on-act);
673
677
  --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
@@ -725,6 +729,7 @@
725
729
  --ws-tint-accent: var(--color-surface);
726
730
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
727
731
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
732
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
728
733
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
729
734
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
730
735
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -793,7 +798,6 @@
793
798
  --ws-chart-alert: #FF5470;
794
799
  --ws-word-needs-work: var(--ws-chart-needs-work);
795
800
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
796
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
797
801
  --ws-rating-middle: var(--color-text-interactive);
798
802
  --ws-raised-sunk: var(--ws-surface-press);
799
803
  --ws-edge-hover: var(--color-text-muted);
@@ -802,7 +806,7 @@
802
806
  --ws-agent-tally: var(--color-text-heading);
803
807
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
804
808
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
805
- --ws-shimmer-ground: var(--ws-track);
809
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
806
810
  --ws-inverse: var(--color-bg-dark);
807
811
  --ws-on-inverse: var(--color-white);
808
812
  --ws-chart-rest: var(--ws-edge-card);
@@ -832,6 +836,7 @@
832
836
  --ws-tint-accent: var(--color-surface);
833
837
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
834
838
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
839
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
835
840
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
836
841
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
837
842
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -880,12 +885,11 @@
880
885
  --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
881
886
  --ws-word-needs-work: var(--ws-chart-needs-work);
882
887
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
883
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
884
888
  --ws-raised-sunk: var(--ws-surface-press);
885
889
  --ws-act-light: transparent;
886
890
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
887
891
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
888
- --ws-shimmer-ground: var(--ws-track);
892
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
889
893
  --ws-inverse: var(--color-bg-dark);
890
894
  --ws-on-inverse: var(--color-white);
891
895
  --ws-chart-rest: var(--ws-edge-card);
@@ -940,6 +944,7 @@
940
944
  --ws-tint-accent: var(--color-surface);
941
945
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
942
946
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
947
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
943
948
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
944
949
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
945
950
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1008,7 +1013,6 @@
1008
1013
  --ws-chart-alert: #FF5470;
1009
1014
  --ws-word-needs-work: var(--ws-chart-needs-work);
1010
1015
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1011
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
1012
1016
  --ws-rating-middle: var(--color-text-interactive);
1013
1017
  --ws-raised-sunk: var(--ws-surface-press);
1014
1018
  --ws-edge-hover: var(--color-text-muted);
@@ -1017,7 +1021,7 @@
1017
1021
  --ws-agent-tally: var(--color-text-heading);
1018
1022
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1019
1023
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1020
- --ws-shimmer-ground: var(--ws-track);
1024
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
1021
1025
  --ws-inverse: var(--color-bg-dark);
1022
1026
  --ws-on-inverse: var(--color-white);
1023
1027
  --ws-chart-rest: var(--ws-edge-card);
@@ -1047,6 +1051,7 @@
1047
1051
  --ws-tint-accent: var(--color-surface);
1048
1052
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
1049
1053
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
1054
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
1050
1055
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
1051
1056
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
1052
1057
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1095,12 +1100,11 @@
1095
1100
  --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
1096
1101
  --ws-word-needs-work: var(--ws-chart-needs-work);
1097
1102
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1098
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
1099
1103
  --ws-raised-sunk: var(--ws-surface-press);
1100
1104
  --ws-act-light: transparent;
1101
1105
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1102
1106
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1103
- --ws-shimmer-ground: var(--ws-track);
1107
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
1104
1108
  --ws-inverse: var(--color-bg-dark);
1105
1109
  --ws-on-inverse: var(--color-white);
1106
1110
  --ws-chart-rest: var(--ws-edge-card);
@@ -1266,6 +1270,7 @@
1266
1270
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1267
1271
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1268
1272
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1273
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1269
1274
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1270
1275
  --ws-card-tint-done: var(--ws-tint-live);
1271
1276
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1308,6 +1313,7 @@
1308
1313
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1309
1314
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1310
1315
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1316
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1311
1317
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1312
1318
  --ws-card-tint-done: var(--ws-tint-live);
1313
1319
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1346,6 +1352,7 @@
1346
1352
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1347
1353
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1348
1354
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1355
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1349
1356
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1350
1357
  --ws-card-tint-done: var(--ws-tint-live);
1351
1358
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1388,6 +1395,7 @@
1388
1395
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1389
1396
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1390
1397
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1398
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1391
1399
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1392
1400
  --ws-card-tint-done: var(--ws-tint-live);
1393
1401
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
package/tokens/tokens.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Fello brand tokens
2
2
 
3
- Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, tokens/_product.css and tokens/_dark.css. 422 tokens: 111 kit, 311 product layer (`--ws-*`); the dark theme re-points 99 (night) and 42 more on the navy ground.
3
+ Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, tokens/_product.css and tokens/_dark.css. 424 tokens: 111 kit, 313 product layer (`--ws-*`); the dark theme re-points 99 (night) and 43 more on the navy ground.
4
4
 
5
5
  Use these through `var(--token)` or the Tailwind utility of the same name.
6
6
  Never write a raw hex, px font-size, or one-off shadow in a Fello project.
@@ -200,6 +200,7 @@ The names every product screen is built from (design-system/ says when to use ea
200
200
  | `--ws-tint-accent` | `color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c)` |
201
201
  | `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface))` |
202
202
  | `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface))` |
203
+ | `--ws-tint-alert` | `color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface))` |
203
204
  | `--ws-edge` | `var(--color-gray-stroke)` |
204
205
  | `--ws-edge-card` | `var(--color-gray-3)` |
205
206
  | `--ws-edge-card-1x` | `color-mix(in srgb, var(--ws-edge-card) 50%, transparent)` |
@@ -273,8 +274,8 @@ The names every product screen is built from (design-system/ says when to use ea
273
274
  | `--ws-rating-strong` | `var(--color-stat-positive)` |
274
275
  | `--ws-rating-middle` | `var(--color-brand-mid-blue)` |
275
276
  | `--ws-rating-needs-work` | `var(--ws-chart-needs-work)` |
276
- | `--ws-shimmer-ground` | `color-mix(in srgb, var(--ws-tray) 96%, #d4700c)` |
277
- | `--ws-shimmer` | `linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%)` |
277
+ | `--ws-shimmer-ground` | `var(--ws-ghost)` |
278
+ | `--ws-shimmer` | `linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%)` |
278
279
  | `--ws-card-tint-blue` | `color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface))` |
279
280
  | `--ws-card-tint-done` | `color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface))` |
280
281
  | `--ws-scrim` | `color-mix(in srgb, var(--color-text-heading) 35%, transparent)` |
@@ -347,6 +348,7 @@ The names every product screen is built from (design-system/ says when to use ea
347
348
  | `--ws-shadow-menu` | `var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)` |
348
349
  | `--ws-shadow-tip` | `var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent)` |
349
350
  | `--ws-shadow-float` | `var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent)` |
351
+ | `--ws-shadow-rise` | `var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)` |
350
352
  | `--ws-shadow-bar` | `var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent)` |
351
353
  | `--ws-hover-faint` | `color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent)` |
352
354
  | `--ws-hover` | `color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent)` |
@@ -558,6 +560,7 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
558
560
  | `--ws-tint-accent` | `var(--color-surface)` |
559
561
  | `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page))` |
560
562
  | `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page))` |
563
+ | `--ws-tint-alert` | `color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page))` |
561
564
  | `--ws-card-tint-blue` | `color-mix(in srgb, var(--color-bg-page) 90%, #879bf4)` |
562
565
  | `--ws-card-tint-done` | `color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page))` |
563
566
  | `--ws-track` | `color-mix(in srgb, var(--ws-tray) 80%, #0a1215)` |
@@ -626,7 +629,6 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
626
629
  | `--ws-chart-alert` | `#FF5470` |
627
630
  | `--ws-word-needs-work` | `var(--ws-chart-needs-work)` |
628
631
  | `--ws-tint-needs-work` | `color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page))` |
629
- | `--ws-shimmer` | `linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%)` |
630
632
  | `--ws-rating-middle` | `var(--color-text-interactive)` |
631
633
  | `--ws-raised-sunk` | `var(--ws-surface-press)` |
632
634
  | `--ws-edge-hover` | `var(--color-text-muted)` |
@@ -635,7 +637,7 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
635
637
  | `--ws-agent-tally` | `var(--color-text-heading)` |
636
638
  | `--ws-mark-muted` | `color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page))` |
637
639
  | `--ws-control-off` | `color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59)` |
638
- | `--ws-shimmer-ground` | `var(--ws-track)` |
640
+ | `--ws-shimmer` | `linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%)` |
639
641
  | `--ws-inverse` | `var(--color-bg-dark)` |
640
642
  | `--ws-on-inverse` | `var(--color-white)` |
641
643
  | `--ws-chart-rest` | `var(--ws-edge-card)` |
@@ -662,6 +664,7 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
662
664
  | `--ws-tint-accent` | `color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white))` |
663
665
  | `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page))` |
664
666
  | `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page))` |
667
+ | `--ws-tint-alert` | `color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page))` |
665
668
  | `--ws-card-tint-blue` | `color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page))` |
666
669
  | `--ws-card-tint-done` | `var(--ws-tint-live)` |
667
670
  | `--ws-track` | `color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white))` |
@@ -703,21 +706,21 @@ tone uses the word token here (D2).
703
706
 
704
707
  ### Light
705
708
 
706
- | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
707
- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
708
- | `--color-text-heading` | `#093555` | 12.34 | 12.71 | 11.28 | 10.86 | 12.34 | 10.37 | 10.23 | 10.86 | 11.28 | 11.62 | 11.55 | 10.85 | 10.97 | 11.19 | 11.28 | 11.15 | 11.48 | 11.62 | 10.21 | 9.36 | 9.83 |
709
- | `--color-text-body` | `#545454` | 7.35 | 7.57 | 6.72 | 6.47 | 7.35 | 6.18 | 6.10 | 6.47 | 6.72 | 6.92 | 6.88 | 6.46 | 6.54 | 6.66 | 6.72 | 6.65 | 6.84 | 6.92 | 6.08 | 5.57 | 5.86 |
710
- | `--color-text-muted` | `#666666` | 5.57 | 5.74 | 5.10 | 4.90 | 5.57 | 4.69 | 4.62 | 4.90 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.05 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.23 (fails) | 4.44 (fails) |
711
- | `--color-text-interactive` | `#495883` | 6.78 | 6.98 | 6.20 | 5.97 | 6.78 | 5.70 | 5.62 | 5.97 | 6.20 | 6.39 | 6.35 | 5.96 | 6.03 | 6.15 | 6.20 | 6.13 | 6.31 | 6.39 | 5.61 | 5.14 | 5.40 |
712
- | `--color-text-brand-strong` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.14 (fails) | 4.35 (fails) |
713
- | `--color-text-error-strong` | `#a74b39` | 5.50 | 5.66 | 5.03 | 4.84 | 5.50 | 4.62 | 4.56 | 4.84 | 5.03 | 5.18 | 5.14 | 4.83 | 4.89 | 4.98 | 5.03 | 4.97 | 5.12 | 5.18 | 4.55 | 4.17 (fails) | 4.38 (fails) |
714
- | `--color-text-success-strong` | `#3c601b` | 7.07 | 7.29 | 6.47 | 6.23 | 7.07 | 5.95 | 5.87 | 6.23 | 6.47 | 6.66 | 6.62 | 6.22 | 6.29 | 6.41 | 6.47 | 6.40 | 6.59 | 6.66 | 5.85 | 5.36 | 5.64 |
715
- | `--ws-word-needs` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.14 (fails) | 4.35 (fails) |
716
- | `--ws-word-positive` | `#09717a` | 5.58 | 5.75 | 5.10 | 4.91 | 5.58 | 4.69 | 4.63 | 4.91 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.06 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.23 (fails) | 4.44 (fails) |
717
- | `--ws-word-needs-work` | `#b42d68` | 5.80 | 5.97 | 5.30 | 5.10 | 5.80 | 4.87 | 4.81 | 5.10 | 5.30 | 5.46 | 5.43 | 5.10 | 5.16 | 5.26 | 5.30 | 5.24 | 5.40 | 5.46 | 4.80 | 4.40 (fails) | 4.62 |
718
- | `--ws-word-alert` | `#b1042f` | 6.96 | 7.17 | 6.37 | 6.13 | 6.96 | 5.85 | 5.77 | 6.13 | 6.37 | 6.56 | 6.52 | 6.12 | 6.19 | 6.31 | 6.37 | 6.29 | 6.48 | 6.56 | 5.76 | 5.28 | 5.55 |
719
- | `--ws-word-past-half` | `#6d4fc2` | 5.74 | 5.92 | 5.25 | 5.06 | 5.74 | 4.83 | 4.76 | 5.06 | 5.25 | 5.41 | 5.38 | 5.05 | 5.11 | 5.21 | 5.25 | 5.19 | 5.35 | 5.41 | 4.75 | 4.36 (fails) | 4.58 |
720
- | `--ws-word-answer` | `#3d3d3d` | 10.54 | 10.86 | 9.64 | 9.28 | 10.54 | 8.87 | 8.74 | 9.28 | 9.64 | 9.93 | 9.87 | 9.27 | 9.38 | 9.56 | 9.64 | 9.53 | 9.81 | 9.93 | 8.72 | 7.99 | 8.40 |
709
+ | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | alert tint | success | well hover |
710
+ | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
711
+ | `--color-text-heading` | `#093555` | 12.34 | 12.71 | 11.28 | 10.86 | 12.34 | 10.37 | 10.23 | 10.86 | 11.28 | 11.62 | 11.55 | 10.85 | 10.97 | 11.19 | 11.28 | 11.15 | 11.48 | 11.62 | 10.21 | 10.98 | 9.36 | 9.83 |
712
+ | `--color-text-body` | `#545454` | 7.35 | 7.57 | 6.72 | 6.47 | 7.35 | 6.18 | 6.10 | 6.47 | 6.72 | 6.92 | 6.88 | 6.46 | 6.54 | 6.66 | 6.72 | 6.65 | 6.84 | 6.92 | 6.08 | 6.54 | 5.57 | 5.86 |
713
+ | `--color-text-muted` | `#666666` | 5.57 | 5.74 | 5.10 | 4.90 | 5.57 | 4.69 | 4.62 | 4.90 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.05 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.96 | 4.23 (fails) | 4.44 (fails) |
714
+ | `--color-text-interactive` | `#495883` | 6.78 | 6.98 | 6.20 | 5.97 | 6.78 | 5.70 | 5.62 | 5.97 | 6.20 | 6.39 | 6.35 | 5.96 | 6.03 | 6.15 | 6.20 | 6.13 | 6.31 | 6.39 | 5.61 | 6.03 | 5.14 | 5.40 |
715
+ | `--color-text-brand-strong` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.86 | 4.14 (fails) | 4.35 (fails) |
716
+ | `--color-text-error-strong` | `#a74b39` | 5.50 | 5.66 | 5.03 | 4.84 | 5.50 | 4.62 | 4.56 | 4.84 | 5.03 | 5.18 | 5.14 | 4.83 | 4.89 | 4.98 | 5.03 | 4.97 | 5.12 | 5.18 | 4.55 | 4.89 | 4.17 (fails) | 4.38 (fails) |
717
+ | `--color-text-success-strong` | `#3c601b` | 7.07 | 7.29 | 6.47 | 6.23 | 7.07 | 5.95 | 5.87 | 6.23 | 6.47 | 6.66 | 6.62 | 6.22 | 6.29 | 6.41 | 6.47 | 6.40 | 6.59 | 6.66 | 5.85 | 6.30 | 5.36 | 5.64 |
718
+ | `--ws-word-needs` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.86 | 4.14 (fails) | 4.35 (fails) |
719
+ | `--ws-word-positive` | `#09717a` | 5.58 | 5.75 | 5.10 | 4.91 | 5.58 | 4.69 | 4.63 | 4.91 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.06 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.97 | 4.23 (fails) | 4.44 (fails) |
720
+ | `--ws-word-needs-work` | `#b42d68` | 5.80 | 5.97 | 5.30 | 5.10 | 5.80 | 4.87 | 4.81 | 5.10 | 5.30 | 5.46 | 5.43 | 5.10 | 5.16 | 5.26 | 5.30 | 5.24 | 5.40 | 5.46 | 4.80 | 5.16 | 4.40 (fails) | 4.62 |
721
+ | `--ws-word-alert` | `#b1042f` | 6.96 | 7.17 | 6.37 | 6.13 | 6.96 | 5.85 | 5.77 | 6.13 | 6.37 | 6.56 | 6.52 | 6.12 | 6.19 | 6.31 | 6.37 | 6.29 | 6.48 | 6.56 | 5.76 | 6.20 | 5.28 | 5.55 |
722
+ | `--ws-word-past-half` | `#6d4fc2` | 5.74 | 5.92 | 5.25 | 5.06 | 5.74 | 4.83 | 4.76 | 5.06 | 5.25 | 5.41 | 5.38 | 5.05 | 5.11 | 5.21 | 5.25 | 5.19 | 5.35 | 5.41 | 4.75 | 5.11 | 4.36 (fails) | 4.58 |
723
+ | `--ws-word-answer` | `#3d3d3d` | 10.54 | 10.86 | 9.64 | 9.28 | 10.54 | 8.87 | 8.74 | 9.28 | 9.64 | 9.93 | 9.87 | 9.27 | 9.38 | 9.56 | 9.64 | 9.53 | 9.81 | 9.93 | 8.72 | 9.39 | 7.99 | 8.40 |
721
724
 
722
725
  - `--color-text-placeholder` on `--ws-field`: 5.10:1
723
726
  - `--ws-field-ink` on `--ws-field`: 14.55:1
@@ -725,27 +728,28 @@ tone uses the word token here (D2).
725
728
  - `--ws-word-needs` on `--ws-tint-needs`: 5.11:1
726
729
  - `--ws-word-positive` on `--ws-tint-live`: 4.90:1
727
730
  - `--ws-word-needs-work` on `--ws-tint-needs-work`: 4.80:1
731
+ - `--ws-word-alert` on `--ws-tint-alert`: 6.20:1
728
732
  - `--color-text-success-strong` on `--color-feedback-success-bg`: 5.36:1
729
733
  - `--ws-on-act` on `--ws-agent-tally`: 9.26:1
730
734
 
731
735
 
732
736
  ### Night
733
737
 
734
- | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
735
- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
736
- | `--color-text-heading` | `#e8edf3` | 15.09 | 14.34 | 13.55 | 12.24 | 13.71 | 16.13 | 12.24 | 15.77 | 12.24 | 14.34 | 12.61 | 12.73 | 12.94 | 13.04 | 15.64 | 14.64 | 12.24 | 14.34 | 11.55 | 12.08 | 10.62 |
737
- | `--color-text-body` | `#b0bbc7` | 9.12 | 8.66 | 8.19 | 7.39 | 8.29 | 9.74 | 7.39 | 9.53 | 7.39 | 8.66 | 7.62 | 7.69 | 7.82 | 7.88 | 9.45 | 8.85 | 7.39 | 8.66 | 6.98 | 7.30 | 6.42 |
738
- | `--color-text-muted` | `#8494a5` | 5.72 | 5.43 | 5.14 | 4.64 | 5.20 | 6.11 | 4.64 | 5.98 | 4.64 | 5.43 | 4.78 | 4.83 | 4.90 | 4.94 | 5.93 | 5.55 | 4.64 | 5.43 | 4.38 (fails) | 4.58 | 4.03 (fails) |
739
- | `--color-text-interactive` | `#93a6dc` | 7.38 | 7.02 | 6.63 | 5.99 | 6.71 | 7.89 | 5.99 | 7.72 | 5.99 | 7.02 | 6.17 | 6.23 | 6.33 | 6.38 | 7.65 | 7.16 | 5.99 | 7.02 | 5.65 | 5.91 | 5.20 |
740
- | `--color-text-brand-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
741
- | `--color-text-error-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
742
- | `--color-text-success-strong` | `#9bcf72` | 9.78 | 9.29 | 8.78 | 7.93 | 8.89 | 10.45 | 7.93 | 10.22 | 7.93 | 9.29 | 8.18 | 8.25 | 8.38 | 8.45 | 10.14 | 9.49 | 7.93 | 9.29 | 7.49 | 7.83 | 6.89 |
743
- | `--ws-word-needs` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
744
- | `--ws-word-positive` | `#4fc7be` | 8.66 | 8.24 | 7.78 | 7.03 | 7.88 | 9.26 | 7.03 | 9.06 | 7.03 | 8.24 | 7.24 | 7.31 | 7.43 | 7.49 | 8.98 | 8.41 | 7.03 | 8.24 | 6.63 | 6.94 | 6.10 |
745
- | `--ws-word-needs-work` | `#f370a4` | 6.48 | 6.16 | 5.82 | 5.26 | 5.89 | 6.93 | 5.26 | 6.78 | 5.26 | 6.16 | 5.42 | 5.47 | 5.56 | 5.60 | 6.72 | 6.29 | 5.26 | 6.16 | 4.96 | 5.19 | 4.57 |
746
- | `--ws-word-alert` | `#ff5470` | 5.71 | 5.43 | 5.13 | 4.63 | 5.19 | 6.11 | 4.63 | 5.97 | 4.63 | 5.43 | 4.78 | 4.82 | 4.90 | 4.94 | 5.92 | 5.54 | 4.63 | 5.43 | 4.37 (fails) | 4.57 | 4.02 (fails) |
747
- | `--ws-word-past-half` | `#9a84ee` | 5.84 | 5.55 | 5.25 | 4.74 | 5.31 | 6.25 | 4.74 | 6.11 | 4.74 | 5.55 | 4.89 | 4.93 | 5.01 | 5.05 | 6.06 | 5.67 | 4.74 | 5.55 | 4.47 (fails) | 4.68 | 4.12 (fails) |
748
- | `--ws-word-answer` | `#c9d1db` | 11.52 | 10.95 | 10.35 | 9.35 | 10.48 | 12.32 | 9.35 | 12.05 | 9.35 | 10.95 | 9.64 | 9.73 | 9.88 | 9.96 | 11.95 | 11.18 | 9.35 | 10.95 | 8.82 | 9.23 | 8.12 |
738
+ | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | alert tint | success | well hover |
739
+ | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
740
+ | `--color-text-heading` | `#e8edf3` | 15.09 | 14.34 | 13.55 | 12.24 | 13.71 | 16.13 | 12.24 | 15.77 | 12.24 | 14.34 | 12.61 | 12.73 | 12.94 | 13.04 | 15.64 | 14.64 | 12.24 | 14.34 | 11.55 | 13.02 | 12.08 | 10.62 |
741
+ | `--color-text-body` | `#b0bbc7` | 9.12 | 8.66 | 8.19 | 7.39 | 8.29 | 9.74 | 7.39 | 9.53 | 7.39 | 8.66 | 7.62 | 7.69 | 7.82 | 7.88 | 9.45 | 8.85 | 7.39 | 8.66 | 6.98 | 7.87 | 7.30 | 6.42 |
742
+ | `--color-text-muted` | `#8494a5` | 5.72 | 5.43 | 5.14 | 4.64 | 5.20 | 6.11 | 4.64 | 5.98 | 4.64 | 5.43 | 4.78 | 4.83 | 4.90 | 4.94 | 5.93 | 5.55 | 4.64 | 5.43 | 4.38 (fails) | 4.93 | 4.58 | 4.03 (fails) |
743
+ | `--color-text-interactive` | `#93a6dc` | 7.38 | 7.02 | 6.63 | 5.99 | 6.71 | 7.89 | 5.99 | 7.72 | 5.99 | 7.02 | 6.17 | 6.23 | 6.33 | 6.38 | 7.65 | 7.16 | 5.99 | 7.02 | 5.65 | 6.37 | 5.91 | 5.20 |
744
+ | `--color-text-brand-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.73 | 6.24 | 5.49 |
745
+ | `--color-text-error-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.73 | 6.24 | 5.49 |
746
+ | `--color-text-success-strong` | `#9bcf72` | 9.78 | 9.29 | 8.78 | 7.93 | 8.89 | 10.45 | 7.93 | 10.22 | 7.93 | 9.29 | 8.18 | 8.25 | 8.38 | 8.45 | 10.14 | 9.49 | 7.93 | 9.29 | 7.49 | 8.44 | 7.83 | 6.89 |
747
+ | `--ws-word-needs` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.73 | 6.24 | 5.49 |
748
+ | `--ws-word-positive` | `#4fc7be` | 8.66 | 8.24 | 7.78 | 7.03 | 7.88 | 9.26 | 7.03 | 9.06 | 7.03 | 8.24 | 7.24 | 7.31 | 7.43 | 7.49 | 8.98 | 8.41 | 7.03 | 8.24 | 6.63 | 7.48 | 6.94 | 6.10 |
749
+ | `--ws-word-needs-work` | `#f370a4` | 6.48 | 6.16 | 5.82 | 5.26 | 5.89 | 6.93 | 5.26 | 6.78 | 5.26 | 6.16 | 5.42 | 5.47 | 5.56 | 5.60 | 6.72 | 6.29 | 5.26 | 6.16 | 4.96 | 5.59 | 5.19 | 4.57 |
750
+ | `--ws-word-alert` | `#ff5470` | 5.71 | 5.43 | 5.13 | 4.63 | 5.19 | 6.11 | 4.63 | 5.97 | 4.63 | 5.43 | 4.78 | 4.82 | 4.90 | 4.94 | 5.92 | 5.54 | 4.63 | 5.43 | 4.37 (fails) | 4.93 | 4.57 | 4.02 (fails) |
751
+ | `--ws-word-past-half` | `#9a84ee` | 5.84 | 5.55 | 5.25 | 4.74 | 5.31 | 6.25 | 4.74 | 6.11 | 4.74 | 5.55 | 4.89 | 4.93 | 5.01 | 5.05 | 6.06 | 5.67 | 4.74 | 5.55 | 4.47 (fails) | 5.04 | 4.68 | 4.12 (fails) |
752
+ | `--ws-word-answer` | `#c9d1db` | 11.52 | 10.95 | 10.35 | 9.35 | 10.48 | 12.32 | 9.35 | 12.05 | 9.35 | 10.95 | 9.64 | 9.73 | 9.88 | 9.96 | 11.95 | 11.18 | 9.35 | 10.95 | 8.82 | 9.95 | 9.23 | 8.12 |
749
753
 
750
754
  - `--color-text-placeholder` on `--ws-field`: 5.98:1
751
755
  - `--ws-field-ink` on `--ws-field`: 14.91:1
@@ -753,27 +757,28 @@ tone uses the word token here (D2).
753
757
  - `--ws-word-needs` on `--ws-tint-needs`: 6.52:1
754
758
  - `--ws-word-positive` on `--ws-tint-live`: 7.31:1
755
759
  - `--ws-word-needs-work` on `--ws-tint-needs-work`: 4.96:1
760
+ - `--ws-word-alert` on `--ws-tint-alert`: 4.93:1
756
761
  - `--color-text-success-strong` on `--color-feedback-success-bg`: 7.83:1
757
762
  - `--ws-on-act` on `--ws-agent-tally`: 15.09:1
758
763
 
759
764
 
760
765
  ### Navy ground
761
766
 
762
- | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
763
- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
764
- | `--color-text-heading` | `#ffffff` | 17.55 | 15.55 | 13.32 | 10.86 | 14.26 | 17.55 | 10.86 | 15.03 | 10.86 | 15.03 | 13.83 | 14.39 | 14.49 | 14.39 | 15.55 | 15.03 | 12.56 | 15.03 | 13.82 | 14.22 | 12.51 |
765
- | `--color-text-body` | `#d3d3d3` | 11.73 | 10.39 | 8.90 | 7.25 | 9.52 | 11.73 | 7.25 | 10.04 | 7.25 | 10.04 | 9.24 | 9.61 | 9.68 | 9.61 | 10.39 | 10.04 | 8.39 | 10.04 | 9.23 | 9.50 | 8.36 |
766
- | `--color-text-muted` | `#a9a9a9` | 7.47 | 6.62 | 5.67 | 4.62 | 6.07 | 7.47 | 4.62 | 6.40 | 4.62 | 6.40 | 5.89 | 6.12 | 6.16 | 6.12 | 6.62 | 6.40 | 5.34 | 6.40 | 5.88 | 6.05 | 5.32 |
767
- | `--color-text-interactive` | `#93a6dc` | 7.30 | 6.46 | 5.54 | 4.51 | 5.93 | 7.30 | 4.51 | 6.25 | 4.51 | 6.25 | 5.75 | 5.98 | 6.02 | 5.98 | 6.46 | 6.25 | 5.22 | 6.25 | 5.74 | 5.91 | 5.20 |
768
- | `--color-text-brand-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
769
- | `--color-text-error-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
770
- | `--color-text-success-strong` | `#9bcf72` | 9.66 | 8.56 | 7.33 | 5.98 | 7.85 | 9.66 | 5.98 | 8.28 | 5.98 | 8.28 | 7.62 | 7.92 | 7.98 | 7.92 | 8.56 | 8.28 | 6.91 | 8.28 | 7.61 | 7.83 | 6.89 |
771
- | `--ws-word-needs` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
772
- | `--ws-word-positive` | `#4fc7be` | 8.56 | 7.59 | 6.50 | 5.30 | 6.96 | 8.56 | 5.30 | 7.33 | 5.30 | 7.33 | 6.75 | 7.02 | 7.07 | 7.02 | 7.59 | 7.33 | 6.13 | 7.33 | 6.74 | 6.94 | 6.10 |
773
- | `--ws-word-needs-work` | `#f583b0` | 7.32 | 6.48 | 5.55 | 4.53 | 5.94 | 7.32 | 4.53 | 6.27 | 4.53 | 6.27 | 5.77 | 6.00 | 6.04 | 6.00 | 6.48 | 6.27 | 5.24 | 6.27 | 5.76 | 5.93 | 5.22 |
774
- | `--ws-word-alert` | `#ff8282` | 7.33 | 6.49 | 5.56 | 4.53 | 5.95 | 7.33 | 4.53 | 6.28 | 4.53 | 6.28 | 5.78 | 6.01 | 6.05 | 6.01 | 6.49 | 6.28 | 5.24 | 6.28 | 5.77 | 5.94 | 5.22 |
775
- | `--ws-word-past-half` | `#ad9bf1` | 7.30 | 6.47 | 5.54 | 4.52 | 5.93 | 7.30 | 4.52 | 6.25 | 4.52 | 6.25 | 5.75 | 5.99 | 6.03 | 5.99 | 6.47 | 6.25 | 5.22 | 6.25 | 5.75 | 5.92 | 5.20 |
776
- | `--ws-word-answer` | `#e9e9e9` | 14.46 | 12.81 | 10.97 | 8.94 | 11.74 | 14.46 | 8.94 | 12.38 | 8.94 | 12.38 | 11.39 | 11.85 | 11.93 | 11.85 | 12.81 | 12.38 | 10.34 | 12.38 | 11.38 | 11.72 | 10.30 |
767
+ | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | alert tint | success | well hover |
768
+ | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
769
+ | `--color-text-heading` | `#ffffff` | 17.55 | 15.55 | 13.32 | 10.86 | 14.26 | 17.55 | 10.86 | 15.03 | 10.86 | 15.03 | 13.83 | 14.39 | 14.49 | 14.39 | 15.55 | 15.03 | 12.56 | 15.03 | 13.82 | 14.53 | 14.22 | 12.51 |
770
+ | `--color-text-body` | `#d3d3d3` | 11.73 | 10.39 | 8.90 | 7.25 | 9.52 | 11.73 | 7.25 | 10.04 | 7.25 | 10.04 | 9.24 | 9.61 | 9.68 | 9.61 | 10.39 | 10.04 | 8.39 | 10.04 | 9.23 | 9.71 | 9.50 | 8.36 |
771
+ | `--color-text-muted` | `#a9a9a9` | 7.47 | 6.62 | 5.67 | 4.62 | 6.07 | 7.47 | 4.62 | 6.40 | 4.62 | 6.40 | 5.89 | 6.12 | 6.16 | 6.12 | 6.62 | 6.40 | 5.34 | 6.40 | 5.88 | 6.18 | 6.05 | 5.32 |
772
+ | `--color-text-interactive` | `#93a6dc` | 7.30 | 6.46 | 5.54 | 4.51 | 5.93 | 7.30 | 4.51 | 6.25 | 4.51 | 6.25 | 5.75 | 5.98 | 6.02 | 5.98 | 6.46 | 6.25 | 5.22 | 6.25 | 5.74 | 6.04 | 5.91 | 5.20 |
773
+ | `--color-text-brand-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.38 | 6.24 | 5.49 |
774
+ | `--color-text-error-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.38 | 6.24 | 5.49 |
775
+ | `--color-text-success-strong` | `#9bcf72` | 9.66 | 8.56 | 7.33 | 5.98 | 7.85 | 9.66 | 5.98 | 8.28 | 5.98 | 8.28 | 7.62 | 7.92 | 7.98 | 7.92 | 8.56 | 8.28 | 6.91 | 8.28 | 7.61 | 8.00 | 7.83 | 6.89 |
776
+ | `--ws-word-needs` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.38 | 6.24 | 5.49 |
777
+ | `--ws-word-positive` | `#4fc7be` | 8.56 | 7.59 | 6.50 | 5.30 | 6.96 | 8.56 | 5.30 | 7.33 | 5.30 | 7.33 | 6.75 | 7.02 | 7.07 | 7.02 | 7.59 | 7.33 | 6.13 | 7.33 | 6.74 | 7.09 | 6.94 | 6.10 |
778
+ | `--ws-word-needs-work` | `#f583b0` | 7.32 | 6.48 | 5.55 | 4.53 | 5.94 | 7.32 | 4.53 | 6.27 | 4.53 | 6.27 | 5.77 | 6.00 | 6.04 | 6.00 | 6.48 | 6.27 | 5.24 | 6.27 | 5.76 | 6.06 | 5.93 | 5.22 |
779
+ | `--ws-word-alert` | `#ff8282` | 7.33 | 6.49 | 5.56 | 4.53 | 5.95 | 7.33 | 4.53 | 6.28 | 4.53 | 6.28 | 5.78 | 6.01 | 6.05 | 6.01 | 6.49 | 6.28 | 5.24 | 6.28 | 5.77 | 6.07 | 5.94 | 5.22 |
780
+ | `--ws-word-past-half` | `#ad9bf1` | 7.30 | 6.47 | 5.54 | 4.52 | 5.93 | 7.30 | 4.52 | 6.25 | 4.52 | 6.25 | 5.75 | 5.99 | 6.03 | 5.99 | 6.47 | 6.25 | 5.22 | 6.25 | 5.75 | 6.04 | 5.92 | 5.20 |
781
+ | `--ws-word-answer` | `#e9e9e9` | 14.46 | 12.81 | 10.97 | 8.94 | 11.74 | 14.46 | 8.94 | 12.38 | 8.94 | 12.38 | 11.39 | 11.85 | 11.93 | 11.85 | 12.81 | 12.38 | 10.34 | 12.38 | 11.38 | 11.97 | 11.72 | 10.30 |
777
782
 
778
783
  - `--color-text-placeholder` on `--ws-field`: 5.10:1
779
784
  - `--ws-field-ink` on `--ws-field`: 12.71:1
@@ -781,6 +786,7 @@ tone uses the word token here (D2).
781
786
  - `--ws-word-needs` on `--ws-tint-needs`: 6.07:1
782
787
  - `--ws-word-positive` on `--ws-tint-live`: 7.02:1
783
788
  - `--ws-word-needs-work` on `--ws-tint-needs-work`: 5.76:1
789
+ - `--ws-word-alert` on `--ws-tint-alert`: 6.07:1
784
790
  - `--color-text-success-strong` on `--color-feedback-success-bg`: 7.83:1
785
791
  - `--ws-on-act` on `--ws-agent-tally`: 17.55:1
786
792