@aexol/spectral 0.7.0 → 0.7.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 (459) hide show
  1. package/dist/agent/index.js +76 -301
  2. package/dist/cli.js +11 -0
  3. package/dist/designer/data/systems/agentic/DESIGN.md +71 -0
  4. package/dist/designer/data/systems/agentic/components.html +154 -0
  5. package/dist/designer/data/systems/agentic/tokens.css +63 -0
  6. package/dist/designer/data/systems/airbnb/DESIGN.md +393 -0
  7. package/dist/designer/data/systems/airbnb/components.html +1373 -0
  8. package/dist/designer/data/systems/airbnb/tokens.css +261 -0
  9. package/dist/designer/data/systems/airtable/DESIGN.md +92 -0
  10. package/dist/designer/data/systems/airtable/components.html +489 -0
  11. package/dist/designer/data/systems/airtable/tokens.css +261 -0
  12. package/dist/designer/data/systems/ant/DESIGN.md +71 -0
  13. package/dist/designer/data/systems/ant/components.html +154 -0
  14. package/dist/designer/data/systems/ant/tokens.css +63 -0
  15. package/dist/designer/data/systems/apple/DESIGN.md +250 -0
  16. package/dist/designer/data/systems/apple/components.html +749 -0
  17. package/dist/designer/data/systems/apple/tokens.css +286 -0
  18. package/dist/designer/data/systems/application/DESIGN.md +71 -0
  19. package/dist/designer/data/systems/application/components.html +154 -0
  20. package/dist/designer/data/systems/application/tokens.css +63 -0
  21. package/dist/designer/data/systems/arc/DESIGN.md +152 -0
  22. package/dist/designer/data/systems/arc/components.html +432 -0
  23. package/dist/designer/data/systems/arc/tokens.css +137 -0
  24. package/dist/designer/data/systems/artistic/DESIGN.md +71 -0
  25. package/dist/designer/data/systems/artistic/components.html +136 -0
  26. package/dist/designer/data/systems/artistic/tokens.css +63 -0
  27. package/dist/designer/data/systems/atelier-zero/DESIGN.md +316 -0
  28. package/dist/designer/data/systems/atelier-zero/components.html +136 -0
  29. package/dist/designer/data/systems/atelier-zero/tokens.css +63 -0
  30. package/dist/designer/data/systems/bento/DESIGN.md +71 -0
  31. package/dist/designer/data/systems/bento/components.html +136 -0
  32. package/dist/designer/data/systems/bento/tokens.css +63 -0
  33. package/dist/designer/data/systems/binance/DESIGN.md +348 -0
  34. package/dist/designer/data/systems/binance/components.html +550 -0
  35. package/dist/designer/data/systems/binance/tokens.css +255 -0
  36. package/dist/designer/data/systems/bmw/DESIGN.md +183 -0
  37. package/dist/designer/data/systems/bmw/components.html +551 -0
  38. package/dist/designer/data/systems/bmw/tokens.css +179 -0
  39. package/dist/designer/data/systems/bmw-m/DESIGN.md +246 -0
  40. package/dist/designer/data/systems/bmw-m/components.html +342 -0
  41. package/dist/designer/data/systems/bmw-m/tokens.css +64 -0
  42. package/dist/designer/data/systems/bold/DESIGN.md +71 -0
  43. package/dist/designer/data/systems/bold/components.html +136 -0
  44. package/dist/designer/data/systems/bold/tokens.css +63 -0
  45. package/dist/designer/data/systems/brutalism/DESIGN.md +71 -0
  46. package/dist/designer/data/systems/brutalism/components.html +154 -0
  47. package/dist/designer/data/systems/brutalism/tokens.css +63 -0
  48. package/dist/designer/data/systems/bugatti/DESIGN.md +271 -0
  49. package/dist/designer/data/systems/bugatti/components.html +342 -0
  50. package/dist/designer/data/systems/bugatti/tokens.css +64 -0
  51. package/dist/designer/data/systems/cafe/DESIGN.md +71 -0
  52. package/dist/designer/data/systems/cafe/components.html +136 -0
  53. package/dist/designer/data/systems/cafe/tokens.css +63 -0
  54. package/dist/designer/data/systems/cal/DESIGN.md +262 -0
  55. package/dist/designer/data/systems/cal/components.html +376 -0
  56. package/dist/designer/data/systems/cal/tokens.css +265 -0
  57. package/dist/designer/data/systems/canva/DESIGN.md +157 -0
  58. package/dist/designer/data/systems/canva/components.html +461 -0
  59. package/dist/designer/data/systems/canva/tokens.css +147 -0
  60. package/dist/designer/data/systems/cisco/DESIGN.md +201 -0
  61. package/dist/designer/data/systems/cisco/components.html +342 -0
  62. package/dist/designer/data/systems/cisco/tokens.css +64 -0
  63. package/dist/designer/data/systems/claude/DESIGN.md +315 -0
  64. package/dist/designer/data/systems/claude/components.html +483 -0
  65. package/dist/designer/data/systems/claude/tokens.css +130 -0
  66. package/dist/designer/data/systems/clay/DESIGN.md +307 -0
  67. package/dist/designer/data/systems/clay/components.html +136 -0
  68. package/dist/designer/data/systems/clay/tokens.css +63 -0
  69. package/dist/designer/data/systems/claymorphism/DESIGN.md +71 -0
  70. package/dist/designer/data/systems/claymorphism/components.html +136 -0
  71. package/dist/designer/data/systems/claymorphism/tokens.css +63 -0
  72. package/dist/designer/data/systems/clean/DESIGN.md +71 -0
  73. package/dist/designer/data/systems/clean/components.html +136 -0
  74. package/dist/designer/data/systems/clean/tokens.css +63 -0
  75. package/dist/designer/data/systems/clickhouse/DESIGN.md +284 -0
  76. package/dist/designer/data/systems/clickhouse/components.html +506 -0
  77. package/dist/designer/data/systems/clickhouse/tokens.css +135 -0
  78. package/dist/designer/data/systems/cohere/DESIGN.md +269 -0
  79. package/dist/designer/data/systems/cohere/components.html +353 -0
  80. package/dist/designer/data/systems/cohere/tokens.css +126 -0
  81. package/dist/designer/data/systems/coinbase/DESIGN.md +132 -0
  82. package/dist/designer/data/systems/coinbase/components.html +501 -0
  83. package/dist/designer/data/systems/coinbase/tokens.css +257 -0
  84. package/dist/designer/data/systems/colorful/DESIGN.md +71 -0
  85. package/dist/designer/data/systems/colorful/components.html +136 -0
  86. package/dist/designer/data/systems/colorful/tokens.css +63 -0
  87. package/dist/designer/data/systems/composio/DESIGN.md +310 -0
  88. package/dist/designer/data/systems/composio/components.html +342 -0
  89. package/dist/designer/data/systems/composio/tokens.css +64 -0
  90. package/dist/designer/data/systems/contemporary/DESIGN.md +71 -0
  91. package/dist/designer/data/systems/contemporary/components.html +136 -0
  92. package/dist/designer/data/systems/contemporary/tokens.css +63 -0
  93. package/dist/designer/data/systems/corporate/DESIGN.md +71 -0
  94. package/dist/designer/data/systems/corporate/components.html +136 -0
  95. package/dist/designer/data/systems/corporate/tokens.css +63 -0
  96. package/dist/designer/data/systems/cosmic/DESIGN.md +71 -0
  97. package/dist/designer/data/systems/cosmic/components.html +136 -0
  98. package/dist/designer/data/systems/cosmic/tokens.css +63 -0
  99. package/dist/designer/data/systems/creative/DESIGN.md +71 -0
  100. package/dist/designer/data/systems/creative/components.html +136 -0
  101. package/dist/designer/data/systems/creative/tokens.css +63 -0
  102. package/dist/designer/data/systems/cursor/DESIGN.md +312 -0
  103. package/dist/designer/data/systems/cursor/components.html +654 -0
  104. package/dist/designer/data/systems/cursor/tokens.css +218 -0
  105. package/dist/designer/data/systems/dashboard/DESIGN.md +71 -0
  106. package/dist/designer/data/systems/dashboard/components.html +154 -0
  107. package/dist/designer/data/systems/dashboard/tokens.css +63 -0
  108. package/dist/designer/data/systems/default/DESIGN.md +62 -0
  109. package/dist/designer/data/systems/default/components.html +523 -0
  110. package/dist/designer/data/systems/default/tokens.css +200 -0
  111. package/dist/designer/data/systems/discord/DESIGN.md +162 -0
  112. package/dist/designer/data/systems/discord/components.html +359 -0
  113. package/dist/designer/data/systems/discord/tokens.css +125 -0
  114. package/dist/designer/data/systems/dithered/DESIGN.md +71 -0
  115. package/dist/designer/data/systems/dithered/components.html +136 -0
  116. package/dist/designer/data/systems/dithered/tokens.css +63 -0
  117. package/dist/designer/data/systems/doodle/DESIGN.md +71 -0
  118. package/dist/designer/data/systems/doodle/components.html +136 -0
  119. package/dist/designer/data/systems/doodle/tokens.css +63 -0
  120. package/dist/designer/data/systems/dramatic/DESIGN.md +71 -0
  121. package/dist/designer/data/systems/dramatic/components.html +136 -0
  122. package/dist/designer/data/systems/dramatic/tokens.css +63 -0
  123. package/dist/designer/data/systems/duolingo/DESIGN.md +154 -0
  124. package/dist/designer/data/systems/duolingo/components.html +532 -0
  125. package/dist/designer/data/systems/duolingo/tokens.css +130 -0
  126. package/dist/designer/data/systems/editorial/DESIGN.md +71 -0
  127. package/dist/designer/data/systems/editorial/components.html +154 -0
  128. package/dist/designer/data/systems/editorial/tokens.css +63 -0
  129. package/dist/designer/data/systems/elegant/DESIGN.md +71 -0
  130. package/dist/designer/data/systems/elegant/components.html +136 -0
  131. package/dist/designer/data/systems/elegant/tokens.css +63 -0
  132. package/dist/designer/data/systems/elevenlabs/DESIGN.md +268 -0
  133. package/dist/designer/data/systems/elevenlabs/components.html +342 -0
  134. package/dist/designer/data/systems/elevenlabs/tokens.css +127 -0
  135. package/dist/designer/data/systems/energetic/DESIGN.md +72 -0
  136. package/dist/designer/data/systems/energetic/components.html +136 -0
  137. package/dist/designer/data/systems/energetic/tokens.css +63 -0
  138. package/dist/designer/data/systems/enterprise/DESIGN.md +71 -0
  139. package/dist/designer/data/systems/enterprise/components.html +154 -0
  140. package/dist/designer/data/systems/enterprise/tokens.css +63 -0
  141. package/dist/designer/data/systems/expo/DESIGN.md +284 -0
  142. package/dist/designer/data/systems/expo/components.html +342 -0
  143. package/dist/designer/data/systems/expo/tokens.css +64 -0
  144. package/dist/designer/data/systems/expressive/DESIGN.md +71 -0
  145. package/dist/designer/data/systems/expressive/components.html +136 -0
  146. package/dist/designer/data/systems/expressive/tokens.css +63 -0
  147. package/dist/designer/data/systems/fantasy/DESIGN.md +71 -0
  148. package/dist/designer/data/systems/fantasy/components.html +136 -0
  149. package/dist/designer/data/systems/fantasy/tokens.css +63 -0
  150. package/dist/designer/data/systems/ferrari/DESIGN.md +317 -0
  151. package/dist/designer/data/systems/ferrari/components.html +342 -0
  152. package/dist/designer/data/systems/ferrari/tokens.css +64 -0
  153. package/dist/designer/data/systems/figma/DESIGN.md +223 -0
  154. package/dist/designer/data/systems/figma/components.html +344 -0
  155. package/dist/designer/data/systems/figma/tokens.css +126 -0
  156. package/dist/designer/data/systems/flat/DESIGN.md +71 -0
  157. package/dist/designer/data/systems/flat/components.html +136 -0
  158. package/dist/designer/data/systems/flat/tokens.css +63 -0
  159. package/dist/designer/data/systems/framer/DESIGN.md +249 -0
  160. package/dist/designer/data/systems/framer/components.html +438 -0
  161. package/dist/designer/data/systems/framer/tokens.css +238 -0
  162. package/dist/designer/data/systems/friendly/DESIGN.md +71 -0
  163. package/dist/designer/data/systems/friendly/components.html +136 -0
  164. package/dist/designer/data/systems/friendly/tokens.css +63 -0
  165. package/dist/designer/data/systems/futuristic/DESIGN.md +71 -0
  166. package/dist/designer/data/systems/futuristic/components.html +136 -0
  167. package/dist/designer/data/systems/futuristic/tokens.css +63 -0
  168. package/dist/designer/data/systems/github/DESIGN.md +155 -0
  169. package/dist/designer/data/systems/github/components.html +383 -0
  170. package/dist/designer/data/systems/github/tokens.css +125 -0
  171. package/dist/designer/data/systems/glassmorphism/DESIGN.md +71 -0
  172. package/dist/designer/data/systems/glassmorphism/components.html +154 -0
  173. package/dist/designer/data/systems/glassmorphism/tokens.css +63 -0
  174. package/dist/designer/data/systems/gradient/DESIGN.md +71 -0
  175. package/dist/designer/data/systems/gradient/components.html +154 -0
  176. package/dist/designer/data/systems/gradient/tokens.css +63 -0
  177. package/dist/designer/data/systems/hashicorp/DESIGN.md +281 -0
  178. package/dist/designer/data/systems/hashicorp/components.html +502 -0
  179. package/dist/designer/data/systems/hashicorp/tokens.css +272 -0
  180. package/dist/designer/data/systems/hud/DESIGN.md +173 -0
  181. package/dist/designer/data/systems/hud/components.html +136 -0
  182. package/dist/designer/data/systems/hud/tokens.css +63 -0
  183. package/dist/designer/data/systems/huggingface/DESIGN.md +149 -0
  184. package/dist/designer/data/systems/huggingface/components.html +346 -0
  185. package/dist/designer/data/systems/huggingface/tokens.css +125 -0
  186. package/dist/designer/data/systems/ibm/DESIGN.md +335 -0
  187. package/dist/designer/data/systems/ibm/components.html +342 -0
  188. package/dist/designer/data/systems/ibm/tokens.css +64 -0
  189. package/dist/designer/data/systems/intercom/DESIGN.md +149 -0
  190. package/dist/designer/data/systems/intercom/components.html +557 -0
  191. package/dist/designer/data/systems/intercom/tokens.css +150 -0
  192. package/dist/designer/data/systems/kami/DESIGN.md +410 -0
  193. package/dist/designer/data/systems/kami/components.html +601 -0
  194. package/dist/designer/data/systems/kami/tokens.css +272 -0
  195. package/dist/designer/data/systems/kraken/DESIGN.md +128 -0
  196. package/dist/designer/data/systems/kraken/components.html +342 -0
  197. package/dist/designer/data/systems/kraken/tokens.css +64 -0
  198. package/dist/designer/data/systems/lamborghini/DESIGN.md +291 -0
  199. package/dist/designer/data/systems/lamborghini/components.html +342 -0
  200. package/dist/designer/data/systems/lamborghini/tokens.css +64 -0
  201. package/dist/designer/data/systems/levels/DESIGN.md +71 -0
  202. package/dist/designer/data/systems/levels/components.html +154 -0
  203. package/dist/designer/data/systems/levels/tokens.css +63 -0
  204. package/dist/designer/data/systems/linear-app/DESIGN.md +370 -0
  205. package/dist/designer/data/systems/linear-app/components.html +370 -0
  206. package/dist/designer/data/systems/linear-app/tokens.css +130 -0
  207. package/dist/designer/data/systems/lingo/DESIGN.md +71 -0
  208. package/dist/designer/data/systems/lingo/components.html +154 -0
  209. package/dist/designer/data/systems/lingo/tokens.css +63 -0
  210. package/dist/designer/data/systems/loom/DESIGN.md +201 -0
  211. package/dist/designer/data/systems/loom/components.html +446 -0
  212. package/dist/designer/data/systems/loom/tokens.css +138 -0
  213. package/dist/designer/data/systems/lovable/DESIGN.md +301 -0
  214. package/dist/designer/data/systems/lovable/components.html +441 -0
  215. package/dist/designer/data/systems/lovable/tokens.css +258 -0
  216. package/dist/designer/data/systems/luxury/DESIGN.md +71 -0
  217. package/dist/designer/data/systems/luxury/components.html +154 -0
  218. package/dist/designer/data/systems/luxury/tokens.css +63 -0
  219. package/dist/designer/data/systems/mastercard/DESIGN.md +368 -0
  220. package/dist/designer/data/systems/mastercard/components.html +342 -0
  221. package/dist/designer/data/systems/mastercard/tokens.css +64 -0
  222. package/dist/designer/data/systems/material/DESIGN.md +71 -0
  223. package/dist/designer/data/systems/material/components.html +154 -0
  224. package/dist/designer/data/systems/material/tokens.css +63 -0
  225. package/dist/designer/data/systems/meta/DESIGN.md +369 -0
  226. package/dist/designer/data/systems/meta/components.html +398 -0
  227. package/dist/designer/data/systems/meta/tokens.css +263 -0
  228. package/dist/designer/data/systems/minimal/DESIGN.md +71 -0
  229. package/dist/designer/data/systems/minimal/components.html +154 -0
  230. package/dist/designer/data/systems/minimal/tokens.css +63 -0
  231. package/dist/designer/data/systems/minimax/DESIGN.md +260 -0
  232. package/dist/designer/data/systems/minimax/components.html +590 -0
  233. package/dist/designer/data/systems/minimax/tokens.css +148 -0
  234. package/dist/designer/data/systems/mintlify/DESIGN.md +329 -0
  235. package/dist/designer/data/systems/mintlify/components.html +737 -0
  236. package/dist/designer/data/systems/mintlify/tokens.css +256 -0
  237. package/dist/designer/data/systems/miro/DESIGN.md +111 -0
  238. package/dist/designer/data/systems/miro/components.html +342 -0
  239. package/dist/designer/data/systems/miro/tokens.css +64 -0
  240. package/dist/designer/data/systems/mission-control/DESIGN.md +474 -0
  241. package/dist/designer/data/systems/mission-control/components.html +136 -0
  242. package/dist/designer/data/systems/mission-control/tokens.css +63 -0
  243. package/dist/designer/data/systems/mistral-ai/DESIGN.md +264 -0
  244. package/dist/designer/data/systems/mistral-ai/components.html +338 -0
  245. package/dist/designer/data/systems/mistral-ai/tokens.css +125 -0
  246. package/dist/designer/data/systems/modern/DESIGN.md +71 -0
  247. package/dist/designer/data/systems/modern/components.html +154 -0
  248. package/dist/designer/data/systems/modern/tokens.css +63 -0
  249. package/dist/designer/data/systems/mongodb/DESIGN.md +269 -0
  250. package/dist/designer/data/systems/mongodb/components.html +462 -0
  251. package/dist/designer/data/systems/mongodb/tokens.css +176 -0
  252. package/dist/designer/data/systems/mono/DESIGN.md +71 -0
  253. package/dist/designer/data/systems/mono/components.html +136 -0
  254. package/dist/designer/data/systems/mono/tokens.css +63 -0
  255. package/dist/designer/data/systems/neobrutalism/DESIGN.md +71 -0
  256. package/dist/designer/data/systems/neobrutalism/components.html +136 -0
  257. package/dist/designer/data/systems/neobrutalism/tokens.css +63 -0
  258. package/dist/designer/data/systems/neon/DESIGN.md +71 -0
  259. package/dist/designer/data/systems/neon/components.html +136 -0
  260. package/dist/designer/data/systems/neon/tokens.css +63 -0
  261. package/dist/designer/data/systems/neumorphism/DESIGN.md +71 -0
  262. package/dist/designer/data/systems/neumorphism/components.html +136 -0
  263. package/dist/designer/data/systems/neumorphism/tokens.css +63 -0
  264. package/dist/designer/data/systems/nike/DESIGN.md +366 -0
  265. package/dist/designer/data/systems/nike/components.html +512 -0
  266. package/dist/designer/data/systems/nike/tokens.css +304 -0
  267. package/dist/designer/data/systems/notion/DESIGN.md +312 -0
  268. package/dist/designer/data/systems/notion/components.html +413 -0
  269. package/dist/designer/data/systems/notion/tokens.css +130 -0
  270. package/dist/designer/data/systems/nvidia/DESIGN.md +296 -0
  271. package/dist/designer/data/systems/nvidia/components.html +414 -0
  272. package/dist/designer/data/systems/nvidia/tokens.css +133 -0
  273. package/dist/designer/data/systems/ollama/DESIGN.md +270 -0
  274. package/dist/designer/data/systems/ollama/components.html +700 -0
  275. package/dist/designer/data/systems/ollama/tokens.css +242 -0
  276. package/dist/designer/data/systems/openai/DESIGN.md +140 -0
  277. package/dist/designer/data/systems/openai/components.html +382 -0
  278. package/dist/designer/data/systems/openai/tokens.css +133 -0
  279. package/dist/designer/data/systems/opencode-ai/DESIGN.md +284 -0
  280. package/dist/designer/data/systems/opencode-ai/components.html +389 -0
  281. package/dist/designer/data/systems/opencode-ai/tokens.css +126 -0
  282. package/dist/designer/data/systems/pacman/DESIGN.md +71 -0
  283. package/dist/designer/data/systems/pacman/components.html +342 -0
  284. package/dist/designer/data/systems/pacman/tokens.css +64 -0
  285. package/dist/designer/data/systems/paper/DESIGN.md +71 -0
  286. package/dist/designer/data/systems/paper/components.html +136 -0
  287. package/dist/designer/data/systems/paper/tokens.css +63 -0
  288. package/dist/designer/data/systems/perplexity/DESIGN.md +286 -0
  289. package/dist/designer/data/systems/perplexity/components.html +455 -0
  290. package/dist/designer/data/systems/perplexity/tokens.css +151 -0
  291. package/dist/designer/data/systems/perspective/DESIGN.md +71 -0
  292. package/dist/designer/data/systems/perspective/components.html +136 -0
  293. package/dist/designer/data/systems/perspective/tokens.css +63 -0
  294. package/dist/designer/data/systems/pinterest/DESIGN.md +233 -0
  295. package/dist/designer/data/systems/pinterest/components.html +865 -0
  296. package/dist/designer/data/systems/pinterest/tokens.css +262 -0
  297. package/dist/designer/data/systems/playstation/DESIGN.md +367 -0
  298. package/dist/designer/data/systems/playstation/components.html +414 -0
  299. package/dist/designer/data/systems/playstation/tokens.css +150 -0
  300. package/dist/designer/data/systems/posthog/DESIGN.md +259 -0
  301. package/dist/designer/data/systems/posthog/components.html +827 -0
  302. package/dist/designer/data/systems/posthog/tokens.css +272 -0
  303. package/dist/designer/data/systems/premium/DESIGN.md +71 -0
  304. package/dist/designer/data/systems/premium/components.html +154 -0
  305. package/dist/designer/data/systems/premium/tokens.css +63 -0
  306. package/dist/designer/data/systems/professional/DESIGN.md +71 -0
  307. package/dist/designer/data/systems/professional/components.html +136 -0
  308. package/dist/designer/data/systems/professional/tokens.css +63 -0
  309. package/dist/designer/data/systems/publication/DESIGN.md +71 -0
  310. package/dist/designer/data/systems/publication/components.html +154 -0
  311. package/dist/designer/data/systems/publication/tokens.css +63 -0
  312. package/dist/designer/data/systems/raycast/DESIGN.md +271 -0
  313. package/dist/designer/data/systems/raycast/components.html +507 -0
  314. package/dist/designer/data/systems/raycast/tokens.css +143 -0
  315. package/dist/designer/data/systems/refined/DESIGN.md +71 -0
  316. package/dist/designer/data/systems/refined/components.html +136 -0
  317. package/dist/designer/data/systems/refined/tokens.css +63 -0
  318. package/dist/designer/data/systems/renault/DESIGN.md +314 -0
  319. package/dist/designer/data/systems/renault/components.html +154 -0
  320. package/dist/designer/data/systems/renault/tokens.css +63 -0
  321. package/dist/designer/data/systems/replicate/DESIGN.md +264 -0
  322. package/dist/designer/data/systems/replicate/components.html +340 -0
  323. package/dist/designer/data/systems/replicate/tokens.css +125 -0
  324. package/dist/designer/data/systems/resend/DESIGN.md +306 -0
  325. package/dist/designer/data/systems/resend/components.html +839 -0
  326. package/dist/designer/data/systems/resend/tokens.css +353 -0
  327. package/dist/designer/data/systems/retro/DESIGN.md +71 -0
  328. package/dist/designer/data/systems/retro/components.html +136 -0
  329. package/dist/designer/data/systems/retro/tokens.css +63 -0
  330. package/dist/designer/data/systems/revolut/DESIGN.md +188 -0
  331. package/dist/designer/data/systems/revolut/components.html +342 -0
  332. package/dist/designer/data/systems/revolut/tokens.css +64 -0
  333. package/dist/designer/data/systems/runwayml/DESIGN.md +247 -0
  334. package/dist/designer/data/systems/runwayml/components.html +638 -0
  335. package/dist/designer/data/systems/runwayml/tokens.css +204 -0
  336. package/dist/designer/data/systems/sanity/DESIGN.md +360 -0
  337. package/dist/designer/data/systems/sanity/components.html +342 -0
  338. package/dist/designer/data/systems/sanity/tokens.css +64 -0
  339. package/dist/designer/data/systems/sentry/DESIGN.md +265 -0
  340. package/dist/designer/data/systems/sentry/components.html +387 -0
  341. package/dist/designer/data/systems/sentry/tokens.css +219 -0
  342. package/dist/designer/data/systems/shadcn/DESIGN.md +71 -0
  343. package/dist/designer/data/systems/shadcn/components.html +732 -0
  344. package/dist/designer/data/systems/shadcn/tokens.css +255 -0
  345. package/dist/designer/data/systems/shopify/DESIGN.md +353 -0
  346. package/dist/designer/data/systems/shopify/components.html +342 -0
  347. package/dist/designer/data/systems/shopify/tokens.css +141 -0
  348. package/dist/designer/data/systems/simple/DESIGN.md +71 -0
  349. package/dist/designer/data/systems/simple/components.html +136 -0
  350. package/dist/designer/data/systems/simple/tokens.css +63 -0
  351. package/dist/designer/data/systems/skeumorphism/DESIGN.md +71 -0
  352. package/dist/designer/data/systems/skeumorphism/components.html +136 -0
  353. package/dist/designer/data/systems/skeumorphism/tokens.css +63 -0
  354. package/dist/designer/data/systems/slack/DESIGN.md +363 -0
  355. package/dist/designer/data/systems/slack/components.html +387 -0
  356. package/dist/designer/data/systems/slack/tokens.css +127 -0
  357. package/dist/designer/data/systems/sleek/DESIGN.md +71 -0
  358. package/dist/designer/data/systems/sleek/components.html +136 -0
  359. package/dist/designer/data/systems/sleek/tokens.css +63 -0
  360. package/dist/designer/data/systems/spacex/DESIGN.md +197 -0
  361. package/dist/designer/data/systems/spacex/components.html +496 -0
  362. package/dist/designer/data/systems/spacex/tokens.css +154 -0
  363. package/dist/designer/data/systems/spacious/DESIGN.md +71 -0
  364. package/dist/designer/data/systems/spacious/components.html +136 -0
  365. package/dist/designer/data/systems/spacious/tokens.css +63 -0
  366. package/dist/designer/data/systems/spotify/DESIGN.md +249 -0
  367. package/dist/designer/data/systems/spotify/components.html +365 -0
  368. package/dist/designer/data/systems/spotify/tokens.css +127 -0
  369. package/dist/designer/data/systems/starbucks/DESIGN.md +583 -0
  370. package/dist/designer/data/systems/starbucks/components.html +493 -0
  371. package/dist/designer/data/systems/starbucks/tokens.css +182 -0
  372. package/dist/designer/data/systems/storytelling/DESIGN.md +71 -0
  373. package/dist/designer/data/systems/storytelling/components.html +136 -0
  374. package/dist/designer/data/systems/storytelling/tokens.css +63 -0
  375. package/dist/designer/data/systems/stripe/DESIGN.md +325 -0
  376. package/dist/designer/data/systems/stripe/components.html +1018 -0
  377. package/dist/designer/data/systems/stripe/tokens.css +295 -0
  378. package/dist/designer/data/systems/supabase/DESIGN.md +258 -0
  379. package/dist/designer/data/systems/supabase/components.html +741 -0
  380. package/dist/designer/data/systems/supabase/tokens.css +294 -0
  381. package/dist/designer/data/systems/superhuman/DESIGN.md +255 -0
  382. package/dist/designer/data/systems/superhuman/components.html +537 -0
  383. package/dist/designer/data/systems/superhuman/tokens.css +160 -0
  384. package/dist/designer/data/systems/tesla/DESIGN.md +289 -0
  385. package/dist/designer/data/systems/tesla/components.html +724 -0
  386. package/dist/designer/data/systems/tesla/tokens.css +285 -0
  387. package/dist/designer/data/systems/tetris/DESIGN.md +71 -0
  388. package/dist/designer/data/systems/tetris/components.html +342 -0
  389. package/dist/designer/data/systems/tetris/tokens.css +64 -0
  390. package/dist/designer/data/systems/theverge/DESIGN.md +342 -0
  391. package/dist/designer/data/systems/theverge/components.html +342 -0
  392. package/dist/designer/data/systems/theverge/tokens.css +64 -0
  393. package/dist/designer/data/systems/together-ai/DESIGN.md +266 -0
  394. package/dist/designer/data/systems/together-ai/components.html +422 -0
  395. package/dist/designer/data/systems/together-ai/tokens.css +127 -0
  396. package/dist/designer/data/systems/totality-festival/DESIGN.md +206 -0
  397. package/dist/designer/data/systems/totality-festival/components.html +136 -0
  398. package/dist/designer/data/systems/totality-festival/tokens.css +63 -0
  399. package/dist/designer/data/systems/trading-terminal/DESIGN.md +178 -0
  400. package/dist/designer/data/systems/trading-terminal/components.html +154 -0
  401. package/dist/designer/data/systems/trading-terminal/tokens.css +63 -0
  402. package/dist/designer/data/systems/uber/DESIGN.md +298 -0
  403. package/dist/designer/data/systems/uber/components.html +347 -0
  404. package/dist/designer/data/systems/uber/tokens.css +131 -0
  405. package/dist/designer/data/systems/urdu/DESIGN.md +1002 -0
  406. package/dist/designer/data/systems/urdu/components.html +136 -0
  407. package/dist/designer/data/systems/urdu/tokens.css +63 -0
  408. package/dist/designer/data/systems/vercel/DESIGN.md +313 -0
  409. package/dist/designer/data/systems/vercel/components.html +839 -0
  410. package/dist/designer/data/systems/vercel/tokens.css +270 -0
  411. package/dist/designer/data/systems/vibrant/DESIGN.md +71 -0
  412. package/dist/designer/data/systems/vibrant/components.html +136 -0
  413. package/dist/designer/data/systems/vibrant/tokens.css +63 -0
  414. package/dist/designer/data/systems/vintage/DESIGN.md +71 -0
  415. package/dist/designer/data/systems/vintage/components.html +136 -0
  416. package/dist/designer/data/systems/vintage/tokens.css +63 -0
  417. package/dist/designer/data/systems/vodafone/DESIGN.md +426 -0
  418. package/dist/designer/data/systems/vodafone/components.html +342 -0
  419. package/dist/designer/data/systems/vodafone/tokens.css +64 -0
  420. package/dist/designer/data/systems/voltagent/DESIGN.md +326 -0
  421. package/dist/designer/data/systems/voltagent/components.html +154 -0
  422. package/dist/designer/data/systems/voltagent/tokens.css +63 -0
  423. package/dist/designer/data/systems/warm-editorial/DESIGN.md +65 -0
  424. package/dist/designer/data/systems/warm-editorial/components.html +136 -0
  425. package/dist/designer/data/systems/warm-editorial/tokens.css +63 -0
  426. package/dist/designer/data/systems/warp/DESIGN.md +256 -0
  427. package/dist/designer/data/systems/warp/components.html +411 -0
  428. package/dist/designer/data/systems/warp/tokens.css +156 -0
  429. package/dist/designer/data/systems/webex/DESIGN.md +207 -0
  430. package/dist/designer/data/systems/webex/components.html +342 -0
  431. package/dist/designer/data/systems/webex/tokens.css +64 -0
  432. package/dist/designer/data/systems/webflow/DESIGN.md +95 -0
  433. package/dist/designer/data/systems/webflow/components.html +413 -0
  434. package/dist/designer/data/systems/webflow/tokens.css +191 -0
  435. package/dist/designer/data/systems/wechat/DESIGN.md +302 -0
  436. package/dist/designer/data/systems/wechat/components.html +507 -0
  437. package/dist/designer/data/systems/wechat/tokens.css +176 -0
  438. package/dist/designer/data/systems/wired/DESIGN.md +281 -0
  439. package/dist/designer/data/systems/wired/components.html +342 -0
  440. package/dist/designer/data/systems/wired/tokens.css +64 -0
  441. package/dist/designer/data/systems/wise/DESIGN.md +176 -0
  442. package/dist/designer/data/systems/wise/components.html +365 -0
  443. package/dist/designer/data/systems/wise/tokens.css +141 -0
  444. package/dist/designer/data/systems/x-ai/DESIGN.md +260 -0
  445. package/dist/designer/data/systems/x-ai/components.html +460 -0
  446. package/dist/designer/data/systems/x-ai/tokens.css +268 -0
  447. package/dist/designer/data/systems/xiaohongshu/DESIGN.md +402 -0
  448. package/dist/designer/data/systems/xiaohongshu/components.html +865 -0
  449. package/dist/designer/data/systems/xiaohongshu/tokens.css +193 -0
  450. package/dist/designer/data/systems/zapier/DESIGN.md +331 -0
  451. package/dist/designer/data/systems/zapier/components.html +342 -0
  452. package/dist/designer/data/systems/zapier/tokens.css +64 -0
  453. package/dist/designer/guidelines.js +176 -0
  454. package/dist/designer/index.js +236 -0
  455. package/dist/designer/skills.js +1675 -0
  456. package/dist/designer/systems.js +216 -0
  457. package/dist/server/pi-bridge.js +155 -5
  458. package/dist/server/session-stream.js +45 -1
  459. package/package.json +1 -1
package/dist/designer/data/systems/posthog/components.html ADDED
@@ -0,0 +1,827 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>PostHog — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/posthog. Every visible
10
+ value comes from tokens.css; the page itself honors PostHog's
11
+ rules — warm parchment surfaces, olive-tinted text, IBM Plex
12
+ Sans bold headings, sage-bordered cards with no shadow, and the
13
+ signature hover orange (#F54E00) that flashes on interaction."
14
+ />
15
+
16
+ <style>
17
+ /* :root paste — sourced verbatim from design-systems/posthog/tokens.css.
18
+ Comments stripped per the design-system token-fixture sync contract. */
19
+ :root {
20
+ --bg: #fdfdf8;
21
+ --surface: #eeefe9;
22
+ --surface-warm: #e5e7e0;
23
+
24
+ --fg: #4d4f46;
25
+ --fg-2: #23251d;
26
+ --muted: #65675e;
27
+ --meta: #9ea096;
28
+
29
+ --border: #bfc1b7;
30
+ --border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
31
+
32
+ --accent: #F54E00;
33
+ --accent-on: #ffffff;
34
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
35
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
36
+
37
+ --success: #16a34a;
38
+ --warn: #F7A501;
39
+ --danger: #dc2626;
40
+
41
+ --font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
42
+ --font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
43
+ --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
44
+
45
+ --text-xs: 12px;
46
+ --text-sm: 14px;
47
+ --text-base: 16px;
48
+ --text-lg: 20px;
49
+ --text-xl: 24px;
50
+ --text-2xl: 30px;
51
+ --text-3xl: 36px;
52
+ --text-4xl: 44px;
53
+
54
+ --leading-body: 1.5;
55
+ --leading-tight: 1.2;
56
+ --tracking-display: -0.025em;
57
+
58
+ --space-1: 4px;
59
+ --space-2: 8px;
60
+ --space-3: 12px;
61
+ --space-4: 16px;
62
+ --space-5: 20px;
63
+ --space-6: 24px;
64
+ --space-8: 32px;
65
+ --space-12: 48px;
66
+
67
+ --section-y-desktop: 48px;
68
+ --section-y-tablet: 32px;
69
+ --section-y-phone: 24px;
70
+
71
+ --radius-sm: 4px;
72
+ --radius-md: 6px;
73
+ --radius-lg: 8px;
74
+ --radius-pill: 9999px;
75
+
76
+ --elev-flat: none;
77
+ --elev-ring: 0 0 0 1px var(--border);
78
+ --elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
79
+
80
+ --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
81
+
82
+ --motion-fast: 150ms;
83
+ --motion-base: 200ms;
84
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
85
+
86
+ --container-max: 1280px;
87
+ --container-gutter-desktop: 24px;
88
+ --container-gutter-tablet: 16px;
89
+ --container-gutter-phone: 12px;
90
+ }
91
+
92
+ /* ─── Reset (minimal) ───────────────────────────────────────── */
93
+ *, *::before, *::after { box-sizing: border-box; }
94
+ html, body { margin: 0; padding: 0; }
95
+ body {
96
+ background: var(--bg);
97
+ color: var(--fg);
98
+ font-family: var(--font-body);
99
+ font-size: var(--text-base);
100
+ font-weight: 400;
101
+ line-height: var(--leading-body);
102
+ -webkit-font-smoothing: antialiased;
103
+ -moz-osx-font-smoothing: grayscale;
104
+ }
105
+
106
+ /* ─── Layout primitives ─────────────────────────────────────── */
107
+ .container {
108
+ max-width: var(--container-max);
109
+ margin-inline: auto;
110
+ padding-inline: var(--container-gutter-desktop);
111
+ }
112
+ section { padding-block: var(--section-y-desktop); }
113
+ section + section { border-top: 1px solid var(--border); }
114
+ @media (max-width: 1023px) {
115
+ .container { padding-inline: var(--container-gutter-tablet); }
116
+ section { padding-block: var(--section-y-tablet); }
117
+ }
118
+ @media (max-width: 639px) {
119
+ .container { padding-inline: var(--container-gutter-phone); }
120
+ section { padding-block: var(--section-y-phone); }
121
+ }
122
+
123
+ /* ─── Typography ────────────────────────────────────────────── */
124
+ h1, h2, h3 {
125
+ font-family: var(--font-display);
126
+ margin: 0;
127
+ color: var(--fg-2);
128
+ line-height: var(--leading-tight);
129
+ }
130
+ h1 {
131
+ font-size: var(--text-4xl);
132
+ font-weight: 800;
133
+ letter-spacing: var(--tracking-display);
134
+ }
135
+ h2 {
136
+ font-size: var(--text-3xl);
137
+ font-weight: 700;
138
+ line-height: 1.2;
139
+ }
140
+ h3 {
141
+ font-size: var(--text-lg);
142
+ font-weight: 700;
143
+ line-height: 1.4;
144
+ letter-spacing: -0.01em;
145
+ }
146
+ p { margin: 0; }
147
+
148
+ .lede {
149
+ font-size: var(--text-lg);
150
+ line-height: 1.5;
151
+ color: var(--fg);
152
+ font-weight: 400;
153
+ }
154
+ .body-muted { color: var(--muted); }
155
+ .body-meta { color: var(--meta); font-size: var(--text-sm); }
156
+ .body-sm { font-size: var(--text-sm); }
157
+
158
+ .eyebrow {
159
+ font-family: var(--font-display);
160
+ font-size: var(--text-xs);
161
+ font-weight: 700;
162
+ line-height: 1.33;
163
+ color: var(--muted);
164
+ text-transform: uppercase;
165
+ letter-spacing: 0.08em;
166
+ }
167
+
168
+ .stack-2 > * + * { margin-block-start: var(--space-2); }
169
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
170
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
171
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
172
+
173
+ /* ─── Buttons ───────────────────────────────────────────────────
174
+ * Primary CTA is the Dark Primary from DESIGN.md §4 — near-black
175
+ * (--fg-2 territory) with white text and the brand's signature
176
+ * opacity-based hover (0.7) plus an Amber Gold text flash. Active
177
+ * scales slightly. Sage button uses --surface-warm and flashes
178
+ * PostHog Orange text on hover — the hidden brand signature. */
179
+ .btn {
180
+ display: inline-flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ gap: var(--space-2);
184
+ padding: 10px 14px;
185
+ border: 1px solid transparent;
186
+ border-radius: var(--radius-sm);
187
+ font-family: var(--font-display);
188
+ font-size: var(--text-sm);
189
+ font-weight: 600;
190
+ line-height: 1.4;
191
+ cursor: pointer;
192
+ text-decoration: none;
193
+ transition:
194
+ background-color var(--motion-fast) var(--ease-standard),
195
+ color var(--motion-fast) var(--ease-standard),
196
+ opacity var(--motion-fast) var(--ease-standard),
197
+ transform var(--motion-fast) var(--ease-standard),
198
+ box-shadow var(--motion-fast) var(--ease-standard);
199
+ }
200
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
201
+ .btn:active { transform: scale(0.98); }
202
+
203
+ .btn-primary {
204
+ background: var(--fg-2);
205
+ color: var(--bg);
206
+ padding: 10px 16px;
207
+ border-radius: var(--radius-md);
208
+ }
209
+ .btn-primary:hover { opacity: 0.7; color: var(--warn); }
210
+ .btn-primary:active { opacity: 0.85; transform: scale(0.97); }
211
+
212
+ .btn-secondary {
213
+ background: var(--surface-warm);
214
+ color: var(--fg);
215
+ border-color: transparent;
216
+ }
217
+ .btn-secondary:hover { background: var(--surface); color: var(--accent); }
218
+
219
+ .btn-ghost {
220
+ background: transparent;
221
+ color: var(--fg);
222
+ border-color: var(--border);
223
+ }
224
+ .btn-ghost:hover { color: var(--accent); border-color: var(--fg); }
225
+
226
+ /* Hidden-orange link — the brand's signature interaction surprise.
227
+ Body links rest in --fg-2 with a sage underline that swaps to
228
+ orange on hover. DESIGN.md §1: "hover states flash PostHog
229
+ Orange — a hidden brand color that doesn't appear at rest". */
230
+ a {
231
+ color: var(--fg-2);
232
+ text-decoration: underline;
233
+ text-underline-offset: 3px;
234
+ text-decoration-thickness: 1px;
235
+ text-decoration-color: var(--border);
236
+ transition:
237
+ color var(--motion-fast) var(--ease-standard),
238
+ text-decoration-color var(--motion-fast) var(--ease-standard);
239
+ }
240
+ a:hover {
241
+ color: var(--accent);
242
+ text-decoration-color: var(--accent);
243
+ }
244
+ a:focus-visible {
245
+ outline: none;
246
+ box-shadow: var(--focus-ring);
247
+ border-radius: var(--radius-sm);
248
+ }
249
+
250
+ /* ─── Badges / pills ───────────────────────────────────────── */
251
+ .pill {
252
+ display: inline-flex;
253
+ align-items: center;
254
+ gap: var(--space-2);
255
+ padding: 4px 10px;
256
+ border-radius: var(--radius-pill);
257
+ font-family: var(--font-display);
258
+ font-size: var(--text-xs);
259
+ font-weight: 700;
260
+ line-height: 1.33;
261
+ letter-spacing: 0.04em;
262
+ text-transform: uppercase;
263
+ }
264
+ .pill-soft {
265
+ background: var(--surface);
266
+ color: var(--fg-2);
267
+ border: 1px solid var(--border);
268
+ }
269
+ .pill-warn {
270
+ background: var(--surface);
271
+ color: var(--warn);
272
+ border: 1px solid var(--border);
273
+ }
274
+ .pill-status {
275
+ background: var(--surface-warm);
276
+ color: var(--fg-2);
277
+ text-transform: none;
278
+ letter-spacing: 0;
279
+ }
280
+ .pill-status .dot {
281
+ width: 6px; height: 6px;
282
+ border-radius: var(--radius-pill);
283
+ background: var(--success);
284
+ }
285
+
286
+ /* ─── Cards ─────────────────────────────────────────────────────
287
+ * Bordered cards per DESIGN.md §4 — Warm Parchment background,
288
+ * 1px Sage Border, 6px radius (--radius-md). No shadow at rest:
289
+ * DESIGN.md §6 reserves the only shadow for floating elements.
290
+ * Hover swaps the heading color to PostHog Orange to keep the
291
+ * "flash on interact" pattern alive across the system. */
292
+ .card {
293
+ background: var(--bg);
294
+ border: 1px solid var(--border);
295
+ border-radius: var(--radius-md);
296
+ padding: var(--space-5);
297
+ display: flex;
298
+ flex-direction: column;
299
+ gap: var(--space-3);
300
+ transition:
301
+ border-color var(--motion-fast) var(--ease-standard),
302
+ color var(--motion-fast) var(--ease-standard);
303
+ }
304
+ .card:hover { border-color: var(--fg); }
305
+ .card:hover h3 { color: var(--accent); }
306
+ .card-warm { background: var(--surface); border-color: var(--border); }
307
+
308
+ /* Floating panel — the ONE sanctioned shadow per DESIGN.md §6.
309
+ Used for the hero status panel and any modal/dropdown. */
310
+ .panel {
311
+ background: var(--bg);
312
+ border: 1px solid var(--border);
313
+ border-radius: var(--radius-md);
314
+ box-shadow: var(--elev-raised);
315
+ padding: var(--space-5);
316
+ display: flex;
317
+ flex-direction: column;
318
+ gap: var(--space-4);
319
+ }
320
+
321
+ /* ─── Inputs ────────────────────────────────────────────────────
322
+ * Default per DESIGN.md §4 Inputs & Forms: --surface (#eeefe9)
323
+ * background, sage placeholder, 1px sage border, 4px radius
324
+ * (--radius-sm). Focus swaps in the Focus Blue ring at 50%
325
+ * opacity from --focus-ring. Field value text uses --fg-2 for
326
+ * readability on the warm surface. */
327
+ .field {
328
+ display: flex;
329
+ flex-direction: column;
330
+ gap: var(--space-2);
331
+ }
332
+ .field label {
333
+ font-family: var(--font-display);
334
+ font-size: var(--text-sm);
335
+ font-weight: 600;
336
+ color: var(--fg-2);
337
+ }
338
+ .field input,
339
+ .field select,
340
+ .field textarea {
341
+ background: var(--surface);
342
+ color: var(--fg-2);
343
+ border: 1px solid var(--border);
344
+ border-radius: var(--radius-sm);
345
+ padding: 10px 12px;
346
+ font-family: var(--font-body);
347
+ font-size: var(--text-base);
348
+ line-height: 1.4;
349
+ outline: none;
350
+ transition:
351
+ border-color var(--motion-fast) var(--ease-standard),
352
+ box-shadow var(--motion-fast) var(--ease-standard);
353
+ }
354
+ .field input::placeholder { color: var(--meta); }
355
+ .field input:focus-visible,
356
+ .field select:focus-visible,
357
+ .field textarea:focus-visible {
358
+ border-color: var(--fg);
359
+ box-shadow: var(--focus-ring);
360
+ }
361
+ .field-help {
362
+ font-size: var(--text-xs);
363
+ color: var(--muted);
364
+ line-height: 1.4;
365
+ }
366
+
367
+ /* ─── Code / kbd ───────────────────────────────────────────── */
368
+ code, kbd, .mono {
369
+ font-family: var(--font-mono);
370
+ font-size: var(--text-sm);
371
+ }
372
+ kbd {
373
+ display: inline-block;
374
+ padding: 2px 6px;
375
+ border-radius: var(--radius-sm);
376
+ border: 1px solid var(--border);
377
+ background: var(--surface);
378
+ color: var(--fg-2);
379
+ line-height: 1.2;
380
+ font-variant-numeric: tabular-nums;
381
+ font-weight: 500;
382
+ }
383
+ .code-block {
384
+ background: var(--surface);
385
+ border: 1px solid var(--border-soft);
386
+ border-radius: var(--radius-sm);
387
+ padding: var(--space-3) var(--space-4);
388
+ font-family: var(--font-mono);
389
+ font-size: var(--text-sm);
390
+ line-height: 1.5;
391
+ color: var(--fg-2);
392
+ overflow-x: auto;
393
+ white-space: pre;
394
+ }
395
+ .code-block .tok-cmt { color: var(--meta); }
396
+ .code-block .tok-fn { color: var(--accent); }
397
+ .code-block .tok-str { color: var(--fg); }
398
+
399
+ /* ─── Distinctive: hedgehog mark ────────────────────────────────
400
+ * Hand-drawn Max-style hedgehog rendered as a thick-stroke SVG
401
+ * — the brand's anti-corporate signature per DESIGN.md §4 Image
402
+ * Treatment. Sketchy, deliberate, never polished. Reused in the
403
+ * hero panel, the nav lockup, and the empty-state form copy. */
404
+ .hedgehog {
405
+ color: var(--fg-2);
406
+ }
407
+
408
+ /* ─── Section-specific layout ──────────────────────────────── */
409
+ .nav-row {
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: space-between;
413
+ padding-block: var(--space-4);
414
+ gap: var(--space-4);
415
+ }
416
+ .nav-logo {
417
+ display: inline-flex;
418
+ align-items: center;
419
+ gap: var(--space-2);
420
+ font-family: var(--font-display);
421
+ font-size: var(--text-lg);
422
+ font-weight: 800;
423
+ color: var(--fg-2);
424
+ letter-spacing: -0.01em;
425
+ text-decoration: none;
426
+ }
427
+ .nav-logo:hover { color: var(--accent); text-decoration: none; }
428
+ .nav-links {
429
+ display: inline-flex;
430
+ align-items: center;
431
+ gap: var(--space-6);
432
+ }
433
+ .nav-links a {
434
+ font-family: var(--font-display);
435
+ font-size: 15px;
436
+ font-weight: 600;
437
+ color: var(--fg-2);
438
+ text-decoration: none;
439
+ }
440
+ .nav-links a:hover { color: var(--accent); }
441
+
442
+ .hero-grid {
443
+ display: grid;
444
+ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
445
+ gap: var(--space-12);
446
+ align-items: start;
447
+ }
448
+ @media (max-width: 1023px) {
449
+ .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
450
+ }
451
+ .hero-actions {
452
+ display: flex;
453
+ flex-wrap: wrap;
454
+ gap: var(--space-3);
455
+ margin-block-start: var(--space-6);
456
+ }
457
+ .hero-meta {
458
+ display: flex;
459
+ align-items: center;
460
+ gap: var(--space-3);
461
+ margin-block-start: var(--space-4);
462
+ font-size: var(--text-sm);
463
+ color: var(--muted);
464
+ }
465
+ .hero-meta .dot {
466
+ width: 4px; height: 4px;
467
+ border-radius: var(--radius-pill);
468
+ background: var(--meta);
469
+ }
470
+
471
+ .features-grid {
472
+ display: grid;
473
+ grid-template-columns: repeat(3, minmax(0, 1fr));
474
+ gap: var(--space-4);
475
+ margin-block-start: var(--space-6);
476
+ }
477
+ @media (max-width: 1023px) {
478
+ .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
479
+ }
480
+ @media (max-width: 639px) {
481
+ .features-grid { grid-template-columns: 1fr; }
482
+ }
483
+ .feature-tag {
484
+ display: inline-flex;
485
+ align-items: center;
486
+ gap: var(--space-2);
487
+ font-family: var(--font-display);
488
+ font-size: var(--text-xs);
489
+ font-weight: 700;
490
+ color: var(--muted);
491
+ text-transform: uppercase;
492
+ letter-spacing: 0.06em;
493
+ }
494
+ .feature-tag::before {
495
+ content: "";
496
+ width: 6px; height: 6px;
497
+ background: var(--accent);
498
+ border-radius: var(--radius-pill);
499
+ }
500
+
501
+ .form-row {
502
+ display: grid;
503
+ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
504
+ gap: var(--space-12);
505
+ align-items: start;
506
+ }
507
+ @media (max-width: 1023px) {
508
+ .form-row { grid-template-columns: 1fr; }
509
+ }
510
+ .form {
511
+ display: flex;
512
+ flex-direction: column;
513
+ gap: var(--space-4);
514
+ padding: var(--space-6);
515
+ background: var(--bg);
516
+ border: 1px solid var(--border);
517
+ border-radius: var(--radius-md);
518
+ }
519
+ .row-between {
520
+ display: flex;
521
+ align-items: center;
522
+ justify-content: space-between;
523
+ gap: var(--space-3);
524
+ }
525
+ .row-cluster {
526
+ display: flex;
527
+ align-items: center;
528
+ gap: var(--space-3);
529
+ flex-wrap: wrap;
530
+ }
531
+ .divider-soft {
532
+ height: 1px;
533
+ background: var(--border-soft);
534
+ border: none;
535
+ margin: 0;
536
+ }
537
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
538
+ .trust-row {
539
+ display: flex;
540
+ align-items: center;
541
+ gap: var(--space-6);
542
+ flex-wrap: wrap;
543
+ color: var(--meta);
544
+ font-family: var(--font-display);
545
+ font-weight: 700;
546
+ font-size: var(--text-sm);
547
+ letter-spacing: 0.04em;
548
+ text-transform: uppercase;
549
+ }
550
+ </style>
551
+ </head>
552
+ <body>
553
+ <main class="container">
554
+ <!-- ════════════════════════════════════════════════════════════
555
+ NAV — exercises: .nav-logo (hedgehog mark + wordmark with
556
+ orange hover), .nav-links (15px·600 with orange flash),
557
+ .btn-primary (Dark CTA per DESIGN.md §4 Navigation).
558
+ ═══════════════════════════════════════════════════════════════ -->
559
+ <nav class="nav-row" aria-label="Primary">
560
+ <a href="./DESIGN.md" class="nav-logo">
561
+ <svg class="hedgehog" width="28" height="28" viewBox="0 0 32 32"
562
+ fill="none" stroke="currentColor" stroke-width="1.75"
563
+ stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
564
+ <path d="M5 22c0-5 4-9 9-9s9 4 9 9" />
565
+ <path d="M3 22h22" />
566
+ <path d="M9 13l-2-3M12 11l-1-3M15 10l0-3M18 10l1-3M21 11l2-3M24 13l3-2" />
567
+ <circle cx="19" cy="18" r="0.9" fill="currentColor" />
568
+ <path d="M23 19l3 0M25 18l1 0.5" />
569
+ </svg>
570
+ PostHog
571
+ </a>
572
+ <div class="nav-links" role="navigation">
573
+ <a href="./tokens.css">Product</a>
574
+ <a href="./DESIGN.md">Docs</a>
575
+ <a href="./tokens.css">Pricing</a>
576
+ <a href="./DESIGN.md">Community</a>
577
+ </div>
578
+ <div class="row-cluster">
579
+ <a href="./tokens.css" class="btn btn-secondary">Log in</a>
580
+ <a href="./tokens.css" class="btn btn-primary">
581
+ Get started &mdash; free
582
+ </a>
583
+ </div>
584
+ </nav>
585
+
586
+ <!-- ════════════════════════════════════════════════════════════
587
+ HERO — exercises: .eyebrow, h1 (44px·800, -0.025em tracking),
588
+ .lede, .btn-primary / .btn-ghost / hidden-orange link hover,
589
+ hero status .panel (the one sanctioned shadow), .pill-status
590
+ with success dot, .pill-warn for the "1.0 incoming" pill,
591
+ kbd inline keyboard cues, .trust-row enterprise muted bar.
592
+ ═══════════════════════════════════════════════════════════════ -->
593
+ <section data-od-id="hero">
594
+ <div class="hero-grid">
595
+ <div class="stack-4">
596
+ <p class="eyebrow">Reference fixture · posthog</p>
597
+ <h1 style="max-width: 18ch">
598
+ How engineers build better products.
599
+ </h1>
600
+ <p class="lede body-muted" style="max-width: 56ch">
601
+ PostHog is the open-source all-in-one platform for product
602
+ analytics, session replay, feature flags, A/B tests, and
603
+ the surveys you keep meaning to send. Built by engineers
604
+ who got tired of stitching together six SaaS dashboards
605
+ that all charge per-seat for the privilege.
606
+ </p>
607
+
608
+ <div class="hero-actions">
609
+ <a href="./tokens.css" class="btn btn-primary">
610
+ Get started &mdash; free
611
+ <svg class="icon" viewBox="0 0 24 24" fill="none"
612
+ stroke="currentColor" stroke-width="1.75"
613
+ stroke-linecap="round" stroke-linejoin="round"
614
+ aria-hidden="true">
615
+ <path d="M5 12h14M13 6l6 6-6 6" />
616
+ </svg>
617
+ </a>
618
+ <a href="./DESIGN.md" class="btn btn-ghost">
619
+ Read the docs
620
+ </a>
621
+ </div>
622
+
623
+ <div class="hero-meta">
624
+ <span>Self-host with <kbd>docker compose up</kbd></span>
625
+ <span class="dot" aria-hidden="true"></span>
626
+ <span>1M events/mo free</span>
627
+ <span class="dot" aria-hidden="true"></span>
628
+ <span>No credit card</span>
629
+ </div>
630
+
631
+ <hr class="divider-soft" style="margin-block: var(--space-6)" />
632
+
633
+ <p class="eyebrow">Trusted by engineering teams at</p>
634
+ <div class="trust-row" aria-label="Trusted by">
635
+ <span>Airbus</span>
636
+ <span>GOV.UK</span>
637
+ <span>Y&nbsp;Combinator</span>
638
+ <span>Hasura</span>
639
+ <span>Raycast</span>
640
+ </div>
641
+ </div>
642
+
643
+ <aside class="panel" aria-label="Live event stream">
644
+ <div class="row-between">
645
+ <span class="pill pill-soft">Live · last 60s</span>
646
+ <span class="pill pill-status">
647
+ <span class="dot" aria-hidden="true"></span>
648
+ Ingesting
649
+ </span>
650
+ </div>
651
+
652
+ <div class="stack-2">
653
+ <h3 style="line-height: 1.3">12,418 events</h3>
654
+ <p class="body-muted body-sm">
655
+ Across <strong style="color: var(--fg-2)">2,107</strong>
656
+ anonymous people, 38 countries, and one suspicious cron
657
+ in <code style="color: var(--accent)">us-east-1</code>.
658
+ </p>
659
+ </div>
660
+
661
+ <pre class="code-block" aria-label="Event payload"><span class="tok-cmt"># last event seen 0.4s ago</span>
662
+ posthog.<span class="tok-fn">capture</span>(
663
+ distinct_id=<span class="tok-str">"max@hog.com"</span>,
664
+ event=<span class="tok-str">"button_clicked"</span>,
665
+ properties={
666
+ <span class="tok-str">"label"</span>: <span class="tok-str">"get_started"</span>,
667
+ <span class="tok-str">"$session_id"</span>: <span class="tok-str">"01HX…"</span>
668
+ }
669
+ )</pre>
670
+
671
+ <div class="row-between">
672
+ <span class="body-sm body-muted">
673
+ <kbd>⌘</kbd> <kbd>K</kbd> to jump
674
+ </span>
675
+ <a href="./tokens.css" class="body-sm">View replay &rarr;</a>
676
+ </div>
677
+ </aside>
678
+ </div>
679
+ </section>
680
+
681
+ <!-- ════════════════════════════════════════════════════════════
682
+ FEATURES — exercises: .card (bordered, no shadow, 6px radius,
683
+ hover swaps title to PostHog Orange — the hidden brand
684
+ signature), .feature-tag (orange dot eyebrow), nested links
685
+ with sage-to-orange underline swap, .body-meta footer line.
686
+ ═══════════════════════════════════════════════════════════════ -->
687
+ <section data-od-id="features">
688
+ <div class="stack-3">
689
+ <p class="eyebrow">What's in the box</p>
690
+ <h2 style="max-width: 28ch">
691
+ Every analytics tool a product engineer actually needs.
692
+ </h2>
693
+ <p class="body-muted" style="max-width: 60ch">
694
+ One database, one billing line, one set of definitions for
695
+ what an &ldquo;active user&rdquo; is. Hover any card to flash
696
+ the hidden brand orange &mdash; DESIGN.md §1 calls it the
697
+ signature interaction surprise.
698
+ </p>
699
+ </div>
700
+
701
+ <div class="features-grid">
702
+ <article class="card">
703
+ <span class="feature-tag">Analytics</span>
704
+ <h3>Product analytics that don't lie</h3>
705
+ <p class="body-muted body-sm">
706
+ Funnels, retention, paths, lifecycle &mdash; all built on
707
+ raw events you actually own. No sampling, no aggregated
708
+ hand-waving, no &ldquo;trust us, the dashboard is
709
+ right.&rdquo;
710
+ </p>
711
+ <a href="./tokens.css" class="body-sm">Explore funnels &rarr;</a>
712
+ </article>
713
+
714
+ <article class="card">
715
+ <span class="feature-tag">Replay</span>
716
+ <h3>Watch what your users actually did</h3>
717
+ <p class="body-muted body-sm">
718
+ Session replay with console logs, network requests, and
719
+ the rage clicks your support team have been complaining
720
+ about all week. Privacy masking on by default.
721
+ </p>
722
+ <a href="./tokens.css" class="body-sm">See a session &rarr;</a>
723
+ </article>
724
+
725
+ <article class="card">
726
+ <span class="feature-tag">Experiments</span>
727
+ <h3>Feature flags &amp; A/B tests</h3>
728
+ <p class="body-muted body-sm">
729
+ Ship a flag in five minutes, run an experiment in five
730
+ days, kill the bad arm in five seconds. Same data
731
+ warehouse as your analytics &mdash; the results never
732
+ disagree with the funnel.
733
+ </p>
734
+ <a href="./tokens.css" class="body-sm">Roll one out &rarr;</a>
735
+ </article>
736
+ </div>
737
+ </section>
738
+
739
+ <!-- ════════════════════════════════════════════════════════════
740
+ FORM — exercises: .field (sage-cream bg, sage border, Focus
741
+ Blue ring at 50%), .field-help, .btn-primary submit, code
742
+ inline, .pill-warn footer note. The right column reuses
743
+ .panel to show the email confirmation preview.
744
+ ═══════════════════════════════════════════════════════════════ -->
745
+ <section data-od-id="form">
746
+ <div class="form-row">
747
+ <div class="stack-4">
748
+ <p class="eyebrow">Self-host or hosted</p>
749
+ <h2 style="max-width: 22ch">
750
+ Two clicks from zero to first event.
751
+ </h2>
752
+ <p class="body-muted" style="max-width: 52ch">
753
+ Drop us your work email and we&apos;ll send the install
754
+ command that fits your stack &mdash; <code>npm</code>,
755
+ <code>pnpm</code>, <code>pip</code>, <code>go get</code>,
756
+ or one truly heroic <code>curl | bash</code>. No
757
+ calendars, no &ldquo;quick chat&rdquo; bookings.
758
+ </p>
759
+
760
+ <hr class="divider-soft" />
761
+
762
+ <p class="body-meta">
763
+ By the way: PostHog is open source under MIT. The
764
+ hosted plan exists because someone has to pay the
765
+ S3 bill. Read the
766
+ <a href="./DESIGN.md">design spec</a> or
767
+ <a href="./tokens.css">browse the tokens</a>.
768
+ </p>
769
+ </div>
770
+
771
+ <form class="form" onsubmit="event.preventDefault();">
772
+ <div class="row-between">
773
+ <p class="eyebrow" style="color: var(--fg-2)">Start free</p>
774
+ <span class="pill pill-warn">1M events / mo</span>
775
+ </div>
776
+
777
+ <div class="field">
778
+ <label for="email">Work email</label>
779
+ <input id="email" type="email"
780
+ placeholder="ada@hedgehog.dev"
781
+ autocomplete="email" required />
782
+ <p class="field-help">
783
+ We&apos;ll never sell it. We&apos;ll barely even use it.
784
+ </p>
785
+ </div>
786
+
787
+ <div class="field">
788
+ <label for="company">Company</label>
789
+ <input id="company" type="text"
790
+ placeholder="The Cottage Garden Co."
791
+ autocomplete="organization" />
792
+ </div>
793
+
794
+ <div class="field">
795
+ <label for="stack">Where should we point you?</label>
796
+ <select id="stack">
797
+ <option>JavaScript / TypeScript</option>
798
+ <option>Python</option>
799
+ <option>Go</option>
800
+ <option>Ruby</option>
801
+ <option>iOS · Android</option>
802
+ <option>Just curious, send the marketing</option>
803
+ </select>
804
+ <p class="field-help">
805
+ We&apos;ll match the install snippet to your runtime.
806
+ </p>
807
+ </div>
808
+
809
+ <div class="row-cluster" style="margin-block-start: var(--space-2)">
810
+ <button type="submit" class="btn btn-primary">
811
+ Send the install command
812
+ </button>
813
+ <button type="button" class="btn btn-ghost">
814
+ Or self-host instead
815
+ </button>
816
+ </div>
817
+
818
+ <p class="body-sm body-muted" style="margin-block-start: var(--space-2)">
819
+ No credit card. No marketing automation gauntlet.
820
+ The hedgehog approves.
821
+ </p>
822
+ </form>
823
+ </div>
824
+ </section>
825
+ </main>
826
+ </body>
827
+ </html>