@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/warm-editorial/components.html ADDED
@@ -0,0 +1,136 @@
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>Warm Editorial - reference components</title>
7
+ <meta name="description" content="Reference fixture for design-systems/warm-editorial: warm editorial system with cream canvas, serif display, and calm publication rhythm." />
8
+ <style>
9
+ :root {
10
+ --bg: #fbf6ee;
11
+ --surface: #fffdf8;
12
+ --surface-warm: #f1e3cf;
13
+ --fg: #201914;
14
+ --fg-2: #4c4037;
15
+ --muted: #7a6d63;
16
+ --meta: #9b5b32;
17
+ --border: #ded2c3;
18
+ --border-soft: #eee4d7;
19
+ --accent: #9b5b32;
20
+ --accent-on: #ffffff;
21
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
22
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
23
+ --success: #4f8a4f;
24
+ --warn: #c9822f;
25
+ --danger: #b33a3a;
26
+ --font-display: Georgia, "Times New Roman", serif;
27
+ --font-body: Inter, system-ui, sans-serif;
28
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
29
+ --text-xs: 12px;
30
+ --text-sm: 14px;
31
+ --text-base: 17px;
32
+ --text-lg: 20px;
33
+ --text-xl: 28px;
34
+ --text-2xl: 42px;
35
+ --text-3xl: 64px;
36
+ --text-4xl: 88px;
37
+ --leading-body: 1.62;
38
+ --leading-tight: 1;
39
+ --tracking-display: -0.025em;
40
+ --space-1: 4px;
41
+ --space-2: 8px;
42
+ --space-3: 12px;
43
+ --space-4: 16px;
44
+ --space-5: 20px;
45
+ --space-6: 24px;
46
+ --space-8: 32px;
47
+ --space-12: 48px;
48
+ --section-y-desktop: 112px;
49
+ --section-y-tablet: 80px;
50
+ --section-y-phone: 56px;
51
+ --radius-sm: 10px;
52
+ --radius-md: 16px;
53
+ --radius-lg: 24px;
54
+ --radius-pill: 9999px;
55
+ --elev-flat: none;
56
+ --elev-ring: 0 0 0 1px var(--border);
57
+ --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12);
58
+ --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24);
59
+ --motion-fast: 150ms;
60
+ --motion-base: 240ms;
61
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
62
+ --container-max: 1180px;
63
+ --container-gutter-desktop: 36px;
64
+ --container-gutter-tablet: 24px;
65
+ --container-gutter-phone: 16px;
66
+ }
67
+
68
+ *, *::before, *::after { box-sizing: border-box; }
69
+ html, body { margin: 0; padding: 0; }
70
+ body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
71
+ .page { min-height: 100vh; background: linear-gradient(135deg, #fbf6ee 0%, #fffdf8 58%, #f1e3cf 100%); }
72
+ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
73
+ section { padding-block: var(--section-y-desktop); }
74
+ @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
75
+ @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
76
+ h1, h2, h3, p { margin: 0; }
77
+ h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
78
+ h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
79
+ h2 { font-size: var(--text-3xl); font-weight: 700; }
80
+ h3 { font-size: var(--text-xl); font-weight: 700; }
81
+ .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
82
+ .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
83
+ .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
84
+ .stack > * + * { margin-block-start: var(--space-4); }
85
+ .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
86
+ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
87
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
88
+ .btn-primary { background: var(--accent); color: var(--accent-on); }
89
+ .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
90
+ .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
91
+ .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
92
+ .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
93
+ .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
94
+ .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
95
+ .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
96
+ .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
97
+ .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
98
+ .metric:last-child { border-right: 0; }
99
+ .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
100
+ .metric span { color: var(--muted); font-size: var(--text-sm); }
101
+ .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
102
+ .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
103
+ .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
104
+ .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
105
+ .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
106
+ .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
107
+ .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
108
+ label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
109
+ input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
110
+ input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
111
+ .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
112
+ .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
113
+ @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
114
+ </style>
115
+ </head>
116
+ <body>
117
+ <main class="page">
118
+ <section>
119
+ <div class="container hero">
120
+ <div class="stack">
121
+ <p class="eyebrow">Warm Editorial design system</p>
122
+ <h1>Warm editorial publication</h1>
123
+ <p class="lead">Soft magazine pages, warm ink, and generous long-form reading components.</p>
124
+ <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
125
+ </div>
126
+ <article class="panel" aria-label="Warm Editorial component preview">
127
+ <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
128
+ <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
129
+ <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>warm editorial system with cream canvas, serif display, and calm publication rhythm.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="warm-editorial-input">Reference input</label><input id="warm-editorial-input" value="Warm Editorial system token" /></div></div></div>
130
+ </article>
131
+ </div>
132
+ </section>
133
+ <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
134
+ </main>
135
+ </body>
136
+ </html>
package/dist/designer/data/systems/warm-editorial/tokens.css ADDED
@@ -0,0 +1,63 @@
1
+ /* design-systems/warm-editorial/tokens.css
2
+ * Structured token bindings for Warm Editorial.
3
+ * warm editorial system with cream canvas, serif display, and calm publication rhythm.
4
+ */
5
+
6
+ :root {
7
+ --bg: #fbf6ee;
8
+ --surface: #fffdf8;
9
+ --surface-warm: #f1e3cf;
10
+ --fg: #201914;
11
+ --fg-2: #4c4037;
12
+ --muted: #7a6d63;
13
+ --meta: #9b5b32;
14
+ --border: #ded2c3;
15
+ --border-soft: #eee4d7;
16
+ --accent: #9b5b32;
17
+ --accent-on: #ffffff;
18
+ --accent-hover: color-mix(in oklab, var(--accent), black 8%);
19
+ --accent-active: color-mix(in oklab, var(--accent), black 14%);
20
+ --success: #4f8a4f;
21
+ --warn: #c9822f;
22
+ --danger: #b33a3a;
23
+ --font-display: Georgia, "Times New Roman", serif;
24
+ --font-body: Inter, system-ui, sans-serif;
25
+ --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
26
+ --text-xs: 12px;
27
+ --text-sm: 14px;
28
+ --text-base: 17px;
29
+ --text-lg: 20px;
30
+ --text-xl: 28px;
31
+ --text-2xl: 42px;
32
+ --text-3xl: 64px;
33
+ --text-4xl: 88px;
34
+ --leading-body: 1.62;
35
+ --leading-tight: 1;
36
+ --tracking-display: -0.025em;
37
+ --space-1: 4px;
38
+ --space-2: 8px;
39
+ --space-3: 12px;
40
+ --space-4: 16px;
41
+ --space-5: 20px;
42
+ --space-6: 24px;
43
+ --space-8: 32px;
44
+ --space-12: 48px;
45
+ --section-y-desktop: 112px;
46
+ --section-y-tablet: 80px;
47
+ --section-y-phone: 56px;
48
+ --radius-sm: 10px;
49
+ --radius-md: 16px;
50
+ --radius-lg: 24px;
51
+ --radius-pill: 9999px;
52
+ --elev-flat: none;
53
+ --elev-ring: 0 0 0 1px var(--border);
54
+ --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12);
55
+ --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24);
56
+ --motion-fast: 150ms;
57
+ --motion-base: 240ms;
58
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
59
+ --container-max: 1180px;
60
+ --container-gutter-desktop: 36px;
61
+ --container-gutter-tablet: 24px;
62
+ --container-gutter-phone: 16px;
63
+ }
package/dist/designer/data/systems/warp/DESIGN.md ADDED
@@ -0,0 +1,256 @@
1
+ # Design System Inspired by Warp
2
+
3
+ > Category: Developer Tools
4
+ > Modern terminal. Dark IDE-like interface, block-based command UI.
5
+
6
+ ## 1. Visual Theme & Atmosphere
7
+
8
+ Warp's website feels like sitting at a campfire in a deep forest — warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either — it's Warm Parchment (`#faf9f6`), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.
9
+
10
+ The typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool — Matter has a softness and humanity that signals "this terminal is for everyone, not just greybeards." Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.
11
+
12
+ The overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.
13
+
14
+ **Key Characteristics:**
15
+ - Warm dark background — not cold black, but earthy near-black with warm gray undertones
16
+ - Warm Parchment (`#faf9f6`) text instead of pure white — subtle cream warmth
17
+ - Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface
18
+ - Nature photography interleaved with product screenshots — lifestyle meets developer tool
19
+ - Almost monochromatic warm gray palette — no bold accent colors
20
+ - Uppercase labels with wide letter-spacing (2.4px) for categorization — editorial signaling
21
+ - Pill-shaped dark buttons (`#353534`, 50px radius) — restrained, muted CTAs
22
+
23
+ ## 2. Color Palette & Roles
24
+
25
+ ### Primary
26
+ - **Warm Parchment** (`#faf9f6`): Primary text color — a barely-cream off-white that softens every surface
27
+ - **Earth Gray** (`#353534`): Button backgrounds, dark interactive surfaces — warm, not cold
28
+ - **Deep Void** (near-black, page background): The warm dark canvas derived from the body background
29
+
30
+ ### Secondary & Accent
31
+ - **Stone Gray** (`#868584`): Secondary text, muted descriptions — warm mid-gray
32
+ - **Ash Gray** (`#afaeac`): Body text, button text — the workhorse reading color
33
+ - **Purple-Tint Gray** (`#666469`): Link text with subtle purple undertone — underlined links in content
34
+
35
+ ### Surface & Background
36
+ - **Frosted Veil** (`rgba(255, 255, 255, 0.04)`): Ultra-subtle white overlay for surface differentiation
37
+ - **Mist Border** (`rgba(226, 226, 226, 0.35)` / `rgba(227, 227, 227, 0.337)`): Semi-transparent borders for card containment
38
+ - **Translucent Parchment** (`rgba(250, 249, 246, 0.9)`): Slightly transparent primary surface, allowing depth
39
+
40
+ ### Neutrals & Text
41
+ - **Warm Parchment** (`#faf9f6`): Headlines, high-emphasis text
42
+ - **Ash Gray** (`#afaeac`): Body paragraphs, descriptions
43
+ - **Stone Gray** (`#868584`): Secondary labels, subdued information
44
+ - **Muted Purple** (`#666469`): Underlined links, tertiary content
45
+ - **Dark Charcoal** (`#454545` / `#353534`): Borders, button backgrounds
46
+
47
+ ### Semantic & Accent
48
+ - Warp operates as an almost monochromatic system — no bold accent colors
49
+ - Interactive states are communicated through opacity changes and underline decorations rather than color shifts
50
+ - Any accent color would break the warm, restrained palette
51
+
52
+ ### Gradient System
53
+ - No explicit gradients on the marketing site
54
+ - Depth is created through layered semi-transparent surfaces and photography rather than color gradients
55
+
56
+ ## 3. Typography Rules
57
+
58
+ ### Font Family
59
+ - **Display & Body**: `Matter Regular` — geometric sans-serif with soft character. Fallbacks: `Matter Regular Placeholder`, system sans-serif
60
+ - **Medium**: `Matter Medium` — weight 500 variant for emphasis. Fallbacks: `Matter Medium Placeholder`
61
+ - **Square**: `Matter SQ Regular` — squared variant for select display contexts. Fallbacks: `Matter SQ Regular Placeholder`
62
+ - **UI Supplement**: `Inter` — used for specific UI elements. Fallbacks: `Inter Placeholder`
63
+ - **Monospace Display**: `Geist Mono` — for code/terminal display headings
64
+ - **Monospace Body**: `Matter Mono Regular` — custom mono companion. Fallbacks: `Matter Mono Regular Placeholder`
65
+
66
+ ### Hierarchy
67
+
68
+ | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
69
+ |------|------|------|--------|-------------|----------------|-------|
70
+ | Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |
71
+ | Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |
72
+ | Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |
73
+ | Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |
74
+ | Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |
75
+ | Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |
76
+ | Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |
77
+ | Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |
78
+ | Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |
79
+ | Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |
80
+ | Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |
81
+ | Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |
82
+ | Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |
83
+ | Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |
84
+ | Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |
85
+ | Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |
86
+ | Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal/code display |
87
+ | Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |
88
+ | UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |
89
+
90
+ ### Principles
91
+ - **Regular weight dominance**: Nearly all text uses weight 400 (Regular) — even headlines. Matter Medium (500) appears only for emphasis moments like card titles and buttons. This creates a remarkably even, calm typographic texture
92
+ - **Uppercase as editorial signal**: Small labels and categories use uppercase transform with wide letter-spacing (1.4px–2.4px), creating a magazine-editorial categorization system
93
+ - **Warm legibility**: The combination of Matter's geometric softness + warm text colors (#faf9f6) + controlled negative tracking creates text that reads as effortlessly human on dark surfaces
94
+ - **No bold display**: Zero use of bold (700+) weight anywhere — restraint is the philosophy
95
+
96
+ ## 4. Component Stylings
97
+
98
+ ### Buttons
99
+ - **Dark Pill**: `#353534` background, Ash Gray (`#afaeac`) text, pill shape (50px radius), `10px` padding. The primary CTA — warm, muted, understated
100
+ - **Frosted Tag**: `rgba(255, 255, 255, 0.16)` background, black text (`rgb(0, 0, 0)`), rectangular (6px radius), `1px 6px` padding. Small inline tag-like buttons
101
+ - **Ghost**: No visible background, text-only with underline decoration on hover
102
+ - **Hover**: Subtle opacity or brightness shift — no dramatic color changes
103
+
104
+ ### Cards & Containers
105
+ - **Photography Cards**: Full-bleed nature imagery with overlay text, 8px–12px border-radius
106
+ - **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px–12px)
107
+ - **Bordered Cards**: Semi-transparent border (`rgba(226, 226, 226, 0.35)`) for containment, 12px–14px radius
108
+ - **Hover**: Minimal — content cards don't dramatically change on hover, maintaining the calm aesthetic
109
+
110
+ ### Inputs & Forms
111
+ - Minimal form presence on the marketing site
112
+ - Dark background inputs with warm gray text
113
+ - Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)
114
+
115
+ ### Navigation
116
+ - **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links
117
+ - **Link color**: Stone Gray (`#868584`) for muted nav, Warm Parchment for active/hover
118
+ - **CTA button**: Dark pill (#353534) at nav end — restrained, not attention-grabbing
119
+ - **Mobile**: Collapses to simplified navigation
120
+ - **Sticky**: Nav stays fixed on scroll
121
+
122
+ ### Image Treatment
123
+ - **Nature photography**: Landscapes, forests, golden-hour scenes — completely unique for a developer tool
124
+ - **Terminal screenshots**: Product UI shown in realistic terminal window frames
125
+ - **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative
126
+ - **Full-bleed**: Images often span full container width with 8px radius
127
+ - **Video**: Video elements present with 10px border-radius
128
+
129
+ ### Testimonial Section
130
+ - Social proof area ("Don't take our word for it") with quotes
131
+ - Muted styling consistent with overall restraint
132
+
133
+ ## 5. Layout Principles
134
+
135
+ ### Spacing System
136
+ - **Base unit**: 8px
137
+ - **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px
138
+ - **Section padding**: 80px–120px vertical between major sections
139
+ - **Card padding**: 16px–32px internal spacing
140
+ - **Component gaps**: 8px–16px between related elements
141
+
142
+ ### Grid & Container
143
+ - **Max width**: ~1500px container (breakpoint at 1500px), centered
144
+ - **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials
145
+ - **Cinematic layout**: Wide containers that let photography breathe
146
+
147
+ ### Whitespace Philosophy
148
+ - **Vast and warm**: Generous spacing between sections — the dark background creates a warm void that feels contemplative rather than empty
149
+ - **Photography as whitespace**: Nature images serve as visual breathing room between dense product information
150
+ - **Editorial pacing**: The layout reads like a magazine — each section is a deliberate page-turn moment
151
+
152
+ ### Border Radius Scale
153
+ - **4px**: Small interactive elements — buttons, tags
154
+ - **5px–6px**: Standard components — links, small containers
155
+ - **8px**: Images, video containers, standard cards
156
+ - **10px**: Video elements, medium containers
157
+ - **12px**: Feature cards, large images
158
+ - **14px**: Large containers, prominent cards
159
+ - **40px**: Large rounded sections
160
+ - **50px**: Pill buttons — primary CTAs
161
+ - **200px**: Progress bars — full pill shape
162
+
163
+ ## 6. Depth & Elevation
164
+
165
+ | Level | Treatment | Use |
166
+ |-------|-----------|-----|
167
+ | Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |
168
+ | Level 1 (Veil) | `rgba(255, 255, 255, 0.04)` overlay | Subtle surface differentiation |
169
+ | Level 2 (Border) | `rgba(226, 226, 226, 0.35) 1px` border | Card containment, section separation |
170
+ | Level 3 (Ambient) | `rgba(0, 0, 0, 0.2) 0px 5px 15px` (inferred from design) | Image containers, floating elements |
171
+
172
+ ### Shadow Philosophy
173
+ Warp's elevation system is remarkably flat — almost zero shadow usage on the marketing site. Depth is communicated through:
174
+ - **Semi-transparent borders** instead of shadows — borders at 35% opacity create a ghostly containment
175
+ - **Photography layering** — images create natural depth without artificial shadows
176
+ - **Surface opacity shifts** — `rgba(255, 255, 255, 0.04)` overlays create barely-perceptible layer differences
177
+ - The effect is calm and grounded — nothing floats, everything rests
178
+
179
+ ### Decorative Depth
180
+ - **Photography as depth**: Nature images create atmospheric depth that shadows cannot
181
+ - **No glass or blur effects**: The design avoids trendy glassmorphism entirely
182
+ - **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS
183
+
184
+ ## 7. Do's and Don'ts
185
+
186
+ ### Do
187
+ - Use warm off-white (`#faf9f6`) for text instead of pure white — the cream undertone is essential
188
+ - Keep buttons restrained and muted — dark fill (#353534) with muted text (#afaeac), no bright CTAs
189
+ - Apply Matter Regular (weight 400) for nearly everything — even headlines. Reserve Medium (500) for emphasis only
190
+ - Use uppercase labels with wide letter-spacing (1.4px–2.4px) for categorization
191
+ - Interleave nature photography with product screenshots — this is core to the brand identity
192
+ - Maintain the almost monochromatic warm gray palette — no bold accent colors
193
+ - Use semi-transparent borders (`rgba(226, 226, 226, 0.35)`) for card containment instead of shadows
194
+ - Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment
195
+
196
+ ### Don't
197
+ - Use pure white (#ffffff) for text — it's always warm parchment (#faf9f6)
198
+ - Add bold accent colors (blue, red, green) — the system is deliberately monochromatic warm grays
199
+ - Apply bold weight (700+) to any text — Warp never goes above Medium (500)
200
+ - Use heavy drop shadows — depth comes from borders, photography, and opacity shifts
201
+ - Create cold or blue-tinted dark backgrounds — the warmth is essential
202
+ - Add decorative gradients or glow effects — the photography provides all visual interest
203
+ - Use tight, compressed layouts — the editorial spacing is generous and contemplative
204
+ - Mix in additional typefaces beyond the Matter family + Inter supplement
205
+
206
+ ## 8. Responsive Behavior
207
+
208
+ ### Breakpoints
209
+ | Name | Width | Key Changes |
210
+ |------|-------|-------------|
211
+ | Mobile | <810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |
212
+ | Tablet | 810px–1500px | 2-column features begin, photography scales, nav links partially visible |
213
+ | Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |
214
+
215
+ ### Touch Targets
216
+ - Pill buttons: 50px radius with 10px padding — comfortable touch targets
217
+ - Nav links: 16px text with surrounding padding for accessibility
218
+ - Mobile CTAs: Full-width pills on mobile for easy thumb reach
219
+
220
+ ### Collapsing Strategy
221
+ - **Navigation**: Full horizontal nav → simplified mobile navigation
222
+ - **Hero text**: 80px display → 56px → 48px across breakpoints
223
+ - **Feature sections**: Side-by-side photography + text → stacked vertically
224
+ - **Photography**: Scales within containers, maintains cinematic aspect ratios
225
+ - **Section spacing**: Reduces proportionally — generous desktop → compact mobile
226
+
227
+ ### Image Behavior
228
+ - Nature photography scales responsively, maintaining wide cinematic ratios
229
+ - Terminal screenshots maintain aspect ratios within responsive containers
230
+ - Video elements scale with 10px radius maintained
231
+ - No art direction changes — same compositions across breakpoints
232
+
233
+ ## 9. Agent Prompt Guide
234
+
235
+ ### Quick Color Reference
236
+ - Primary Text: Warm Parchment (`#faf9f6`)
237
+ - Secondary Text: Ash Gray (`#afaeac`)
238
+ - Tertiary Text: Stone Gray (`#868584`)
239
+ - Button Background: Earth Gray (`#353534`)
240
+ - Border: Mist Border (`rgba(226, 226, 226, 0.35)`)
241
+ - Background: Deep warm near-black (page background)
242
+
243
+ ### Example Component Prompts
244
+ - "Create a hero section on warm dark background with 80px Matter Regular heading in warm parchment (#faf9f6), line-height 1.0, letter-spacing -2.4px, and a dark pill button (#353534, 50px radius, #afaeac text)"
245
+ - "Design a feature card with semi-transparent border (rgba(226,226,226,0.35)), 12px radius, warm dark background, Matter Regular heading at 24px, and ash gray (#afaeac) body text at 18px"
246
+ - "Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color — editorial magazine style"
247
+ - "Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation"
248
+ - "Design a navigation bar with warm dark background, Matter Regular links at 16px in stone gray (#868584), hover to warm parchment (#faf9f6), and a dark pill CTA button (#353534) at the right"
249
+
250
+ ### Iteration Guide
251
+ When refining existing screens generated with this design system:
252
+ 1. Verify text color is warm parchment (#faf9f6) not pure white — the warmth is subtle but essential
253
+ 2. Ensure all buttons use the restrained dark palette (#353534) — no bright or colorful CTAs
254
+ 3. Check that Matter Regular (400) is the default weight — Medium (500) only for emphasis
255
+ 4. Confirm uppercase labels have wide letter-spacing (1.4px–2.4px) — tight uppercase feels wrong here
256
+ 5. The overall tone should feel warm and calm, like a well-designed magazine — not aggressive or tech-flashy