@felloinnovations/brand-kit 0.4.0 → 0.5.1

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 (363) hide show
  1. package/AGENTS.md +198 -24
  2. package/CHANGELOG.md +221 -0
  3. package/README.md +38 -9
  4. package/design-system/01-how-claude-decides.md +26 -17
  5. package/design-system/02-principles.md +11 -6
  6. package/design-system/03-colour.md +135 -47
  7. package/design-system/04-type.md +45 -23
  8. package/design-system/05-space-and-layout.md +175 -52
  9. package/design-system/06-sizing-profiles.md +4 -4
  10. package/design-system/07-scrolling.md +66 -20
  11. package/design-system/08-choosing-components.md +50 -22
  12. package/design-system/09-charts.md +71 -28
  13. package/design-system/10-patterns.md +33 -10
  14. package/design-system/11-page-recipes.md +110 -23
  15. package/design-system/12-content.md +2 -1
  16. package/design-system/13-motion.md +330 -47
  17. package/design-system/14-accessibility.md +47 -24
  18. package/design-system/15-ai-experiences.md +11 -6
  19. package/design-system/16-creativity.md +1 -1
  20. package/design-system/17-decisions.md +367 -1
  21. package/design-system/18-checklist.md +79 -16
  22. package/design-system/19-public-pages.md +6 -4
  23. package/design-system/20-palettes.md +275 -0
  24. package/design-system/README.md +30 -17
  25. package/design-system/components/ActionList/README.md +96 -10
  26. package/design-system/components/ActionList/preview.html +52 -7
  27. package/design-system/components/ActionList/style.css +64 -0
  28. package/design-system/components/ActivityGrid/README.md +38 -2
  29. package/design-system/components/ActivityGrid/preview.html +1 -1
  30. package/design-system/components/ActivityGrid/style.css +35 -0
  31. package/design-system/components/AppShell/README.md +205 -75
  32. package/design-system/components/AppShell/preview.html +339 -58
  33. package/design-system/components/AppShell/style.css +154 -0
  34. package/design-system/components/Avatar/README.md +37 -10
  35. package/design-system/components/Avatar/preview.html +13 -4
  36. package/design-system/components/Avatar/style.css +14 -0
  37. package/design-system/components/Badge/README.md +41 -19
  38. package/design-system/components/Badge/preview.html +13 -10
  39. package/design-system/components/Badge/style.css +23 -0
  40. package/design-system/components/Banner/README.md +30 -9
  41. package/design-system/components/Banner/preview.html +1 -1
  42. package/design-system/components/Banner/style.css +19 -0
  43. package/design-system/components/Breadcrumb/README.md +58 -46
  44. package/design-system/components/Breadcrumb/preview.html +16 -16
  45. package/design-system/components/Breadcrumb/style.css +17 -0
  46. package/design-system/components/Button/README.md +113 -55
  47. package/design-system/components/Button/preview.html +98 -25
  48. package/design-system/components/Button/style.css +86 -0
  49. package/design-system/components/Card/README.md +158 -49
  50. package/design-system/components/Card/preview.html +141 -19
  51. package/design-system/components/Card/style.css +115 -0
  52. package/design-system/components/CardBoard/README.md +58 -37
  53. package/design-system/components/CardBoard/preview.html +26 -29
  54. package/design-system/components/ChatCard/README.md +115 -29
  55. package/design-system/components/ChatCard/preview.html +149 -32
  56. package/design-system/components/ChatCard/style.css +49 -0
  57. package/design-system/components/ChatShell/README.md +116 -0
  58. package/design-system/components/ChatShell/preview.html +201 -0
  59. package/design-system/components/ChatShell/style.css +86 -0
  60. package/design-system/components/ChatTurn/README.md +78 -35
  61. package/design-system/components/ChatTurn/preview.html +60 -28
  62. package/design-system/components/ChatTurn/style.css +50 -0
  63. package/design-system/components/CheckRow/README.md +141 -0
  64. package/design-system/components/CheckRow/preview.html +140 -0
  65. package/design-system/components/CheckRow/style.css +88 -0
  66. package/design-system/components/Checkbox/README.md +58 -22
  67. package/design-system/components/Checkbox/preview.html +112 -50
  68. package/design-system/components/Checkbox/style.css +45 -0
  69. package/design-system/components/Chip/README.md +78 -47
  70. package/design-system/components/Chip/preview.html +29 -4
  71. package/design-system/components/Chip/style.css +17 -0
  72. package/design-system/components/Combobox/README.md +44 -11
  73. package/design-system/components/Combobox/preview.html +35 -12
  74. package/design-system/components/Combobox/style.css +54 -0
  75. package/design-system/components/Composer/README.md +137 -35
  76. package/design-system/components/Composer/preview.html +115 -40
  77. package/design-system/components/Composer/style.css +81 -0
  78. package/design-system/components/ConfirmDialog/README.md +73 -52
  79. package/design-system/components/ConfirmDialog/preview.html +70 -26
  80. package/design-system/components/ConfirmDialog/style.css +5 -0
  81. package/design-system/components/Cover/preview.html +3 -3
  82. package/design-system/components/Cover/style.css +19 -0
  83. package/design-system/components/DateInput/README.md +77 -12
  84. package/design-system/components/DateInput/preview.html +27 -12
  85. package/design-system/components/DateInput/style.css +38 -0
  86. package/design-system/components/Dialog/README.md +112 -44
  87. package/design-system/components/Dialog/preview.html +141 -18
  88. package/design-system/components/Dialog/style.css +74 -0
  89. package/design-system/components/EmptyState/README.md +42 -12
  90. package/design-system/components/EmptyState/preview.html +11 -11
  91. package/design-system/components/EmptyState/style.css +9 -0
  92. package/design-system/components/EntryShell/README.md +73 -48
  93. package/design-system/components/EntryShell/preview.html +60 -27
  94. package/design-system/components/EntryShell/style.css +19 -0
  95. package/design-system/components/FeatureGrid/README.md +61 -39
  96. package/design-system/components/FeatureGrid/preview.html +2 -2
  97. package/design-system/components/FeatureGrid/style.css +20 -0
  98. package/design-system/components/FileUpload/README.md +33 -3
  99. package/design-system/components/FileUpload/preview.html +18 -4
  100. package/design-system/components/FileUpload/style.css +23 -0
  101. package/design-system/components/FilterBar/README.md +114 -0
  102. package/design-system/components/FilterBar/preview.html +82 -0
  103. package/design-system/components/FilterBar/style.css +22 -0
  104. package/design-system/components/Fold/README.md +84 -26
  105. package/design-system/components/Fold/preview.html +77 -34
  106. package/design-system/components/Fold/style.css +48 -0
  107. package/design-system/components/Footer/README.md +62 -39
  108. package/design-system/components/Footer/preview.html +5 -5
  109. package/design-system/components/Footer/style.css +30 -0
  110. package/design-system/components/FunnelBars/README.md +24 -3
  111. package/design-system/components/FunnelBars/preview.html +5 -5
  112. package/design-system/components/FunnelBars/style.css +13 -0
  113. package/design-system/components/GoalBars/README.md +54 -10
  114. package/design-system/components/GoalBars/preview.html +69 -28
  115. package/design-system/components/GoalBars/style.css +51 -0
  116. package/design-system/components/GoalTicks/README.md +74 -58
  117. package/design-system/components/GoalTicks/preview.html +41 -118
  118. package/design-system/components/GoalTicks/style.css +37 -0
  119. package/design-system/components/GoalTubes/README.md +29 -3
  120. package/design-system/components/GoalTubes/preview.html +6 -6
  121. package/design-system/components/GoalTubes/style.css +23 -0
  122. package/design-system/components/Heatmap/README.md +133 -0
  123. package/design-system/components/Heatmap/preview.html +168 -0
  124. package/design-system/components/Heatmap/style.css +119 -0
  125. package/design-system/components/Hero/README.md +58 -40
  126. package/design-system/components/Hero/preview.html +1 -1
  127. package/design-system/components/Hero/style.css +19 -0
  128. package/design-system/components/HoverCard/README.md +114 -0
  129. package/design-system/components/HoverCard/preview.html +107 -0
  130. package/design-system/components/HoverCard/style.css +59 -0
  131. package/design-system/components/IconButton/README.md +69 -38
  132. package/design-system/components/IconButton/preview.html +77 -43
  133. package/design-system/components/IconButton/style.css +45 -0
  134. package/design-system/components/Input/README.md +36 -11
  135. package/design-system/components/Input/preview.html +1 -1
  136. package/design-system/components/Input/style.css +23 -0
  137. package/design-system/components/KanbanBoard/README.md +93 -45
  138. package/design-system/components/KanbanBoard/preview.html +159 -43
  139. package/design-system/components/KanbanBoard/style.css +53 -0
  140. package/design-system/components/Kbd/README.md +25 -9
  141. package/design-system/components/Kbd/preview.html +6 -2
  142. package/design-system/components/Kbd/style.css +9 -0
  143. package/design-system/components/KitButton/README.md +81 -47
  144. package/design-system/components/KitButton/preview.html +35 -13
  145. package/design-system/components/KitButton/style.css +46 -0
  146. package/design-system/components/KitCard/README.md +75 -44
  147. package/design-system/components/KitCard/preview.html +18 -10
  148. package/design-system/components/KitCard/style.css +15 -0
  149. package/design-system/components/KitInput/README.md +54 -39
  150. package/design-system/components/KitInput/preview.html +7 -7
  151. package/design-system/components/KitInput/style.css +23 -0
  152. package/design-system/components/Leaderboard/README.md +76 -49
  153. package/design-system/components/Leaderboard/preview.html +61 -26
  154. package/design-system/components/Leaderboard/style.css +44 -0
  155. package/design-system/components/ListDetail/README.md +222 -0
  156. package/design-system/components/ListDetail/preview.html +213 -0
  157. package/design-system/components/ListDetail/style.css +148 -0
  158. package/design-system/components/LoadBar/README.md +79 -0
  159. package/design-system/components/LoadBar/preview.html +40 -0
  160. package/design-system/components/LoadBar/style.css +17 -0
  161. package/design-system/components/MarketingNav/README.md +76 -42
  162. package/design-system/components/MarketingNav/preview.html +37 -8
  163. package/design-system/components/MarketingNav/style.css +45 -0
  164. package/design-system/components/Matrix/README.md +129 -0
  165. package/design-system/components/Matrix/preview.html +99 -0
  166. package/design-system/components/Matrix/style.css +84 -0
  167. package/design-system/components/Menu/README.md +117 -41
  168. package/design-system/components/Menu/preview.html +85 -23
  169. package/design-system/components/Menu/style.css +61 -0
  170. package/design-system/components/Meter/README.md +39 -4
  171. package/design-system/components/Meter/preview.html +18 -1
  172. package/design-system/components/Meter/style.css +23 -0
  173. package/design-system/components/MetricTile/README.md +237 -0
  174. package/design-system/components/MetricTile/preview.html +241 -0
  175. package/design-system/components/MetricTile/style.css +129 -0
  176. package/design-system/components/Morph/README.md +106 -0
  177. package/design-system/components/Morph/preview.html +103 -0
  178. package/design-system/components/Morph/style.css +31 -0
  179. package/design-system/components/Motion/README.md +164 -0
  180. package/design-system/components/Motion/preview.html +2537 -0
  181. package/design-system/components/NumberInput/README.md +27 -8
  182. package/design-system/components/NumberInput/preview.html +21 -5
  183. package/design-system/components/NumberInput/style.css +34 -0
  184. package/design-system/components/PaceBar/README.md +75 -0
  185. package/design-system/components/PaceBar/preview.html +67 -0
  186. package/design-system/components/PaceBar/style.css +25 -0
  187. package/design-system/components/Page/README.md +57 -18
  188. package/design-system/components/Page/preview.html +15 -17
  189. package/design-system/components/Page/style.css +7 -0
  190. package/design-system/components/PageBar/README.md +90 -34
  191. package/design-system/components/PageBar/preview.html +60 -19
  192. package/design-system/components/PageBar/style.css +35 -0
  193. package/design-system/components/PageHero/README.md +87 -51
  194. package/design-system/components/PageHero/preview.html +35 -6
  195. package/design-system/components/PageHero/style.css +31 -0
  196. package/design-system/components/Pagination/README.md +70 -49
  197. package/design-system/components/Pagination/preview.html +24 -15
  198. package/design-system/components/Pagination/style.css +12 -0
  199. package/design-system/components/Panel/README.md +109 -51
  200. package/design-system/components/Panel/preview.html +118 -20
  201. package/design-system/components/Panel/style.css +51 -0
  202. package/design-system/components/PasswordInput/README.md +50 -18
  203. package/design-system/components/PasswordInput/preview.html +71 -21
  204. package/design-system/components/PasswordInput/style.css +31 -0
  205. package/design-system/components/Plate/README.md +75 -17
  206. package/design-system/components/Plate/preview.html +40 -7
  207. package/design-system/components/Plate/style.css +37 -0
  208. package/design-system/components/Popover/README.md +70 -49
  209. package/design-system/components/Popover/preview.html +44 -22
  210. package/design-system/components/Popover/style.css +41 -0
  211. package/design-system/components/PricingTable/README.md +69 -49
  212. package/design-system/components/PricingTable/preview.html +21 -21
  213. package/design-system/components/PricingTable/style.css +21 -0
  214. package/design-system/components/ProgressPetals/README.md +31 -3
  215. package/design-system/components/ProgressPetals/preview.html +14 -15
  216. package/design-system/components/ProgressPetals/style.css +27 -0
  217. package/design-system/components/README.md +151 -0
  218. package/design-system/components/Radio/README.md +40 -17
  219. package/design-system/components/Radio/preview.html +16 -1
  220. package/design-system/components/Radio/style.css +21 -0
  221. package/design-system/components/RankBar/README.md +29 -2
  222. package/design-system/components/RankBar/preview.html +14 -12
  223. package/design-system/components/RankBar/style.css +18 -0
  224. package/design-system/components/Ring/README.md +61 -11
  225. package/design-system/components/Ring/preview.html +55 -10
  226. package/design-system/components/Ring/style.css +49 -0
  227. package/design-system/components/ScoreHero/README.md +91 -0
  228. package/design-system/components/ScoreHero/preview.html +104 -0
  229. package/design-system/components/ScoreHero/style.css +32 -0
  230. package/design-system/components/Section/README.md +72 -33
  231. package/design-system/components/Section/preview.html +46 -16
  232. package/design-system/components/Section/style.css +18 -0
  233. package/design-system/components/Segmented/README.md +100 -55
  234. package/design-system/components/Segmented/preview.html +107 -26
  235. package/design-system/components/Segmented/style.css +94 -0
  236. package/design-system/components/SegmentedProgress/README.md +64 -0
  237. package/design-system/components/SegmentedProgress/preview.html +69 -0
  238. package/design-system/components/SegmentedProgress/style.css +11 -0
  239. package/design-system/components/Select/README.md +47 -12
  240. package/design-system/components/Select/preview.html +28 -2
  241. package/design-system/components/Select/style.css +22 -0
  242. package/design-system/components/ShareBar/README.md +69 -0
  243. package/design-system/components/ShareBar/preview.html +72 -0
  244. package/design-system/components/ShareBar/style.css +25 -0
  245. package/design-system/components/SideList/README.md +147 -0
  246. package/design-system/components/SideList/preview.html +139 -0
  247. package/design-system/components/SideList/style.css +94 -0
  248. package/design-system/components/Skeleton/README.md +53 -16
  249. package/design-system/components/Skeleton/preview.html +35 -23
  250. package/design-system/components/Skeleton/style.css +17 -0
  251. package/design-system/components/Slider/README.md +95 -0
  252. package/design-system/components/Slider/preview.html +49 -0
  253. package/design-system/components/Slider/style.css +13 -0
  254. package/design-system/components/Split/README.md +112 -0
  255. package/design-system/components/Split/preview.html +105 -0
  256. package/design-system/components/Split/style.css +30 -0
  257. package/design-system/components/Starter/README.md +21 -9
  258. package/design-system/components/Starter/preview.html +5 -5
  259. package/design-system/components/Stat/README.md +64 -43
  260. package/design-system/components/Stat/preview.html +3 -3
  261. package/design-system/components/Stat/style.css +15 -0
  262. package/design-system/components/StatTiles/README.md +88 -44
  263. package/design-system/components/StatTiles/preview.html +142 -71
  264. package/design-system/components/StatTiles/style.css +64 -0
  265. package/design-system/components/StatusLine/README.md +85 -0
  266. package/design-system/components/StatusLine/preview.html +49 -0
  267. package/design-system/components/StatusLine/style.css +14 -0
  268. package/design-system/components/StatusScreen/README.md +49 -35
  269. package/design-system/components/StatusScreen/preview.html +20 -5
  270. package/design-system/components/StatusScreen/style.css +9 -0
  271. package/design-system/components/StepLine/README.md +97 -0
  272. package/design-system/components/StepLine/preview.html +108 -0
  273. package/design-system/components/StepLine/style.css +62 -0
  274. package/design-system/components/Stepper/README.md +35 -13
  275. package/design-system/components/Stepper/style.css +13 -0
  276. package/design-system/components/StreakCalendar/README.md +22 -1
  277. package/design-system/components/StreakCalendar/preview.html +10 -10
  278. package/design-system/components/StreakCalendar/style.css +12 -0
  279. package/design-system/components/SuggestionChip/README.md +87 -0
  280. package/design-system/components/SuggestionChip/preview.html +42 -0
  281. package/design-system/components/SuggestionChip/style.css +20 -0
  282. package/design-system/components/Switch/README.md +44 -24
  283. package/design-system/components/Switch/preview.html +23 -8
  284. package/design-system/components/Switch/style.css +31 -0
  285. package/design-system/components/Table/README.md +129 -58
  286. package/design-system/components/Table/preview.html +106 -72
  287. package/design-system/components/Table/style.css +104 -0
  288. package/design-system/components/Tabs/README.md +71 -46
  289. package/design-system/components/Tabs/preview.html +56 -24
  290. package/design-system/components/Tabs/style.css +44 -0
  291. package/design-system/components/Testimonial/README.md +48 -32
  292. package/design-system/components/Testimonial/preview.html +14 -14
  293. package/design-system/components/Testimonial/style.css +12 -0
  294. package/design-system/components/TextArea/README.md +27 -11
  295. package/design-system/components/TextArea/preview.html +8 -2
  296. package/design-system/components/TextArea/style.css +12 -0
  297. package/design-system/components/ThemeSwitch/README.md +116 -0
  298. package/design-system/components/ThemeSwitch/preview.html +57 -0
  299. package/design-system/components/ThemeSwitch/style.css +6 -0
  300. package/design-system/components/TickRow/README.md +52 -36
  301. package/design-system/components/TickRow/preview.html +64 -41
  302. package/design-system/components/TickRow/style.css +23 -0
  303. package/design-system/components/TickStrip/README.md +95 -0
  304. package/design-system/components/TickStrip/preview.html +88 -0
  305. package/design-system/components/TickStrip/style.css +42 -0
  306. package/design-system/components/Tile/README.md +79 -18
  307. package/design-system/components/Tile/preview.html +91 -40
  308. package/design-system/components/Tile/style.css +36 -0
  309. package/design-system/components/Timeline/README.md +68 -48
  310. package/design-system/components/Timeline/preview.html +27 -15
  311. package/design-system/components/Timeline/style.css +25 -0
  312. package/design-system/components/Toast/README.md +70 -38
  313. package/design-system/components/Toast/preview.html +43 -8
  314. package/design-system/components/Toast/style.css +25 -0
  315. package/design-system/components/Tooltip/README.md +93 -35
  316. package/design-system/components/Tooltip/preview.html +69 -15
  317. package/design-system/components/Tooltip/style.css +78 -0
  318. package/design-system/components/TopBar/README.md +67 -53
  319. package/design-system/components/TopBar/preview.html +14 -27
  320. package/design-system/components/TopBar/style.css +35 -0
  321. package/design-system/components/TopicRail/README.md +108 -0
  322. package/design-system/components/TopicRail/preview.html +58 -0
  323. package/design-system/components/TopicRail/style.css +48 -0
  324. package/design-system/components/TrendBars/README.md +52 -14
  325. package/design-system/components/TrendBars/preview.html +65 -32
  326. package/design-system/components/TrendBars/style.css +25 -0
  327. package/design-system/components/TrendLine/README.md +164 -0
  328. package/design-system/components/TrendLine/preview.html +373 -0
  329. package/design-system/components/TrendLine/style.css +155 -0
  330. package/design-system/components/Well/README.md +64 -22
  331. package/design-system/components/Well/preview.html +14 -14
  332. package/design-system/components/Well/style.css +22 -0
  333. package/design-system/components/_house.css +324 -0
  334. package/design-system/components/bundle.css +4086 -744
  335. package/design-system/tokens.json +1310 -124
  336. package/dist/fello-core.css +2 -2
  337. package/dist/fello.css +6 -1369
  338. package/dist/fello.scoped.css +7 -0
  339. package/dist/index.d.ts +109 -10
  340. package/dist/index.js +781 -96
  341. package/dist/palettes.d.ts +464 -0
  342. package/dist/palettes.js +497 -0
  343. package/dist/scoped.d.ts +3 -0
  344. package/dist/scoped.js +16 -0
  345. package/dist/toast.d.ts +14 -0
  346. package/dist/toast.js +33 -29
  347. package/dist/tokens.d.ts +1686 -62
  348. package/dist/tokens.js +1668 -61
  349. package/package.json +20 -4
  350. package/scripts/check-palette.mjs +295 -0
  351. package/scripts/token-model.mjs +552 -0
  352. package/tokens/_dark.css +173 -0
  353. package/tokens/_palettes.css +46 -0
  354. package/tokens/_product.css +266 -53
  355. package/tokens/_source.hubl.css +39 -19
  356. package/tokens/design-tokens.json +319 -0
  357. package/tokens/palettes.ts +504 -0
  358. package/tokens/shadcn-compat.css +19 -19
  359. package/tokens/shadcn-compat.hsl.css +76 -0
  360. package/tokens/tokens.css +1287 -62
  361. package/tokens/tokens.md +587 -61
  362. package/tokens/tokens.root.css +1293 -62
  363. package/tokens/tokens.ts +1677 -64
package/design-system/components/Heatmap/preview.html ADDED
@@ -0,0 +1,168 @@
1
+ <!-- @dsCard group="Charts" height=1800 -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Heatmap</title>
7
+ <link rel="stylesheet" href="../../tokens.css">
8
+ <link rel="stylesheet" href="../bundle.css">
9
+ </head>
10
+ <body>
11
+ <div class="ws-stage ws-stage--column">
12
+
13
+ <div class="ws-stack" style="max-width: 1194px;">
14
+ <span class="ws-muted">Lanes and squares: a lane's ring and name, then its metrics; misses in full colour, on-pace tinted; built in from the middle</span>
15
+ <section class="ws-heatmap ws-heatmap--build" aria-labelledby="hm-1">
16
+ <header class="ws-heatmap__head">
17
+ <h3 class="ws-section" id="hm-1">Company health</h3>
18
+ <div class="ws-heatmap__key" aria-label="Colour shows the share of pace">
19
+ <span class="ws-heatmap__key-arm">
20
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-5);">120%+</span>
21
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-4);">100&ndash;119</span>
22
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-3);">85&ndash;99</span>
23
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-2);">70&ndash;84</span>
24
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-1);">Under 70</span>
25
+ </span>
26
+ <span class="ws-heatmap__swatch ws-heatmap__swatch--none">No target</span>
27
+ </div>
28
+ </header>
29
+ <div class="ws-heatmap__scroll">
30
+ <div class="ws-heatmap__grid">
31
+ <div class="ws-heatmap__row">
32
+ <div class="ws-heatmap__lane"><span class="ws-ring__arc" aria-hidden="true"><svg width="36" height="36" viewBox="0 0 36 36"><circle class="ws-ring__track" cx="18" cy="18" r="15.5" stroke-width="4" /><circle class="ws-ring__value" cx="18" cy="18" r="15.5" stroke-width="4" stroke="var(--ws-chart-past-half)" pathLength="1" stroke-dasharray="0.78 1" /></svg><span class="ws-ring__center ws-ring__center--sm">78</span></span><span class="ws-heatmap__lane-name"><b>Sales</b><small>78% of pace</small></span></div>
33
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" style="--i: 3;" aria-label="Sales: Revenue, $412K, 94% of pace"><span class="ws-heatmap__label">Revenue</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$412K</span><span class="ws-heatmap__flag">94%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h5" style="--i: 2;" aria-label="Sales: Deals closed, 9, 125% of pace"><span class="ws-heatmap__label">Deals closed</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">9</span><span class="ws-heatmap__flag">125%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 1;" aria-label="Sales: Pipeline added, $1.2M, 104% of pace"><span class="ws-heatmap__label">Pipeline added</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$1.2M</span><span class="ws-heatmap__flag">104%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" style="--i: 2;" aria-label="Sales: Calls, 312, 78% of pace"><span class="ws-heatmap__label">Calls</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">312</span><span class="ws-heatmap__flag">78%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" style="--i: 3;" aria-label="Sales: Show rate, 41%, 62% of pace"><span class="ws-heatmap__label">Show rate</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">41%</span><span class="ws-heatmap__flag">62%</span></span></button>
34
+ </div>
35
+ <div class="ws-heatmap__row">
36
+ <div class="ws-heatmap__lane"><span class="ws-ring__arc" aria-hidden="true"><svg width="36" height="36" viewBox="0 0 36 36"><circle class="ws-ring__track" cx="18" cy="18" r="15.5" stroke-width="4" /><circle class="ws-ring__value" cx="18" cy="18" r="15.5" stroke-width="4" stroke="var(--ws-chart-finished)" pathLength="1" stroke-dasharray="0.91 1" /></svg><span class="ws-ring__center ws-ring__center--sm">91</span></span><span class="ws-heatmap__lane-name"><b>Recruiting</b><small>91% of pace</small></span></div>
37
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h5" style="--i: 2;" aria-label="Recruiting: Hires, 4, 133% of pace"><span class="ws-heatmap__label">Hires</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">4</span><span class="ws-heatmap__flag">133%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 1;" aria-label="Recruiting: Interviews booked, 22, 110% of pace"><span class="ws-heatmap__label">Interviews booked</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">22</span><span class="ws-heatmap__flag">110%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 0;" aria-label="Recruiting: Offers out, 6, 100% of pace"><span class="ws-heatmap__label">Offers out</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">6</span><span class="ws-heatmap__flag">100%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" style="--i: 1;" aria-label="Recruiting: Time to offer, 19 days, 88% of pace"><span class="ws-heatmap__label">Time to offer</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">19 days</span><span class="ws-heatmap__flag">88%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--none" style="--i: 2;" aria-label="Recruiting: Referrals, 3, no target"><span class="ws-heatmap__label">Referrals</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">3</span><span class="ws-heatmap__flag">No target</span></span></button>
38
+ </div>
39
+ <div class="ws-heatmap__row">
40
+ <div class="ws-heatmap__lane"><span class="ws-ring__arc" aria-hidden="true"><svg width="36" height="36" viewBox="0 0 36 36"><circle class="ws-ring__track" cx="18" cy="18" r="15.5" stroke-width="4" /><circle class="ws-ring__value" cx="18" cy="18" r="15.5" stroke-width="4" stroke="var(--ws-chart-needs-work)" pathLength="1" stroke-dasharray="0.64 1" /></svg><span class="ws-ring__center ws-ring__center--sm">64</span></span><span class="ws-heatmap__lane-name"><b>Marketing</b><small>64% of pace</small></span></div>
41
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" style="--i: 3;" aria-label="Marketing: Leads, 486, 71% of pace"><span class="ws-heatmap__label">Leads</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">486</span><span class="ws-heatmap__flag">71%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" style="--i: 2;" aria-label="Marketing: Cost per lead, $38, 66% of pace"><span class="ws-heatmap__label">Cost per lead</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$38</span><span class="ws-heatmap__flag">66%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" style="--i: 1;" aria-label="Marketing: Website visits, 12.4K, 92% of pace"><span class="ws-heatmap__label">Website visits</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">12.4K</span><span class="ws-heatmap__flag">92%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" style="--i: 2;" aria-label="Marketing: Reviews asked for, answered and posted, 31, 58% of pace"><span class="ws-heatmap__label" title="Reviews asked for, answered and posted">Reviews asked for, answered and posted</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">31</span><span class="ws-heatmap__flag">58%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 3;" aria-label="Marketing: Email opens, 44%, 101% of pace"><span class="ws-heatmap__label">Email opens</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">44%</span><span class="ws-heatmap__flag">101%</span></span></button>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </section>
46
+ </div>
47
+
48
+ <div class="ws-stack" style="max-width: 1194px;">
49
+ <span class="ws-muted">Transposed: seven lanes across the top, an arrow slides in on a lane's name under the pointer or the focus</span>
50
+ <section class="ws-heatmap" aria-labelledby="hm-2">
51
+ <header class="ws-heatmap__head">
52
+ <h3 class="ws-section" id="hm-2">This month by department</h3>
53
+ <div class="ws-heatmap__key" aria-label="Colour shows the share of pace">
54
+ <span class="ws-heatmap__key-arm">
55
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-5);">120%+</span>
56
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-4);">100&ndash;119</span>
57
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-3);">85&ndash;99</span>
58
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-2);">70&ndash;84</span>
59
+ <span class="ws-heatmap__swatch" style="--heat: var(--ws-heat-1);">Under 70</span>
60
+ </span>
61
+ <span class="ws-heatmap__swatch ws-heatmap__swatch--none">No target</span>
62
+ </div>
63
+ </header>
64
+ <div class="ws-heatmap__scroll">
65
+ <div class="ws-heatmap__grid ws-heatmap__grid--lanes" style="--rows: 3;">
66
+ <button type="button" class="ws-heatmap__lane-head" aria-label="Sales, 78% of pace. Open its outcome">
67
+ <span class="ws-heatmap__lane-title"><span title="Sales">Sales</span><svg class="ws-heatmap__go" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
68
+ <span class="ws-heatmap__lane-bar"><span class="ws-pace-bar ws-pace-bar--thin" style="--value: 78%; --tone: var(--ws-chart-past-half);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span></span><b>78</b></span>
69
+ </button>
70
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" aria-label="Sales: Revenue, $412K, 94% of pace"><span class="ws-heatmap__label">Revenue</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$412K</span><span class="ws-heatmap__flag">94%</span></span></button>
71
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" aria-label="Sales: Calls, 312, 78% of pace"><span class="ws-heatmap__label">Calls</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">312</span><span class="ws-heatmap__flag">78%</span></span></button>
72
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" aria-label="Sales: Show rate, 41%, 62% of pace"><span class="ws-heatmap__label">Show rate</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">41%</span><span class="ws-heatmap__flag">62%</span></span></button>
73
+ <button type="button" class="ws-heatmap__lane-head" aria-label="Recruiting, 112% of pace. Open its outcome">
74
+ <span class="ws-heatmap__lane-title"><span title="Recruiting">Recruiting</span><svg class="ws-heatmap__go" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
75
+ <span class="ws-heatmap__lane-bar"><span class="ws-pace-bar ws-pace-bar--thin" style="--value: 100%; --tone: var(--ws-chart-finished);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span></span><b>112</b></span>
76
+ </button>
77
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h5" aria-label="Recruiting: Hires, 4, 133% of pace"><span class="ws-heatmap__label">Hires</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">4</span><span class="ws-heatmap__flag">133%</span></span></button>
78
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" aria-label="Recruiting: Interviews, 22, 110% of pace"><span class="ws-heatmap__label">Interviews</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">22</span><span class="ws-heatmap__flag">110%</span></span></button>
79
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" aria-label="Recruiting: Offers out, 6, 100% of pace"><span class="ws-heatmap__label">Offers out</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">6</span><span class="ws-heatmap__flag">100%</span></span></button>
80
+ <button type="button" class="ws-heatmap__lane-head" aria-label="Marketing, 71% of pace. Open its outcome">
81
+ <span class="ws-heatmap__lane-title"><span title="Marketing">Marketing</span><svg class="ws-heatmap__go" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
82
+ <span class="ws-heatmap__lane-bar"><span class="ws-pace-bar ws-pace-bar--thin" style="--value: 71%; --tone: var(--ws-chart-past-half);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span></span><b>71</b></span>
83
+ </button>
84
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" aria-label="Marketing: Leads, 486, 71% of pace"><span class="ws-heatmap__label">Leads</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">486</span><span class="ws-heatmap__flag">71%</span></span></button>
85
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" aria-label="Marketing: Cost per lead, $38, 66% of pace"><span class="ws-heatmap__label">Cost per lead</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$38</span><span class="ws-heatmap__flag">66%</span></span></button>
86
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" aria-label="Marketing: Visits, 12.4K, 92% of pace"><span class="ws-heatmap__label">Visits</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">12.4K</span><span class="ws-heatmap__flag">92%</span></span></button>
87
+ <button type="button" class="ws-heatmap__lane-head" aria-label="Operations, 96% of pace. Open its outcome">
88
+ <span class="ws-heatmap__lane-title"><span title="Operations">Operations</span><svg class="ws-heatmap__go" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
89
+ <span class="ws-heatmap__lane-bar"><span class="ws-pace-bar ws-pace-bar--thin" style="--value: 96%; --tone: var(--ws-chart-finished);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span></span><b>96</b></span>
90
+ </button>
91
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" aria-label="Operations: Files closed, 18, 96% of pace"><span class="ws-heatmap__label">Files closed</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">18</span><span class="ws-heatmap__flag">96%</span></span></button>
92
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" aria-label="Operations: Days to close, 31, 104% of pace"><span class="ws-heatmap__label">Days to close</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">31</span><span class="ws-heatmap__flag">104%</span></span></button>
93
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h5" aria-label="Operations: Errors, 2, 120% of pace"><span class="ws-heatmap__label">Errors</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">2</span><span class="ws-heatmap__flag">120%</span></span></button>
94
+ <button type="button" class="ws-heatmap__lane-head" aria-label="Finance, 101% of pace. Open its outcome">
95
+ <span class="ws-heatmap__lane-title"><span title="Finance">Finance</span><svg class="ws-heatmap__go" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
96
+ <span class="ws-heatmap__lane-bar"><span class="ws-pace-bar ws-pace-bar--thin" style="--value: 100%; --tone: var(--ws-chart-finished);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span></span><b>101</b></span>
97
+ </button>
98
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" aria-label="Finance: Cash in, $218K, 101% of pace"><span class="ws-heatmap__label">Cash in</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$218K</span><span class="ws-heatmap__flag">101%</span></span></button>
99
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" aria-label="Finance: Fees out, $41K, 98% of pace"><span class="ws-heatmap__label">Fees out</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$41K</span><span class="ws-heatmap__flag">98%</span></span></button>
100
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--none" aria-label="Finance: Margin, 19%, no target"><span class="ws-heatmap__label">Margin</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">19%</span><span class="ws-heatmap__flag">No target</span></span></button>
101
+ <button type="button" class="ws-heatmap__lane-head" aria-label="Agents and their coaching, 86% of pace. Open its outcome">
102
+ <span class="ws-heatmap__lane-title"><span title="Agents and their coaching">Agents and their coaching</span><svg class="ws-heatmap__go" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
103
+ <span class="ws-heatmap__lane-bar"><span class="ws-pace-bar ws-pace-bar--thin" style="--value: 86%; --tone: var(--ws-chart-finished);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span></span><b>86</b></span>
104
+ </button>
105
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" aria-label="Agents and their coaching: Active, 37, 86% of pace"><span class="ws-heatmap__label">Active</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">37</span><span class="ws-heatmap__flag">86%</span></span></button>
106
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" aria-label="Agents and their coaching: Coached, 12, 80% of pace"><span class="ws-heatmap__label">Coached</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">12</span><span class="ws-heatmap__flag">80%</span></span></button>
107
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--none" aria-label="Agents and their coaching: Leaving, 1, no target"><span class="ws-heatmap__label">Leaving</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">1</span><span class="ws-heatmap__flag">No target</span></span></button>
108
+ <button type="button" class="ws-heatmap__lane-head" aria-label="Brand, 68% of pace. Open its outcome">
109
+ <span class="ws-heatmap__lane-title"><span title="Brand">Brand</span><svg class="ws-heatmap__go" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
110
+ <span class="ws-heatmap__lane-bar"><span class="ws-pace-bar ws-pace-bar--thin" style="--value: 68%; --tone: var(--ws-chart-needs-work);" aria-hidden="true"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span></span><b>68</b></span>
111
+ </button>
112
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" aria-label="Brand: Mentions, 214, 68% of pace"><span class="ws-heatmap__label">Mentions</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">214</span><span class="ws-heatmap__flag">68%</span></span></button>
113
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" aria-label="Brand: Reviews, 4.8, 102% of pace"><span class="ws-heatmap__label">Reviews</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">4.8</span><span class="ws-heatmap__flag">102%</span></span></button>
114
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" aria-label="Brand: Social reach, 9.1K, 55% of pace"><span class="ws-heatmap__label">Social reach</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">9.1K</span><span class="ws-heatmap__flag">55%</span></span></button>
115
+ </div>
116
+ </div>
117
+ </section>
118
+ </div>
119
+
120
+ <div class="ws-stack" style="max-width: 1194px;">
121
+ <span class="ws-muted">Accent: cream squares with a status bar on the left edge; linking dims the squares a list row is not about</span>
122
+ <section class="ws-heatmap ws-heatmap--accent ws-heatmap--linking" aria-labelledby="hm-3">
123
+ <header class="ws-heatmap__head">
124
+ <h3 class="ws-section" id="hm-3">Company health</h3>
125
+ </header>
126
+ <div class="ws-heatmap__scroll">
127
+ <div class="ws-heatmap__grid">
128
+ <div class="ws-heatmap__row">
129
+ <div class="ws-heatmap__lane"><span class="ws-ring__arc" aria-hidden="true"><svg width="36" height="36" viewBox="0 0 36 36"><circle class="ws-ring__track" cx="18" cy="18" r="15.5" stroke-width="4" /><circle class="ws-ring__value" cx="18" cy="18" r="15.5" stroke-width="4" stroke="var(--ws-chart-past-half)" pathLength="1" stroke-dasharray="0.78 1" /></svg><span class="ws-ring__center ws-ring__center--sm">78</span></span><span class="ws-heatmap__lane-name"><b>Sales</b><small>78% of pace</small></span></div>
130
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" style="--i: 3;" aria-label="Sales: Revenue, $412K, 94% of pace"><span class="ws-heatmap__label">Revenue</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$412K</span><span class="ws-heatmap__flag">94%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h5" style="--i: 2;" aria-label="Sales: Deals closed, 9, 125% of pace"><span class="ws-heatmap__label">Deals closed</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">9</span><span class="ws-heatmap__flag">125%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 1;" aria-label="Sales: Pipeline added, $1.2M, 104% of pace"><span class="ws-heatmap__label">Pipeline added</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$1.2M</span><span class="ws-heatmap__flag">104%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" style="--i: 2;" aria-label="Sales: Calls, 312, 78% of pace"><span class="ws-heatmap__label">Calls</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">312</span><span class="ws-heatmap__flag">78%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1 ws-heatmap__cell--lit" style="--i: 3;" aria-label="Sales: Show rate, 41%, 62% of pace"><span class="ws-heatmap__label">Show rate</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">41%</span><span class="ws-heatmap__flag">62%</span></span></button>
131
+ </div>
132
+ <div class="ws-heatmap__row">
133
+ <div class="ws-heatmap__lane"><span class="ws-ring__arc" aria-hidden="true"><svg width="36" height="36" viewBox="0 0 36 36"><circle class="ws-ring__track" cx="18" cy="18" r="15.5" stroke-width="4" /><circle class="ws-ring__value" cx="18" cy="18" r="15.5" stroke-width="4" stroke="var(--ws-chart-finished)" pathLength="1" stroke-dasharray="0.91 1" /></svg><span class="ws-ring__center ws-ring__center--sm">91</span></span><span class="ws-heatmap__lane-name"><b>Recruiting</b><small>91% of pace</small></span></div>
134
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h5" style="--i: 2;" aria-label="Recruiting: Hires, 4, 133% of pace"><span class="ws-heatmap__label">Hires</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">4</span><span class="ws-heatmap__flag">133%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 1;" aria-label="Recruiting: Interviews booked, 22, 110% of pace"><span class="ws-heatmap__label">Interviews booked</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">22</span><span class="ws-heatmap__flag">110%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 0;" aria-label="Recruiting: Offers out, 6, 100% of pace"><span class="ws-heatmap__label">Offers out</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">6</span><span class="ws-heatmap__flag">100%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" style="--i: 1;" aria-label="Recruiting: Time to offer, 19 days, 88% of pace"><span class="ws-heatmap__label">Time to offer</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">19 days</span><span class="ws-heatmap__flag">88%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--none" style="--i: 2;" aria-label="Recruiting: Referrals, 3, no target"><span class="ws-heatmap__label">Referrals</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">3</span><span class="ws-heatmap__flag">No target</span></span></button>
135
+ </div>
136
+ <div class="ws-heatmap__row">
137
+ <div class="ws-heatmap__lane"><span class="ws-ring__arc" aria-hidden="true"><svg width="36" height="36" viewBox="0 0 36 36"><circle class="ws-ring__track" cx="18" cy="18" r="15.5" stroke-width="4" /><circle class="ws-ring__value" cx="18" cy="18" r="15.5" stroke-width="4" stroke="var(--ws-chart-needs-work)" pathLength="1" stroke-dasharray="0.64 1" /></svg><span class="ws-ring__center ws-ring__center--sm">64</span></span><span class="ws-heatmap__lane-name"><b>Marketing</b><small>64% of pace</small></span></div>
138
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" style="--i: 3;" aria-label="Marketing: Leads, 486, 71% of pace"><span class="ws-heatmap__label">Leads</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">486</span><span class="ws-heatmap__flag">71%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" style="--i: 2;" aria-label="Marketing: Cost per lead, $38, 66% of pace"><span class="ws-heatmap__label">Cost per lead</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$38</span><span class="ws-heatmap__flag">66%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" style="--i: 1;" aria-label="Marketing: Website visits, 12.4K, 92% of pace"><span class="ws-heatmap__label">Website visits</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">12.4K</span><span class="ws-heatmap__flag">92%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" style="--i: 2;" aria-label="Marketing: Reviews asked for, answered and posted, 31, 58% of pace"><span class="ws-heatmap__label" title="Reviews asked for, answered and posted">Reviews asked for, answered and posted</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">31</span><span class="ws-heatmap__flag">58%</span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" style="--i: 3;" aria-label="Marketing: Email opens, 44%, 101% of pace"><span class="ws-heatmap__label">Email opens</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">44%</span><span class="ws-heatmap__flag">101%</span></span></button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </section>
143
+ </div>
144
+
145
+ <div class="ws-stack" style="max-width: 760px;">
146
+ <span class="ws-muted">Opening (North's tile, on the tile spring): point at a square or Tab to it. It grows to two cells over the square below, then its share of pace, pace bar and door settle in; the bottom row grows upward. A click is the app's: its full card.</span>
147
+ <section class="ws-heatmap" aria-labelledby="hm-4">
148
+ <header class="ws-heatmap__head">
149
+ <h3 class="ws-section" id="hm-4">Company health</h3>
150
+ </header>
151
+ <div class="ws-heatmap__scroll">
152
+ <div class="ws-heatmap__grid" style="--cols: 4;">
153
+ <div class="ws-heatmap__row">
154
+ <div class="ws-heatmap__lane"><span class="ws-heatmap__lane-name"><b>Sales</b><small>91% of pace</small></span></div>
155
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h3" aria-label="Sales: Revenue, $412K, 94% of pace"><span class="ws-heatmap__label">Revenue</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">$412K</span><span class="ws-heatmap__flag">94%</span></span><span class="ws-heatmap__open" aria-hidden="true"><span class="ws-heatmap__share">94% of pace</span><span class="ws-pace-bar" style="--value: 62%; --pace: 66%;"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></span><span class="ws-heatmap__door"><span>Open</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h1" aria-label="Sales: Calls, 312, 66% of pace"><span class="ws-heatmap__label">Calls</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">312</span><span class="ws-heatmap__flag">66%</span></span><span class="ws-heatmap__open" aria-hidden="true"><span class="ws-heatmap__share">66% of pace</span><span class="ws-pace-bar" style="--value: 40%; --pace: 61%;"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></span><span class="ws-heatmap__door"><span>Open</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h5" aria-label="Sales: Meetings, 58, 121% of pace"><span class="ws-heatmap__label">Meetings</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">58</span><span class="ws-heatmap__flag">121%</span></span><span class="ws-heatmap__open" aria-hidden="true"><span class="ws-heatmap__share">121% of pace</span><span class="ws-pace-bar" style="--value: 80%; --pace: 66%;"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></span><span class="ws-heatmap__door"><span>Open</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></button>
156
+ </div>
157
+ <div class="ws-heatmap__row">
158
+ <div class="ws-heatmap__lane"><span class="ws-heatmap__lane-name"><b>Marketing</b><small>78% of pace</small></span></div>
159
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" aria-label="Marketing: Leads, 486, 71% of pace"><span class="ws-heatmap__label">Leads</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">486</span><span class="ws-heatmap__flag">71%</span></span><span class="ws-heatmap__open" aria-hidden="true"><span class="ws-heatmap__share">71% of pace</span><span class="ws-pace-bar" style="--value: 47%; --pace: 66%;"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></span><span class="ws-heatmap__door"><span>Open</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--h4" aria-label="Marketing: Email opens, 44%, 101% of pace"><span class="ws-heatmap__label">Email opens</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">44%</span><span class="ws-heatmap__flag">101%</span></span><span class="ws-heatmap__open" aria-hidden="true"><span class="ws-heatmap__share">101% of pace</span><span class="ws-pace-bar" style="--value: 67%; --pace: 66%;"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span><span class="ws-pace-bar__dot"></span></span><span class="ws-heatmap__door"><span>Open</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></button><button type="button" class="ws-heatmap__cell ws-heatmap__cell--none" aria-label="Marketing: Reviews, 31, no target"><span class="ws-heatmap__label">Reviews</span><span class="ws-heatmap__foot"><span class="ws-heatmap__value">31</span><span class="ws-heatmap__flag">No target</span></span><span class="ws-heatmap__open" aria-hidden="true"><span class="ws-heatmap__share">No target set</span><span class="ws-pace-bar"></span><span class="ws-heatmap__door"><span>Open</span><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span></button>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+ </div>
165
+
166
+ </div>
167
+ </body>
168
+ </html>
package/design-system/components/Heatmap/style.css ADDED
@@ -0,0 +1,119 @@
1
+ /* ---- Heatmap: North's company health, lanes by their metrics as touching squares coloured by how they track pace ---- */
2
+ /* A thin-line container (1 px, 12 corners, 0 20 20 inside); its head (title and key) over a full-width rule; then the
3
+ grid, which scrolls sideways inside itself when the column is too narrow (North, R7). Squares touch: a 1 px ring in
4
+ the page's colour inside each one separates them, so the field reads as one block. */
5
+ .ws-heatmap { --ws-heat-5: color-mix(in srgb, var(--ws-chart-finished) 38%, var(--color-bg-page)); --ws-heat-4: color-mix(in srgb, var(--ws-chart-finished) 24%, var(--color-bg-page)); --ws-heat-3: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-bg-page)); --ws-heat-2: var(--ws-word-past-half); --ws-heat-1: var(--ws-word-needs-work); border: var(--ws-line) solid var(--ws-edge-slot); border-radius: var(--ws-radius-bubble); padding: 0 var(--ws-card-inset) var(--ws-card-inset); }
6
+ .ws-heatmap__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin: 0 calc(var(--ws-card-inset) * -1) var(--space-xxs); padding: var(--space-sm-plus) var(--ws-card-inset) var(--space-sm); border-bottom: var(--ws-line) solid var(--ws-edge-slot); }
7
+ /* The key: 50 x 8 swatches 2 apart (in a narrow head it wraps), each with its band under it in 11/13 words, "No target" an outline. */
8
+ .ws-heatmap__key { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xs) var(--space-xs-plus); }
9
+ .ws-heatmap__key-arm { display: flex; min-width: 0; gap: var(--space-3xs); }
10
+ .ws-heatmap__swatch { display: flex; flex: 0 1 auto; min-width: 0; width: calc(var(--space-3xl) + var(--space-3xs)); flex-direction: column; align-items: center; gap: calc(var(--space-3xs) + var(--ws-line)); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); color: var(--color-text-body); white-space: nowrap; }
11
+ .ws-heatmap__swatch::before { content: ""; width: 100%; height: var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--heat, transparent); box-shadow: inset 0 0 0 var(--ws-hairline) var(--edge, transparent); }
12
+ /* "No target" stands apart from the arm, and in a narrow head it wraps to the start of its own line, so its word starts
13
+ on the swatch's edge (the card's rail) instead of centring under it. */
14
+ .ws-heatmap__swatch--none { align-items: flex-start; }
15
+ .ws-heatmap__swatch--none::before { --edge: var(--ws-edge-card); }
16
+ .ws-heatmap__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
17
+ /* Lanes as rows (the default): a lane's name and its ring, then its metrics' squares, 88 tall. The grid never gets
18
+ narrower than 160 a column (set --cols on the grid), so a lane's name keeps whole words and a square's value and
19
+ share fit side by side; below that it scrolls. */
20
+ .ws-heatmap__grid { display: grid; min-width: calc(var(--cols, 6) * var(--space-8xl)); }
21
+ .ws-heatmap__row { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); min-height: calc(var(--space-5xl) + var(--space-xs)); }
22
+ .ws-heatmap__lane { position: relative; display: flex; align-items: center; gap: var(--space-xs-plus); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); min-width: 0; }
23
+ .ws-heatmap__lane .ws-ring__arc { flex-shrink: 0; }
24
+ .ws-heatmap__lane-name { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3xs); }
25
+ .ws-heatmap__lane-name > b { font-size: var(--ws-text-value); font-weight: 600; line-height: var(--ws-leading-row); letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); overflow-wrap: break-word; text-wrap: balance; }
26
+ .ws-heatmap__lane-name > small { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-body); }
27
+ /* A square: a button. Its label at the top, its value at the foot, its share of pace at the right. */
28
+ .ws-heatmap__cell { --ink: var(--color-text-heading); --sub: var(--color-text-body); position: relative; display: flex; min-width: 0; min-height: calc(var(--space-5xl) + var(--space-xs)); flex-direction: column; justify-content: space-between; gap: var(--space-xxs); padding: var(--space-sm) var(--space-sm-plus); border: 0; background: var(--heat, var(--color-bg-page)); box-shadow: inset 0 0 0 var(--ws-line) var(--color-bg-page); color: var(--ink); text-align: left; cursor: pointer; }
29
+ @media (prefers-reduced-motion: no-preference) { .ws-heatmap__cell { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft), background-color var(--ws-duration-morph) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft); } }
30
+ /* Hover (D7): the square takes the kit's 5% ink wash over its heat, inside the paper ring; nothing moves. */
31
+ @media (hover: hover) { .ws-heatmap__cell:hover:not(:focus-visible) { box-shadow: inset 0 0 0 var(--ws-line) var(--color-bg-page), inset 0 0 0 100vmax var(--ws-hover); } }
32
+ .ws-heatmap__cell:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--ws-line) var(--color-bg-page), inset 0 0 0 calc(var(--ws-line) + var(--ws-focus-width)) var(--ws-focus-color); }
33
+ .ws-heatmap__label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--ws-text-control); font-weight: 500; line-height: var(--space-md); color: var(--sub); }
34
+ .ws-heatmap__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-xs); }
35
+ .ws-heatmap__value { font-size: var(--font-size-xl); font-weight: 500; line-height: var(--ws-leading-title); letter-spacing: var(--ws-tracking-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
36
+ .ws-heatmap__flag { margin-left: auto; font-size: var(--ws-text-dense); font-weight: 600; line-height: var(--space-md); white-space: nowrap; font-variant-numeric: tabular-nums; }
37
+ /* Heat (North's "focus" palette on kit tokens): on or ahead of pace in three teal tints, misses in full colour. */
38
+ .ws-heatmap__cell--h5 { --heat: var(--ws-heat-5); --sub: var(--color-text-heading); }
39
+ .ws-heatmap__cell--h4 { --heat: var(--ws-heat-4); }
40
+ .ws-heatmap__cell--h3 { --heat: var(--ws-heat-3); }
41
+ .ws-heatmap__cell--h2 { --heat: var(--ws-heat-2); --ink: var(--ws-on-act); --sub: var(--ws-on-act); }
42
+ .ws-heatmap__cell--h1 { --heat: var(--ws-heat-1); --ink: var(--ws-on-act); --sub: var(--ws-on-act); }
43
+ .ws-heatmap__cell--none { --heat: transparent; --sub: var(--color-text-muted); }
44
+ .ws-heatmap__cell--none .ws-heatmap__flag { font-weight: 400; color: var(--color-text-muted); }
45
+ /* Accent (North's "paper tiles"): cream squares, a 3 px status bar on the left edge 14 in from top and foot, the share
46
+ of pace in the status's AA word. */
47
+ .ws-heatmap--accent .ws-heatmap__cell { --heat: var(--color-bg-page); --ink: var(--color-text-heading); --sub: var(--color-text-body); }
48
+ .ws-heatmap--accent .ws-heatmap__cell::before { content: ""; position: absolute; left: 0; top: var(--space-sm-plus); bottom: var(--space-sm-plus); width: var(--ws-halo); border-radius: 0 var(--ws-radius-chip) var(--ws-radius-chip) 0; background: var(--bar, transparent); }
49
+ .ws-heatmap--accent .ws-heatmap__cell--h5, .ws-heatmap--accent .ws-heatmap__cell--h4, .ws-heatmap--accent .ws-heatmap__cell--h3 { --bar: var(--ws-chart-finished); }
50
+ .ws-heatmap--accent .ws-heatmap__cell--h2 { --bar: var(--ws-chart-past-half); }
51
+ .ws-heatmap--accent .ws-heatmap__cell--h2 .ws-heatmap__flag { color: var(--ws-word-past-half); }
52
+ .ws-heatmap--accent .ws-heatmap__cell--h1 { --bar: var(--ws-chart-needs-work); }
53
+ .ws-heatmap--accent .ws-heatmap__cell--h1 .ws-heatmap__flag { color: var(--ws-word-needs-work); }
54
+ /* Lanes across the top (the transposed form): seven lanes, each a column of its metrics. A lane's head is a button:
55
+ its name, an arrow that slides in on hover and focus, and its share of pace on a thin bar 10 above its foot. */
56
+ .ws-heatmap__grid--lanes { grid-template-columns: repeat(var(--lanes, 7), minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: calc(var(--space-3xl) + var(--space-xs-plus)) repeat(var(--rows, 5), minmax(calc(var(--space-5xl) + var(--space-xs)), auto)); min-width: calc(var(--lanes, 7) * (var(--space-8xl) - var(--space-md))); }
57
+ .ws-heatmap__lane-head { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: var(--space-xxs); padding: var(--space-xs-plus) var(--space-sm-plus) var(--space-xs-plus); border: 0; background: none; color: var(--color-text-heading); text-align: left; cursor: pointer; }
58
+ .ws-heatmap__lane-title { display: flex; min-width: 0; align-items: center; gap: var(--space-xxs); font-size: var(--ws-text-control); font-weight: 500; line-height: var(--ws-leading-control); }
59
+ .ws-heatmap__lane-title > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
60
+ .ws-heatmap__go { flex-shrink: 0; width: var(--ws-icon-sm); height: var(--ws-icon-sm); opacity: 0; transform: translateX(calc(var(--ws-nudge) * -1)); }
61
+ @media (prefers-reduced-motion: no-preference) { .ws-heatmap__go { transition: opacity var(--ws-duration-hover) ease, transform var(--ws-duration-settle) var(--ws-ease-soft); } }
62
+ /* Inside the scroller the ring is drawn inside the head: outside it, the scroller clips its top and the squares
63
+ below paint over its foot. */
64
+ .ws-heatmap__lane-head:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
65
+ .ws-heatmap__lane-head:focus-visible .ws-heatmap__go { opacity: 1; transform: none; }
66
+ @media (hover: hover) { .ws-heatmap__lane-head:hover .ws-heatmap__go { opacity: 1; transform: none; } }
67
+ .ws-heatmap__lane-bar { display: flex; align-items: center; gap: var(--space-xs); }
68
+ .ws-heatmap__lane-bar .ws-pace-bar { flex: 1; }
69
+ .ws-heatmap__lane-bar > b { min-width: calc(var(--space-lg) - var(--space-3xs)); font-size: var(--ws-text-body); font-weight: 600; line-height: var(--ws-leading-row); text-align: right; font-variant-numeric: tabular-nums; }
70
+ /* Linking (North): while a matching list row is pointed at, the squares that are not its own dim. Only the ground and
71
+ the marks fade (the heat to --ws-dim over the page, an accent's status bar to --ws-dim); the words step to muted,
72
+ which stays AA on the faded ground, so no word drops below 4.5:1 (D2). */
73
+ .ws-heatmap--linking .ws-heatmap__cell:not(.ws-heatmap__cell--lit) { --ink: var(--color-text-muted); --sub: var(--color-text-muted); background: color-mix(in srgb, var(--heat, var(--color-bg-page)) calc(var(--ws-dim) * 100%), var(--color-bg-page)); }
74
+ .ws-heatmap--linking .ws-heatmap__cell:not(.ws-heatmap__cell--lit) .ws-heatmap__flag { color: var(--ink); }
75
+ .ws-heatmap--linking .ws-heatmap__cell:not(.ws-heatmap__cell--lit)::before { opacity: var(--ws-dim); }
76
+ /* Build-in (North): squares fade in from the middle out. Set --i on each square: its distance from the middle. */
77
+ @keyframes ws-heatmap-in { from { opacity: 0; } }
78
+ @media (prefers-reduced-motion: no-preference) {
79
+ .ws-heatmap--build .ws-heatmap__cell { animation: ws-heatmap-in var(--ws-duration-draw) var(--ws-ease-steady) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-hover) + var(--i, 0) * var(--ws-stagger-row) * 2); }
80
+ }
81
+ /* Opening (North "Tile grows open / closes", the tile spring .26 / .06): a square with more to say (a __open inside it,
82
+ aria-hidden, after its foot) grows from one cell to two over the square below: on hover after the 40 ms intent, on
83
+ keyboard focus, or while the app holds it (aria-expanded="true"). The last square of a column grows upward and its
84
+ words ride up a cell with it, so nothing runs past the grid. Its details settle in 40 ms after it starts, 35 ms apart
85
+ (320 ms soft, from 6 px down): the share of pace, the pace bar filling (700 ms settle, its dot popping on the mark
86
+ spring .25 s after) and the door. It closes 60 ms after the pointer leaves, back on the same spring, fading out over
87
+ 120 ms. The open square is a stacking context, so its ground lies over the squares around it and under its own words.
88
+ The state is a handful of custom properties set once per trigger. Reduced motion: it opens and closes at once. */
89
+ .ws-heatmap__cell:has(> .ws-heatmap__open) { --ws-heat-open: 0; --ws-heat-show: hidden; --ws-heat-hit: none; --ws-heat-grow-wait: var(--ws-hover-leave); --ws-heat-fade: var(--ws-duration-exit); --ws-heat-fade-wait: calc(var(--ws-hover-leave) * 2); --ws-heat-hide-wait: calc(var(--ws-hover-leave) + var(--ws-spring-tile-duration)); --ws-heat-detail: none; --ws-heat-fill: none; --ws-heat-dot: none; z-index: var(--ws-heat-open); }
90
+ .ws-heatmap__cell:has(> .ws-heatmap__open):is(:focus-visible, [aria-expanded="true"]) { --ws-heat-open: 1; --ws-heat-show: visible; --ws-heat-hit: auto; --ws-heat-grow-wait: var(--ws-hover-intent); --ws-heat-fade: 0s; --ws-heat-fade-wait: var(--ws-hover-intent); --ws-heat-hide-wait: var(--ws-hover-intent); --ws-heat-detail: ws-heatmap-detail; --ws-heat-fill: ws-grow; --ws-heat-dot: ws-heatmap-dot; }
91
+ @media (hover: hover) { .ws-heatmap__cell:has(> .ws-heatmap__open):hover { --ws-heat-open: 1; --ws-heat-show: visible; --ws-heat-hit: auto; --ws-heat-grow-wait: var(--ws-hover-intent); --ws-heat-fade: 0s; --ws-heat-fade-wait: var(--ws-hover-intent); --ws-heat-hide-wait: var(--ws-hover-intent); --ws-heat-detail: ws-heatmap-detail; --ws-heat-fill: ws-grow; --ws-heat-dot: ws-heatmap-dot; } }
92
+ .ws-heatmap__open { position: absolute; inset: 0 0 auto; z-index: -1; display: grid; grid-template-rows: calc(var(--space-5xl) + var(--space-xs)) auto auto minmax(0, 1fr); row-gap: var(--space-xxs); height: calc(100% + 100% * var(--ws-heat-open, 0)); padding: 0 var(--space-sm-plus); overflow: hidden; background: var(--heat, var(--color-bg-page)); box-shadow: var(--ws-shadow-pop); visibility: var(--ws-heat-show, hidden); opacity: var(--ws-heat-open, 0); pointer-events: var(--ws-heat-hit, none); }
93
+ .ws-heatmap__cell--none > .ws-heatmap__open { background: var(--color-bg-page); }
94
+ /* The first row is the square's own (an empty ::before; its words show through), the details under it, the door at the foot. */
95
+ .ws-heatmap__open::before { content: ""; }
96
+ /* Focused, the open ground carries the square's ring (it lies over the square's own). */
97
+ .ws-heatmap__cell:focus-visible > .ws-heatmap__open { box-shadow: inset 0 0 0 var(--ws-line) var(--color-bg-page), inset 0 0 0 calc(var(--ws-line) + var(--ws-focus-width)) var(--ws-focus-color), var(--ws-shadow-pop); }
98
+ :is(.ws-heatmap__row:last-child > .ws-heatmap__cell, .ws-heatmap__grid--lanes > .ws-heatmap__cell:is(:last-child, :has(+ .ws-heatmap__lane-head))) > .ws-heatmap__open { inset: auto 0 0; }
99
+ :is(.ws-heatmap__row:last-child > .ws-heatmap__cell, .ws-heatmap__grid--lanes > .ws-heatmap__cell:is(:last-child, :has(+ .ws-heatmap__lane-head))):has(> .ws-heatmap__open) > :is(.ws-heatmap__label, .ws-heatmap__foot) { translate: 0 calc((var(--space-5xl) + var(--space-xs)) * var(--ws-heat-open) * -1); }
100
+ /* Its details (North's hover tile): the share of pace 13 / 18 semibold, a PaceBar in the square's ink on a track of it,
101
+ and the door: the 32 tall band at its foot, "Open" and a 16 px chevron on a shade of the ink. */
102
+ .ws-heatmap__share { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 600; color: var(--ink); }
103
+ .ws-heatmap__open .ws-pace-bar { --tone: var(--ink); --ws-track: color-mix(in srgb, var(--ink) 20%, transparent); }
104
+ .ws-heatmap__open .ws-pace-bar__gap { background: transparent; }
105
+ .ws-heatmap__door { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); align-self: end; min-height: var(--ws-control-h); margin: 0 calc(var(--space-sm-plus) * -1); padding: 0 var(--space-xs) 0 var(--space-sm-plus); background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--ink); }
106
+ .ws-heatmap__door > svg { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); }
107
+ @keyframes ws-heatmap-detail { from { opacity: 0; translate: 0 var(--ws-rise); } }
108
+ @keyframes ws-heatmap-dot { from { scale: 0; } }
109
+ @media (prefers-reduced-motion: no-preference) {
110
+ .ws-heatmap__cell:has(> .ws-heatmap__open) { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft), background-color var(--ws-duration-morph) var(--ws-ease-soft), box-shadow var(--ws-duration-hover) var(--ws-ease-soft), z-index 0s linear var(--ws-heat-hide-wait); }
111
+ .ws-heatmap__open { transition: height var(--ws-spring-tile-duration) var(--ws-spring-tile) var(--ws-heat-grow-wait), opacity var(--ws-heat-fade) var(--ws-ease-exit) var(--ws-heat-fade-wait), visibility 0s linear var(--ws-heat-hide-wait); }
112
+ .ws-heatmap__cell:has(> .ws-heatmap__open) > :is(.ws-heatmap__label, .ws-heatmap__foot) { transition: translate var(--ws-spring-tile-duration) var(--ws-spring-tile) var(--ws-heat-grow-wait); }
113
+ /* the intent, then North's 40 ms wait (tileDelay), then 35 ms apart */
114
+ .ws-heatmap__open > * { animation: var(--ws-heat-detail) var(--ws-duration-settle) var(--ws-ease-soft) backwards; animation-delay: calc(var(--ws-hover-intent) * 2); }
115
+ .ws-heatmap__open > :nth-child(2) { animation-delay: calc(var(--ws-hover-intent) * 2 + var(--ws-stagger-square)); }
116
+ .ws-heatmap__open > :nth-child(3) { animation-delay: calc(var(--ws-hover-intent) * 2 + var(--ws-stagger-square) * 2); }
117
+ .ws-heatmap__open .ws-pace-bar__fill { animation: var(--ws-heat-fill) var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-hover-intent) * 2 + var(--ws-stagger-square)); }
118
+ .ws-heatmap__open .ws-pace-bar__dot { animation: var(--ws-heat-dot) var(--ws-spring-mark-duration) var(--ws-spring-mark) backwards; animation-delay: calc(var(--ws-hover-intent) * 2 + var(--ws-stagger-square) + var(--ws-duration-text)); }
119
+ }
package/design-system/components/Hero/README.md CHANGED
@@ -11,83 +11,101 @@ A landing page's opening section: a headline and lead over two CTAs, a product s
11
11
  ## Not for
12
12
 
13
13
  - Any product screen inside a product built on this system: a signed-in workspace has no hero section; its header is
14
- `PageHero` or `PageBar`, both scoped to a signed-in page, not a sales pitch.
14
+ `PageHero` or `PageBar`.
15
15
  - A section lower on the page that is not the first thing seen: that is `FeatureGrid`, `PricingTable` or
16
16
  `Testimonial`, not a second `Hero`.
17
17
 
18
18
  ## Anatomy
19
19
 
20
- - Outer band: `--color-white` background, content capped at `--layout-content-max` (1344px) and centred, with
21
- `--layout-margin` (48px) side padding and `--space-3xl` (48px) top and bottom padding.
22
- - Copy column: an eyebrow (`ws-eyebrow`, muted, uppercase, never salmon), a headline at `--font-size-5xl` (56px)
23
- semibold navy, a lead paragraph `--space-md` (16px) below at `--font-size-lg` (18px) in `--color-text-primary`,
24
- capped near 46 characters a line, then two `KitButton`s `--space-xl` (32px) below that, `--space-md` apart.
25
- - Media column: a 4px-radius (`--radius-sm`) white card with a hairline border standing in for a product
26
- screenshot, filled with the dotted field (`ws-dots`) rather than a placeholder image.
20
+ - Band: `--color-surface`, content capped at `--layout-content-max` (1344px) and centred, `--layout-margin` (48px)
21
+ sides (16px under 40rem), `--space-3xl` (48px) top and bottom.
22
+ - Copy column (`__copy`): an eyebrow (`ws-eyebrow`, muted, uppercase, never salmon), `--space-sm` (12px) above the
23
+ headline; the headline (`__headline`) 56/64 semibold `--color-text-heading`, balanced; the lead (`__lead`)
24
+ `--space-md` (16px) below at 18/28 `--color-text-primary`, capped at 46 characters a line; the acts (`__acts`)
25
+ `--space-xl` (32px) below that, two `KitButton`s `--space-md` apart.
26
+ - Media column (`__media`): a 4px-radius card with a hairline edge, 280px tall, at most 360px wide, filled with the
27
+ dotted field (`ws-dots`) rather than a placeholder image; the field inside takes 3px corners, concentric with the edge.
28
+ - The two columns sit `--space-3xl` (48px) apart and wrap to one column, copy first.
27
29
 
28
30
  ## Variants and sizes
29
31
 
30
- One layout. The copy column and the media column share the row and wrap to a single column below the content
31
- width, copy first (so a phone reads the headline before the image).
32
+ One layout. Under 40rem (a phone): the 16px margin, the headline a step down to 40/48 (`--font-size-3xl`), and the
33
+ acts full width, one under the other, so the main act is a 45px bar edge to edge.
32
34
 
33
35
  ## States
34
36
 
35
37
  - **Default:** as above.
36
- - **Hover / focus / selected / pressed:** not applicable to the section itself; its two buttons carry their own
37
- states (see `KitButton`).
38
- - **Pending / disabled / error:** not applicable.
39
- - **Empty:** not applicable; a hero is never shown without its headline.
40
- - **Long label:** a longer headline wraps across more lines inside the fixed-width copy column; the media column
41
- does not resize to compensate.
42
- - **Narrow:** below the content width, the media column drops beneath the copy column at its own width, capped at
43
- 360px so it never crowds a tablet-width page.
38
+ - **Hover / focus / pressed:** the section has none; its buttons carry their own (see `KitButton`).
39
+ - **Pending / disabled / error / empty:** not applicable; a hero is never shown without its headline.
40
+ - **Long label:** the headline wraps in balanced lines; a word wider than the column breaks rather than running past
41
+ the screen.
42
+ - **Narrow:** the media column drops under the copy at its own width.
44
43
 
45
44
  ## Behaviour
46
45
 
47
46
  - Keyboard: the headline and lead are static text; the two buttons are the only focusable elements, in DOM order.
48
- - Pointer / touch: only the buttons react.
49
- - Motion: none of its own; a page may choose to have the copy rise in (`ws-rise`) on load, which is a page-level
50
- decision, not part of this section.
47
+ - Pointer / touch: only the buttons react; on a phone they are full width and 45px tall.
48
+ - Motion: none of its own; a page may choose to have the copy rise in (`ws-rise`) on load.
51
49
 
52
50
  ## Content
53
51
 
54
52
  - Eyebrow: a short, muted context line, never salmon (salmon is a mark colour, never a word).
55
53
  - Headline: one sentence, sentence case, states the outcome, not the feature ("Turn every lead into a listing
56
- appointment," not "AI-powered lead management").
54
+ appointment," not "AI-powered lead management"). One `h1` per page.
57
55
  - Lead: one sentence of proof or mechanism under the headline, no em dash.
58
- - Actions: a primary CTA ("Book a demo") and a secondary, quieter one ("See how it works").
56
+ - Acts: a primary CTA ("Book a demo") and a secondary, quieter one ("See how it works").
59
57
 
60
58
  ## Props
61
59
 
62
- Not a kit export; a page composes it from `KitButton` and the layout tokens below. A reusable version would take:
60
+ Not a kit export; a page composes it from `KitButton` and the layout tokens. A reusable version would take:
63
61
 
64
62
  | Prop | Type | Meaning |
65
63
  | --- | --- | --- |
66
64
  | `eyebrow` | `string` | the muted line above the headline |
67
65
  | `headline` | `string` | the one-sentence headline |
68
66
  | `lead` | `string` | the paragraph under it |
69
- | `primaryCta` / `secondaryCta` | `{ label: string; href: string }` | the two actions |
67
+ | `primaryCta` / `secondaryCta` | `{ label: string; href: string }` | the two acts |
70
68
  | `media` | `React.ReactNode` | the right-hand image or placeholder |
71
69
 
72
70
  ## Rules
73
71
 
74
- - **Intentional addition, decided from the system (26 Oct 2026):** the kit ships no `Hero`, `FeatureGrid`,
75
- `PricingTable`, `Testimonial`, `Footer` or `MarketingNav`; a landing page needs all six, and each is built here
76
- from the kit's own layout and type tokens rather than invented from nothing.
77
- - Width and margins come straight from the kit's layout tokens: `--layout-content-max` (1344px) is "the design
78
- canvas's content column," and `--layout-margin` (48px) its side gutter (`tokens/tokens.md`, "Layout").
79
- - The headline size is the kit's own marketing step for exactly this job: `tokens.json`'s type scale names
80
- `font-size-5xl` "marketing hero" and `font-size-4xl` "marketing section heading," so a `Hero` reaches for `5xl`
81
- and leaves `4xl` for section titles like `FeatureGrid`'s.
82
- - The eyebrow stays `ws-eyebrow` (muted uppercase), never salmon: salmon is reserved as "a data tone and the
83
- 'needs you' mark, never... a wash" (`$P/tokens.json`, usage note on `color-brand-salmon`), and a word is never a
84
- mark.
85
- - The media slot is a 4px white card with the dots field rather than a stock photo, so the gallery never ships a
86
- fabricated product screenshot: the same "honest data, nothing invented" instinct the product applies to a card
87
- whose data does not exist (`02-principles.md`, principle 10), applied here to imagery instead of numbers.
72
+ - **One edge with the other bands** (4 Nov 2026): the 48px margin sat inside the 1344px cap, so on a screen wider
73
+ than 1344px the copy started further in than the feature cards, the plans and the footer (48px at 1440, where it also
74
+ missed the nav's wordmark) and the shot ended short of their right edge. The margin is on the band now and the cap on
75
+ the content, as those bands do it.
76
+ - **Headings step down on a phone** (`19-public-pages.md`, layout): at 390px the 56px "appointment." ran 66px past its
77
+ box and 18px past the screen. Under 40rem it is 40/48, which fits a 288px column at 320.
78
+ - **Mobile first** (`19-public-pages.md`): one column in reading order, the headline before the picture, the act full
79
+ width, the 16px page margin.
80
+ - The headline size is the kit's marketing step for this job: `font-size-5xl` "marketing hero", leaving `4xl` for
81
+ section titles.
82
+ - The media slot is a white card with the dots field rather than a stock photo, so the gallery never ships a
83
+ fabricated product screenshot.
88
84
 
89
85
  ## Source
90
86
 
91
87
  - **Derived from**: the system's layout and type tokens (`layout-content-max`, `layout-margin`, `font-size-5xl`,
92
- `font-size-lg`, `space-3xl`, `ws-eyebrow`, `ws-dots`) and `KitButton` for the two actions.
88
+ `font-size-3xl`, `font-size-lg`, `space-3xl`, `ws-eyebrow`, `ws-dots`), `KitButton` for the acts, the public page
89
+ rules and the geometry check at 320 and 390.
93
90
  - **Precedent**: an intentional addition decided from the system, 26 Oct 2026.
91
+
92
+ ## Markup
93
+
94
+ ```html
95
+ <section class="ws-hero">
96
+ <div class="ws-hero__inner">
97
+ <div class="ws-hero__copy">
98
+ <p class="ws-eyebrow ws-hero__eyebrow">For team leaders</p>
99
+ <h1 class="ws-hero__headline">Turn every lead into a listing appointment.</h1>
100
+ <p class="ws-hero__lead">Give your team the call scripts, daily goals and follow-up reminders that turn a cold list into booked appointments.</p>
101
+ <div class="ws-hero__acts">
102
+ <a class="ws-kit-button ws-kit-button--large ws-kit-button--primary" href="/demo">Book a demo</a>
103
+ <a class="ws-kit-button ws-kit-button--large ws-kit-button--secondary" href="/how-it-works">See how it works</a>
104
+ </div>
105
+ </div>
106
+ <div class="ws-hero__media"><div class="ws-hero__shot"><div class="ws-hero__shot-inner ws-dots"></div></div></div>
107
+ </div>
108
+ </section>
109
+ ```
110
+
111
+ Styles: the `Hero` block (`components/Hero/style.css`), plus `KitButton`.
package/design-system/components/Hero/preview.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Marketing" height=417 -->
2
2
  <!doctype html>
3
- <html>
3
+ <html lang="en">
4
4
  <head>
5
5
  <meta charset="utf-8">
6
6
  <title>Hero</title>
package/design-system/components/Hero/style.css ADDED
@@ -0,0 +1,19 @@
1
+ /* ---- Hero: the kit's landing headline block, words and one act beside the product shot ---- */
2
+ .ws-hero { background: var(--color-surface); width: 100%; padding: 0 var(--layout-margin); }
3
+ /* The margin is on the band and the cap on the content, as FeatureGrid, PricingTable and Footer do it, so the copy starts
4
+ on the same edge as every other band on a wide screen (inside the cap it sat 48px further in). */
5
+ .ws-hero__inner { max-width: var(--layout-content-max); margin: 0 auto; padding: var(--space-3xl) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xl); }
6
+ .ws-hero__copy { flex: 2 1 calc(var(--space-9xl) * 1.9); min-width: 0; }
7
+ .ws-hero__eyebrow { margin-bottom: var(--space-sm); }
8
+ .ws-hero__headline { font-size: var(--font-size-5xl); line-height: var(--space-4xl); font-weight: 600; color: var(--color-text-heading); margin: 0; text-wrap: balance; overflow-wrap: break-word; }
9
+ .ws-hero__lead { margin-top: var(--space-md); font-size: var(--font-size-lg); line-height: var(--ws-leading-title); color: var(--color-text-primary); max-width: 46ch; }
10
+ .ws-hero__acts { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); }
11
+ .ws-hero__media { flex: 1 1 calc(var(--space-9xl) + var(--space-5xl)); min-width: 0; max-width: calc(var(--space-9xl) + var(--space-8xl)); }
12
+ .ws-hero__shot { border-radius: var(--ws-radius-control); border: var(--ws-line) solid var(--color-border-default); background: var(--color-surface); height: calc(var(--space-9xl) + var(--space-5xl)); display: flex; align-items: center; justify-content: center; }
13
+ .ws-hero__shot-inner { width: 100%; height: 100%; border-radius: calc(var(--ws-radius-control) - var(--ws-line)); } /* concentric inside the 1px edge */
14
+ /* A phone: the 16 px margin, the headline a step down (56 to 40), the acts full width, one under the other. */
15
+ @media (max-width: 40rem) {
16
+ .ws-hero { padding-inline: var(--space-md); }
17
+ .ws-hero__headline { font-size: var(--font-size-3xl); line-height: var(--space-3xl); }
18
+ .ws-hero__acts { flex-direction: column; align-items: stretch; }
19
+ }