@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/perplexity/components.html ADDED
@@ -0,0 +1,455 @@
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>Perplexity — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/perplexity. Every visible
10
+ value comes from tokens.css. Perplexity's signature moves: flat
11
+ near-black canvas, Inter for UI, JetBrains Mono for citations,
12
+ purple accent used once per view, hairline borders instead of
13
+ drop shadows, answer-first single-column layout."
14
+ />
15
+
16
+ <style>
17
+ :root {
18
+ --bg: #0f0f10;
19
+ --surface: #19191a;
20
+ --surface-warm: var(--surface);
21
+
22
+ --fg: #f0f0f0;
23
+ --fg-2: var(--fg);
24
+ --muted: #9b9b9b;
25
+ --meta: #5c5c5e;
26
+
27
+ --border: #2e2e30;
28
+ --border-soft: #232325;
29
+
30
+ --accent: #a855f7;
31
+ --accent-on: #ffffff;
32
+ --accent-hover: #c084fc;
33
+ --accent-active: #9333ea;
34
+
35
+ --success: #22c55e;
36
+ --warn: #f59e0b;
37
+ --danger: #ef4444;
38
+
39
+ --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
40
+ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
41
+ --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Monaco, Consolas, monospace;
42
+
43
+ --text-xs: 11px;
44
+ --text-sm: 13px;
45
+ --text-base: 15px;
46
+ --text-lg: 16px;
47
+ --text-xl: 18px;
48
+ --text-2xl: 22px;
49
+ --text-3xl: 28px;
50
+ --text-4xl: 32px;
51
+
52
+ --leading-body: 1.65;
53
+ --leading-tight: 1.2;
54
+ --tracking-display: -0.01em;
55
+
56
+ --space-1: 4px;
57
+ --space-2: 8px;
58
+ --space-3: 12px;
59
+ --space-4: 16px;
60
+ --space-5: 20px;
61
+ --space-6: 24px;
62
+ --space-8: 32px;
63
+ --space-12: 48px;
64
+
65
+ --section-y-desktop: 64px;
66
+ --section-y-tablet: 48px;
67
+ --section-y-phone: 32px;
68
+
69
+ --radius-sm: 4px;
70
+ --radius-md: 8px;
71
+ --radius-lg: 12px;
72
+ --radius-pill: 9999px;
73
+
74
+ --elev-flat: none;
75
+ --elev-ring: 0 0 0 1px var(--border);
76
+ --elev-raised: 0 0 0 1px var(--border);
77
+
78
+ --focus-ring: 0 0 0 2px var(--accent);
79
+
80
+ --motion-fast: 120ms;
81
+ --motion-base: 200ms;
82
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
83
+
84
+ --container-max: 1100px;
85
+ --container-gutter-desktop: 24px;
86
+ --container-gutter-tablet: 16px;
87
+ --container-gutter-phone: 16px;
88
+ }
89
+
90
+ *, *::before, *::after { box-sizing: border-box; }
91
+ html, body { margin: 0; padding: 0; }
92
+ body {
93
+ background: var(--bg);
94
+ color: var(--fg);
95
+ font-family: var(--font-body);
96
+ font-size: var(--text-base);
97
+ line-height: var(--leading-body);
98
+ -webkit-font-smoothing: antialiased;
99
+ }
100
+ @media (prefers-reduced-motion: reduce) {
101
+ *, *::before, *::after { transition: none !important; animation: none !important; }
102
+ }
103
+
104
+ .container {
105
+ max-width: var(--container-max);
106
+ margin-inline: auto;
107
+ padding-inline: var(--container-gutter-desktop);
108
+ }
109
+ section { padding-block: var(--section-y-desktop); }
110
+ section + section { border-top: 1px solid var(--border); }
111
+ @media (max-width: 1023px) {
112
+ .container { padding-inline: var(--container-gutter-tablet); }
113
+ section { padding-block: var(--section-y-tablet); }
114
+ }
115
+ @media (max-width: 639px) {
116
+ .container { padding-inline: var(--container-gutter-phone); }
117
+ section { padding-block: var(--section-y-phone); }
118
+ }
119
+
120
+ /* ─── Typography ─────────────────────────── */
121
+ h1, h2, h3 {
122
+ font-family: var(--font-display);
123
+ margin: 0;
124
+ color: var(--fg);
125
+ font-weight: 600;
126
+ line-height: var(--leading-tight);
127
+ }
128
+ h1 {
129
+ font-size: var(--text-4xl);
130
+ letter-spacing: var(--tracking-display);
131
+ }
132
+ h2 {
133
+ font-size: var(--text-2xl);
134
+ line-height: 1.3;
135
+ }
136
+ h3 {
137
+ font-size: var(--text-xl);
138
+ line-height: 1.4;
139
+ }
140
+ p { margin: 0; }
141
+ .lead {
142
+ font-size: var(--text-lg);
143
+ line-height: 1.6;
144
+ color: var(--muted);
145
+ font-weight: 400;
146
+ max-width: 60ch;
147
+ }
148
+ .body-muted { color: var(--muted); }
149
+ .body-sm { font-size: var(--text-sm); color: var(--muted); }
150
+ .eyebrow {
151
+ font-family: var(--font-mono);
152
+ font-size: var(--text-xs);
153
+ font-weight: 400;
154
+ color: var(--muted);
155
+ letter-spacing: 0.04em;
156
+ }
157
+ code, .mono {
158
+ font-family: var(--font-mono);
159
+ font-size: 0.92em;
160
+ color: var(--fg);
161
+ }
162
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
163
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
164
+ .stack-5 > * + * { margin-block-start: var(--space-5); }
165
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
166
+
167
+ /* ─── Buttons ─────────────────────────────── */
168
+ .btn {
169
+ display: inline-flex;
170
+ align-items: center;
171
+ gap: var(--space-2);
172
+ padding: 10px 20px;
173
+ border-radius: var(--radius-md);
174
+ font-family: var(--font-body);
175
+ font-size: var(--text-base);
176
+ font-weight: 500;
177
+ line-height: 1;
178
+ cursor: pointer;
179
+ border: 1px solid transparent;
180
+ transition: background-color var(--motion-fast) var(--ease-standard),
181
+ border-color var(--motion-fast) var(--ease-standard);
182
+ text-decoration: none;
183
+ }
184
+ .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
185
+ .btn-primary {
186
+ background: var(--accent);
187
+ color: var(--accent-on);
188
+ }
189
+ .btn-primary:hover { background: var(--accent-hover); }
190
+ .btn-primary:active { background: var(--accent-active); }
191
+ .btn-ghost {
192
+ background: transparent;
193
+ color: var(--fg);
194
+ border-color: var(--border);
195
+ }
196
+ .btn-ghost:hover { background: var(--border-soft); }
197
+
198
+ /* ─── Source badge — DESIGN.md §6 ─────────── */
199
+ .source-badge {
200
+ display: inline-flex;
201
+ align-items: center;
202
+ gap: var(--space-1);
203
+ padding: 3px 8px;
204
+ background: var(--surface);
205
+ border: 1px solid var(--border);
206
+ border-radius: var(--radius-sm);
207
+ font-family: var(--font-mono);
208
+ font-size: var(--text-xs);
209
+ color: var(--muted);
210
+ text-decoration: none;
211
+ }
212
+ .source-badge::before {
213
+ content: "";
214
+ width: 6px;
215
+ height: 6px;
216
+ border-radius: var(--radius-pill);
217
+ background: var(--accent);
218
+ opacity: 0.55;
219
+ flex-shrink: 0;
220
+ }
221
+
222
+ /* ─── Tab bar — DESIGN.md §6 ────────────── */
223
+ .tabbar {
224
+ display: flex;
225
+ gap: var(--space-5);
226
+ border-bottom: 1px solid var(--border);
227
+ padding-block-end: var(--space-3);
228
+ margin-block-end: var(--space-5);
229
+ }
230
+ .tab {
231
+ font-size: var(--text-sm);
232
+ color: var(--muted);
233
+ padding-block-end: var(--space-2);
234
+ border-bottom: 2px solid transparent;
235
+ margin-bottom: -1px;
236
+ cursor: pointer;
237
+ font-weight: 500;
238
+ }
239
+ .tab[aria-current="page"] {
240
+ color: var(--fg);
241
+ border-bottom-color: var(--accent);
242
+ }
243
+
244
+ /* ─── Cards (answer + source) ───────────── */
245
+ .card {
246
+ background: var(--surface);
247
+ border: 1px solid var(--border);
248
+ border-radius: var(--radius-lg);
249
+ padding: var(--space-5);
250
+ box-shadow: var(--elev-flat);
251
+ transition: background-color var(--motion-fast) var(--ease-standard);
252
+ }
253
+ .card:hover { background: var(--border-soft); }
254
+
255
+ /* ─── Search field — DESIGN.md §5 ────────── */
256
+ .search {
257
+ display: flex;
258
+ align-items: center;
259
+ gap: var(--space-3);
260
+ background: var(--surface);
261
+ border: 1px solid var(--border);
262
+ border-radius: var(--radius-lg);
263
+ padding: 12px 16px;
264
+ transition: border-color var(--motion-fast) var(--ease-standard);
265
+ }
266
+ .search:focus-within { border-color: var(--accent); }
267
+ .search input {
268
+ flex: 1;
269
+ background: transparent;
270
+ border: none;
271
+ outline: none;
272
+ color: var(--fg);
273
+ font-family: var(--font-body);
274
+ font-size: var(--text-base);
275
+ line-height: 1.4;
276
+ }
277
+ .search input::placeholder { color: var(--meta); }
278
+ .search-submit {
279
+ display: inline-flex;
280
+ align-items: center;
281
+ justify-content: center;
282
+ width: 28px;
283
+ height: 28px;
284
+ background: transparent;
285
+ border: none;
286
+ border-radius: var(--radius-sm);
287
+ color: var(--muted);
288
+ cursor: pointer;
289
+ transition: color var(--motion-fast) var(--ease-standard);
290
+ }
291
+ .search:focus-within .search-submit { color: var(--accent); }
292
+
293
+ .field { display: flex; flex-direction: column; gap: var(--space-2); }
294
+ .field label {
295
+ font-size: var(--text-sm);
296
+ font-weight: 500;
297
+ color: var(--fg);
298
+ }
299
+ .field input {
300
+ background: var(--surface);
301
+ color: var(--fg);
302
+ border: 1px solid var(--border);
303
+ border-radius: var(--radius-md);
304
+ padding: 10px 14px;
305
+ font-family: var(--font-body);
306
+ font-size: var(--text-base);
307
+ outline: none;
308
+ transition: border-color var(--motion-fast) var(--ease-standard);
309
+ }
310
+ .field input::placeholder { color: var(--meta); }
311
+ .field input:focus { border-color: var(--accent); }
312
+
313
+ /* ─── Layout ─────────────────────────────── */
314
+ .hero-grid {
315
+ display: grid;
316
+ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
317
+ gap: var(--space-12);
318
+ align-items: start;
319
+ }
320
+ @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
321
+ .features-grid {
322
+ display: grid;
323
+ grid-template-columns: repeat(3, 1fr);
324
+ gap: var(--space-4);
325
+ }
326
+ @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
327
+ @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
328
+ .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-5); flex-wrap: wrap; }
329
+ .source-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
330
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
331
+ </style>
332
+ </head>
333
+ <body>
334
+ <main class="container">
335
+ <!-- HERO — answers, not links. DESIGN.md §5 answer-first pattern. -->
336
+ <section data-od-id="hero">
337
+ <div class="hero-grid">
338
+ <div class="stack-5">
339
+ <p class="eyebrow">perplexity / reference fixture</p>
340
+ <h1>Answers, not links.</h1>
341
+ <p class="lead">
342
+ Ask anything. Perplexity reads the sources, cites the
343
+ passage, and returns a single, grounded answer — no
344
+ ten-blue-links detour, no auto-play, no autoplaying anything.
345
+ </p>
346
+
347
+ <div class="search" role="search" aria-label="Ask Perplexity">
348
+ <span aria-hidden="true" style="color:var(--muted);display:inline-flex">
349
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
350
+ stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">
351
+ <circle cx="11" cy="11" r="7"/>
352
+ <path d="M20 20l-3.5-3.5"/>
353
+ </svg>
354
+ </span>
355
+ <input type="text" placeholder="Ask anything." aria-label="Ask Perplexity" />
356
+ <button type="button" class="search-submit" aria-label="Submit query">
357
+ <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
358
+ stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">
359
+ <path d="M5 12h14M13 6l6 6-6 6"/>
360
+ </svg>
361
+ </button>
362
+ </div>
363
+
364
+ <div class="hero-actions">
365
+ <a href="./tokens.css" class="btn btn-primary">Search</a>
366
+ <a href="./DESIGN.md" class="btn btn-ghost">Read the spec</a>
367
+ </div>
368
+ </div>
369
+
370
+ <aside class="card">
371
+ <div class="tabbar" role="tablist">
372
+ <span class="tab" aria-current="page" role="tab">Answer</span>
373
+ <span class="tab" role="tab">Sources</span>
374
+ <span class="tab" role="tab">Steps</span>
375
+ </div>
376
+ <p class="eyebrow" style="margin-bottom:var(--space-3)">Q · who first measured the speed of light?</p>
377
+ <p style="color:var(--fg)">
378
+ Ole Rømer, in 1676, by timing eclipses of Jupiter's moon Io as
379
+ Earth moved toward and away from Jupiter — a delay of
380
+ <code>~22 min</code> across the orbit yielded the first
381
+ finite estimate.
382
+ </p>
383
+ <div class="source-row" style="margin-block-start:var(--space-4)">
384
+ <a class="source-badge" href="#"><span class="mono">nature.com</span></a>
385
+ <a class="source-badge" href="#"><span class="mono">en.wikipedia.org</span></a>
386
+ <a class="source-badge" href="#"><span class="mono">aps.org</span></a>
387
+ <a class="source-badge" href="#"><span class="mono">arxiv.org</span></a>
388
+ </div>
389
+ </aside>
390
+ </div>
391
+ </section>
392
+
393
+ <!-- FEATURES — three quiet propositions, no decorative imagery. -->
394
+ <section data-od-id="features">
395
+ <div class="stack-3" style="margin-bottom:var(--space-6)">
396
+ <p class="eyebrow">what this fixture exercises</p>
397
+ <h2>Quiet by design.</h2>
398
+ </div>
399
+
400
+ <div class="features-grid">
401
+ <article class="card stack-3">
402
+ <h3>Cited</h3>
403
+ <p class="body-sm">
404
+ Every factual claim is attributed. Source badges sit
405
+ beneath the answer in <code>JetBrains Mono</code>, sentence
406
+ case, never decorative.
407
+ </p>
408
+ </article>
409
+ <article class="card stack-3">
410
+ <h3>Grounded</h3>
411
+ <p class="body-sm">
412
+ Flat <code>#0f0f10</code> canvas with three luminance
413
+ steps. No gradient hero, no animated blob — the chrome
414
+ recedes, the answer leads.
415
+ </p>
416
+ </article>
417
+ <article class="card stack-3">
418
+ <h3>Restrained</h3>
419
+ <p class="body-sm">
420
+ Purple <code>#a855f7</code> appears once per view: the
421
+ primary action. Borders before shadows, content before
422
+ motion.
423
+ </p>
424
+ </article>
425
+ </div>
426
+ </section>
427
+
428
+ <!-- FORM — direct copy, no apology. DESIGN.md §8 voice. -->
429
+ <section data-od-id="form">
430
+ <div style="display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-12);align-items:start">
431
+ <div class="stack-4">
432
+ <p class="eyebrow">form components</p>
433
+ <h2>Keep the signal in.</h2>
434
+ <p class="lead">
435
+ Sign in to keep your threads, follow-ups, and saved sources
436
+ across devices. No newsletter trickery, no marketing checkbox
437
+ defaulted on.
438
+ </p>
439
+ </div>
440
+ <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:420px"
441
+ onsubmit="event.preventDefault()">
442
+ <div class="field">
443
+ <label for="email">Email</label>
444
+ <input id="email" type="email" placeholder="you@domain.com" />
445
+ </div>
446
+ <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
447
+ <button type="submit" class="btn btn-primary">Continue</button>
448
+ <button type="button" class="btn btn-ghost">Use a passkey</button>
449
+ </div>
450
+ </form>
451
+ </div>
452
+ </section>
453
+ </main>
454
+ </body>
455
+ </html>
package/dist/designer/data/systems/perplexity/tokens.css ADDED
@@ -0,0 +1,151 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/perplexity/tokens.css
3
+ *
4
+ * Structured token bindings for the "Perplexity" brand — the research-
5
+ * terminal voice of a conversational AI search engine.
6
+ *
7
+ * Brand identity in three sentences:
8
+ * 1. Dark canvas as the native medium — a flat near-black (#0f0f10)
9
+ * that recedes so citations, sources, and the answer column lead;
10
+ * depth is three luminance steps (base → surface → elevated), never
11
+ * shadow.
12
+ * 2. Inter for all UI and reading, JetBrains Mono for code and
13
+ * citations; weight 600 is the cap for display (700 reads too
14
+ * thin against #0f0f10), generous 1.65 body leading for dense
15
+ * research paragraphs.
16
+ * 3. A single chromatic accent — Perplexity Purple (#a855f7) —
17
+ * reserved for the primary CTA and active focus state; everything
18
+ * else is grayscale. Color appears once per view, never twice.
19
+ *
20
+ * Schema decisions:
21
+ * - --bg: #0f0f10 (page background, anti-gradient flat).
22
+ * - --surface: #19191a (card / sidebar surface).
23
+ * - --surface-warm aliases --surface — dark achromatic system, no warm
24
+ * tier; the third luminance step (#232325) lives in --border-soft so
25
+ * hover/elevated states can borrow it without inventing a token.
26
+ * - --fg: #f0f0f0 (near-white, not pure white — prevents eye strain).
27
+ * - --fg-2 aliases --fg — DESIGN.md §2 lists a single primary text
28
+ * color; secondary lives in --muted, tertiary in --meta.
29
+ * - --border: #2e2e30; --border-soft: #232325 (also the elevated tier).
30
+ * - --accent: #a855f7 (purple); --accent-hover: #c084fc;
31
+ * --accent-active: #9333ea (darker pressed — one step down the
32
+ * violet scale, since DESIGN.md does not name an active value).
33
+ * - --tracking-display: -0.01em (Inter at 32px tightens slightly).
34
+ * - --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px (DESIGN.md §4).
35
+ * - --elev-raised: hairline ring only — DESIGN.md §6 §9 forbids
36
+ * drop shadows; elevation is communicated through border contrast.
37
+ * - --motion-fast: 120ms (DESIGN.md §7 hover), --motion-base: 200ms
38
+ * (modal); ease-out flavored cubic-bezier per DESIGN.md guidance.
39
+ * ─────────────────────────────────────────────────────────────────── */
40
+
41
+ :root {
42
+ /* ─── Surface ──────────────────────────────────────────────────── */
43
+ --bg: #0f0f10; /* flat near-black canvas — no gradient */
44
+ --surface: #19191a; /* card / sidebar / search bar fill */
45
+ --surface-warm: var(--surface); /* no warm tier in dark achromatic system */
46
+
47
+ /* ─── Foreground ───────────────────────────────────────────────── */
48
+ --fg: #f0f0f0; /* near-white — body copy, headings */
49
+ --fg-2: var(--fg); /* DESIGN.md §2 has a single primary tier */
50
+ --muted: #9b9b9b; /* secondary — meta, captions, labels */
51
+ --meta: #5c5c5e; /* tertiary — placeholder, disabled */
52
+
53
+ /* ─── Border ───────────────────────────────────────────────────── */
54
+ --border: #2e2e30; /* divider, input border, card edge */
55
+ --border-soft: #232325; /* inner row separator + elevated tier */
56
+
57
+ /* ─── Accent ───────────────────────────────────────────────────── */
58
+ --accent: #a855f7; /* Perplexity purple — sole chromatic color */
59
+ --accent-on: #ffffff; /* white on accent for buttons / badges */
60
+ --accent-hover: #c084fc; /* lighter violet hover */
61
+ --accent-active: #9333ea; /* darker pressed — derived, DESIGN.md silent */
62
+
63
+ /* ─── Semantic ─────────────────────────────────────────────────── */
64
+ --success: #22c55e; /* verified source badge */
65
+ --warn: #f59e0b; /* caution */
66
+ --danger: #ef4444; /* error state */
67
+
68
+ /* ─── Typography ───────────────────────────────────────────────── */
69
+ /* Inter for UI/body/display (weight 600 cap at display sizes).
70
+ JetBrains Mono for code, citations, inline tags. */
71
+ --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
72
+ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
73
+ --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Monaco, Consolas, monospace;
74
+
75
+ /* Type scale — DESIGN.md §3.
76
+ * 4xl=32 display, 3xl=22 heading-l, 2xl=18 heading-m, lg=16 reading-large,
77
+ * base=15 body, sm=13 body-sm, xs=11 caption. The 3xl/2xl→xl gap (16) is
78
+ * the natural reading-large bridge for source-card titles. */
79
+ --text-xs: 11px; /* caption — source labels, timestamps */
80
+ --text-sm: 13px; /* body-sm — secondary, meta */
81
+ --text-base: 15px; /* body — primary reading copy */
82
+ --text-lg: 16px; /* reading-large — source card titles */
83
+ --text-xl: 18px; /* heading-m — sub-section heading */
84
+ --text-2xl: 22px; /* heading-l — section heading */
85
+ --text-3xl: 28px; /* sub-display — intermediate hero step */
86
+ --text-4xl: 32px; /* display — page title, hero answer */
87
+
88
+ /* Leading + tracking.
89
+ * --leading-body=1.65: dense research paragraphs (DESIGN.md §3 body).
90
+ * --leading-tight=1.2: display compression (DESIGN.md display row).
91
+ * --tracking-display=-0.01em: Inter at 32px tightens subtly; never stretch. */
92
+ --leading-body: 1.65;
93
+ --leading-tight: 1.2;
94
+ --tracking-display: -0.01em;
95
+
96
+ /* ─── Spacing ──────────────────────────────────────────────────── */
97
+ /* 8px base unit (DESIGN.md §4). Schema spine maps the key stops;
98
+ DESIGN.md's 48/64 page/above-fold tiers ride --space-12 and the
99
+ section-y tokens below. */
100
+ --space-1: 4px;
101
+ --space-2: 8px;
102
+ --space-3: 12px;
103
+ --space-4: 16px;
104
+ --space-5: 20px;
105
+ --space-6: 24px;
106
+ --space-8: 32px;
107
+ --space-12: 48px;
108
+
109
+ /* Section rhythm — DESIGN.md §4: 48px page-level, 64px above-fold. */
110
+ --section-y-desktop: 64px;
111
+ --section-y-tablet: 48px;
112
+ --section-y-phone: 32px;
113
+
114
+ /* ─── Radius ───────────────────────────────────────────────────── */
115
+ /* DESIGN.md §4: 4 tag, 8 input/card, 12 modal/popover. Pill for
116
+ avatars/tags only — never on cards (DESIGN.md §9 anti-pattern). */
117
+ --radius-sm: 4px;
118
+ --radius-md: 8px;
119
+ --radius-lg: 12px;
120
+ --radius-pill: 9999px;
121
+
122
+ /* ─── Elevation ────────────────────────────────────────────────── */
123
+ /* DESIGN.md §6 §9: no drop shadows. Elevation = border contrast.
124
+ --elev-raised intentionally collapses to a hairline ring — the
125
+ visual lift comes from the background stepping to #232325 in
126
+ the consuming rule, not from a cast shadow. */
127
+ --elev-flat: none;
128
+ --elev-ring: 0 0 0 1px var(--border);
129
+ --elev-raised: 0 0 0 1px var(--border);
130
+
131
+ /* ─── Focus ────────────────────────────────────────────────────── */
132
+ /* DESIGN.md §5 search bar: --accent 2px outline, no box-shadow halo. */
133
+ --focus-ring: 0 0 0 2px var(--accent);
134
+
135
+ /* ─── Motion ───────────────────────────────────────────────────── */
136
+ /* DESIGN.md §7: hover 120ms, modal 200ms; anti-animation brand.
137
+ Easing reads as "ease-out-like" (cubic-bezier(0.2, 0, 0, 1)) since
138
+ DESIGN.md prescribes ease-out for panel/modal openers. */
139
+ --motion-fast: 120ms;
140
+ --motion-base: 200ms;
141
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
142
+
143
+ /* ─── Layout ───────────────────────────────────────────────────── */
144
+ /* DESIGN.md §4: 1100px full-page shell (answer column 720px lives
145
+ inline in components that want the reading width). Gutter 16px
146
+ on phone matches DESIGN.md's stated side margin. */
147
+ --container-max: 1100px;
148
+ --container-gutter-desktop: 24px;
149
+ --container-gutter-tablet: 16px;
150
+ --container-gutter-phone: 16px;
151
+ }
package/dist/designer/data/systems/perspective/DESIGN.md ADDED
@@ -0,0 +1,71 @@
1
+ # Design System Inspired by Perspective
2
+
3
+ > Category: Layout & Structure
4
+ > Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.
9
+
10
+ - **Visual style:** modern, clean, high-contrast
11
+ - **Color stance:** primary, neutral, success, warning, danger
12
+ - **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
13
+
14
+ ## 2. Color
15
+
16
+ - **Primary:** `#00BD7D` — Token from style foundations.
17
+ - **Secondary:** `#00BD7D` — Token from style foundations.
18
+ - **Success:** `#16A34A` — Token from style foundations.
19
+ - **Warning:** `#D97706` — Token from style foundations.
20
+ - **Danger:** `#DC2626` — Token from style foundations.
21
+ - **Surface:** `#FFFFFF` — Token from style foundations.
22
+ - **Text:** `#111827` — Token from style foundations.
23
+ - **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
24
+
25
+ - Favor Primary (#00BD7D) for CTA emphasis.
26
+ - Use Surface (#FFFFFF) for large backgrounds and cards.
27
+ - Keep body copy on Text (#111827) for legibility.
28
+
29
+ ## 3. Typography
30
+
31
+ - **Scale:** 12/14/16/20/24/32
32
+ - **Families:** primary=Poppins, display=Oswald, mono=JetBrains Mono
33
+ - **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
34
+ - Headings should carry the style personality; body text should optimize scanability and contrast.
35
+
36
+ ## 4. Spacing & Grid
37
+
38
+ - **Spacing scale:** 4/8/12/16/24/32
39
+ - Keep vertical rhythm consistent across sections and components.
40
+ - Align columns and modules to a predictable grid; avoid ad-hoc offsets.
41
+
42
+ ## 5. Layout & Composition
43
+
44
+ - Prefer clear content blocks with consistent internal padding.
45
+ - Keep hierarchy obvious: headline → support text → primary action.
46
+ - Use whitespace to separate concerns before adding borders or shadows.
47
+
48
+ ## 6. Components
49
+
50
+ - Buttons: primary action uses `#00BD7D`; secondary actions stay neutral.
51
+ - Inputs: strong focus-visible states, clear labels, and predictable error messaging.
52
+ - Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
53
+
54
+ ## 7. Motion & Interaction
55
+
56
+ - Use subtle transitions that emphasize Primary (#00BD7D) as the interaction signal.
57
+ - Default to short, purposeful transitions (150–250ms) with stable easing.
58
+ - Ensure hover, focus-visible, active, disabled, and loading states are explicit.
59
+
60
+ ## 8. Voice & Brand
61
+
62
+ - Tone should reflect the visual style: concise, confident, and product-specific.
63
+ - Keep microcopy action-oriented and avoid generic filler language.
64
+ - Preserve the style identity in headlines while keeping UI labels literal and clear.
65
+
66
+ ## 9. Anti-patterns
67
+
68
+ - Do not introduce off-palette colors when an existing token can solve the problem.
69
+ - Do not flatten hierarchy by using the same type size/weight for all text.
70
+ - Do not add decorative effects that reduce readability or accessibility.
71
+ - Do not mix unrelated visual metaphors in the same interface.