@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/playstation/components.html ADDED
@@ -0,0 +1,414 @@
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>PlayStation — reference components</title>
7
+ <meta
8
+ name="description"
9
+ content="Reference fixture for design-systems/playstation. Console Black hero,
10
+ Paper White content panels, SST weight 300 display type, 1.2× scale-on-hover
11
+ with PlayStation Cyan fill and a 2px PlayStation Blue ring."
12
+ />
13
+
14
+ <style>
15
+ :root {
16
+ --bg: #000000;
17
+ --surface: #ffffff;
18
+ --surface-warm: #f5f7fa;
19
+
20
+ --fg: #ffffff;
21
+ --fg-2: var(--fg);
22
+ --muted: #cccccc;
23
+ --meta: var(--muted);
24
+
25
+ --border: #cccccc;
26
+ --border-soft: #f3f3f3;
27
+
28
+ --accent: #0070cc;
29
+ --accent-on: #ffffff;
30
+ --accent-hover: #1eaedb;
31
+ --accent-active: #0068bd;
32
+
33
+ --success: #16a34a;
34
+ --warn: #eab308;
35
+ --danger: #c81b3a;
36
+
37
+ --font-display: "SST", "Playstation SST", Arial, Helvetica, sans-serif;
38
+ --font-body: "SST", "Playstation SST", Arial, Helvetica, sans-serif;
39
+ --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
40
+
41
+ --text-xs: 12px;
42
+ --text-sm: 14px;
43
+ --text-base: 18px;
44
+ --text-lg: 22px;
45
+ --text-xl: 28px;
46
+ --text-2xl: 35px;
47
+ --text-3xl: 44px;
48
+ --text-4xl: 54px;
49
+
50
+ --leading-body: 1.5;
51
+ --leading-tight: 1.25;
52
+ --tracking-display: -0.1px;
53
+
54
+ --space-1: 4px;
55
+ --space-2: 8px;
56
+ --space-3: 12px;
57
+ --space-4: 16px;
58
+ --space-5: 20px;
59
+ --space-6: 24px;
60
+ --space-8: 32px;
61
+ --space-12: 48px;
62
+
63
+ --section-y-desktop: 96px;
64
+ --section-y-tablet: 64px;
65
+ --section-y-phone: 48px;
66
+
67
+ --radius-sm: 6px;
68
+ --radius-md: 12px;
69
+ --radius-lg: 24px;
70
+ --radius-pill: 999px;
71
+
72
+ --elev-flat: none;
73
+ --elev-ring: 0 0 0 1px var(--border);
74
+ --elev-raised: rgba(0, 0, 0, 0.08) 0 5px 9px 0;
75
+
76
+ --focus-ring: 0 0 0 2px #0070cc;
77
+
78
+ --motion-fast: 180ms;
79
+ --motion-base: 200ms;
80
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
81
+
82
+ --container-max: 1600px;
83
+ --container-gutter-desktop: 64px;
84
+ --container-gutter-tablet: 32px;
85
+ --container-gutter-phone: 16px;
86
+ }
87
+
88
+ /* ─── Reset ─────────────────────────────────────────────── */
89
+ *, *::before, *::after { box-sizing: border-box; }
90
+ html, body { margin: 0; padding: 0; }
91
+ body {
92
+ background: var(--bg);
93
+ color: var(--fg);
94
+ font-family: var(--font-body);
95
+ font-size: var(--text-base);
96
+ line-height: var(--leading-body);
97
+ font-weight: 400;
98
+ -webkit-font-smoothing: antialiased;
99
+ }
100
+
101
+ /* ─── Layout ─────────────────────────────────────────────── */
102
+ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
103
+ section { padding-block: var(--section-y-desktop); }
104
+ @media (max-width: 1023px) {
105
+ .container { padding-inline: var(--container-gutter-tablet); }
106
+ section { padding-block: var(--section-y-tablet); }
107
+ }
108
+ @media (max-width: 639px) {
109
+ .container { padding-inline: var(--container-gutter-phone); }
110
+ section { padding-block: var(--section-y-phone); }
111
+ }
112
+
113
+ /* ─── Surface alternation — three-channel layout ────────── */
114
+ .panel-light {
115
+ background: var(--surface);
116
+ color: #1f1f1f; /* Deep Charcoal — body on Paper White */
117
+ }
118
+ .panel-light h1,
119
+ .panel-light h2,
120
+ .panel-light h3 { color: #000000; } /* Display Ink */
121
+ .panel-light .lead { color: #6b6b6b; } /* Body Gray */
122
+ .panel-light .body-muted { color: #6b6b6b; }
123
+ .panel-light .eyebrow { color: #6b6b6b; }
124
+
125
+ /* ─── Typography — SST weight 300 at display sizes ──────── */
126
+ h1, h2, h3 {
127
+ font-family: var(--font-display);
128
+ font-weight: 300; /* Quiet-authority — the PlayStation voice */
129
+ line-height: var(--leading-tight);
130
+ margin: 0;
131
+ letter-spacing: var(--tracking-display);
132
+ }
133
+ h1 { font-size: var(--text-4xl); }
134
+ h2 { font-size: var(--text-2xl); letter-spacing: 0; }
135
+ h3 { font-size: var(--text-lg); letter-spacing: 0.1px; }
136
+ p { margin: 0; }
137
+ .lead { font-size: var(--text-base); color: var(--muted); line-height: var(--leading-body); }
138
+ .body-muted { color: var(--muted); }
139
+ .body-sm { font-size: var(--text-sm); }
140
+ /* No ALL-CAPS — sentence case eyebrow */
141
+ .eyebrow {
142
+ font-size: var(--text-sm);
143
+ color: var(--muted);
144
+ font-weight: 500;
145
+ letter-spacing: 0.1px;
146
+ }
147
+ .stack-3 > * + * { margin-block-start: var(--space-3); }
148
+ .stack-4 > * + * { margin-block-start: var(--space-4); }
149
+ .stack-6 > * + * { margin-block-start: var(--space-6); }
150
+
151
+ /* ─── Buttons — full-pill, 1.2× cyan power-on hover ─────── */
152
+ .btn {
153
+ display: inline-flex;
154
+ align-items: center;
155
+ gap: var(--space-2);
156
+ padding: 12px 24px;
157
+ border-radius: var(--radius-pill);
158
+ font-family: var(--font-body);
159
+ font-size: var(--text-base);
160
+ font-weight: 500;
161
+ letter-spacing: 0.4px;
162
+ line-height: 1.25;
163
+ cursor: pointer;
164
+ border: 2px solid transparent; /* Reserved gutter so hover border doesn't shift */
165
+ text-decoration: none;
166
+ transform-origin: center;
167
+ transition: background-color var(--motion-fast) var(--ease-standard),
168
+ color var(--motion-fast) var(--ease-standard),
169
+ border-color var(--motion-fast) var(--ease-standard),
170
+ box-shadow var(--motion-fast) var(--ease-standard),
171
+ transform var(--motion-fast) var(--ease-standard);
172
+ }
173
+ .btn:active { opacity: 0.6; }
174
+ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
175
+
176
+ /* Primary — PlayStation Blue → Cyan power-on signature */
177
+ .btn-primary {
178
+ background: var(--accent);
179
+ color: var(--accent-on);
180
+ }
181
+ .btn-primary:hover {
182
+ background: var(--accent-hover);
183
+ color: var(--accent-on);
184
+ border-color: #ffffff;
185
+ box-shadow: 0 0 0 2px var(--accent);
186
+ transform: scale(1.2);
187
+ }
188
+
189
+ /* Secondary on dark — White surface, blue ink */
190
+ .btn-secondary {
191
+ background: var(--surface);
192
+ color: var(--accent);
193
+ border-color: var(--surface);
194
+ }
195
+ .btn-secondary:hover {
196
+ background: var(--accent-hover);
197
+ color: var(--accent-on);
198
+ border-color: #ffffff;
199
+ box-shadow: 0 0 0 2px var(--accent);
200
+ transform: scale(1.2);
201
+ }
202
+ /* On Paper White panels, secondary inverts to outline ink */
203
+ .panel-light .btn-secondary {
204
+ background: transparent;
205
+ color: var(--accent);
206
+ border-color: var(--accent);
207
+ }
208
+ .panel-light .btn-secondary:hover {
209
+ background: var(--accent-hover);
210
+ color: var(--accent-on);
211
+ border-color: #ffffff;
212
+ box-shadow: 0 0 0 2px var(--accent);
213
+ transform: scale(1.2);
214
+ }
215
+
216
+ /* ─── Inputs — 3px radius, 2px blue focus ring ──────────── */
217
+ .field { display: flex; flex-direction: column; gap: var(--space-2); }
218
+ .field label { font-size: var(--text-sm); font-weight: 600; color: #1f1f1f; }
219
+ .field input {
220
+ padding: 12px 14px;
221
+ border-radius: 3px; /* Tighter than the system — DESIGN.md §Inputs */
222
+ border: 1px solid var(--border);
223
+ background: #ffffff;
224
+ color: #1f1f1f;
225
+ font-family: var(--font-body);
226
+ font-size: var(--text-base);
227
+ outline: none;
228
+ transition: border-color var(--motion-fast) var(--ease-standard),
229
+ box-shadow var(--motion-fast) var(--ease-standard);
230
+ }
231
+ .field input:focus-visible {
232
+ box-shadow: var(--focus-ring); /* Ring does the work — no border-color shift */
233
+ }
234
+ .field input::placeholder { color: rgba(0, 0, 0, 0.6); }
235
+ .field-help { font-size: var(--text-sm); color: #6b6b6b; }
236
+
237
+ /* ─── Cards — feature tile, 24px radius, feather lift ───── */
238
+ .card {
239
+ background: var(--surface);
240
+ border-radius: var(--radius-lg);
241
+ padding: var(--space-8);
242
+ display: flex;
243
+ flex-direction: column;
244
+ gap: var(--space-4);
245
+ box-shadow: var(--elev-raised);
246
+ border: 1px solid var(--border-soft);
247
+ color: #1f1f1f;
248
+ }
249
+ .card h3 { color: #000000; }
250
+ .card a { color: var(--accent); }
251
+ .card a:hover { color: #1883fd; }
252
+
253
+ /* ─── Badges ────────────────────────────────────────────── */
254
+ .badge {
255
+ display: inline-flex; align-items: center; gap: var(--space-2);
256
+ padding: 4px var(--space-3);
257
+ border-radius: var(--radius-pill);
258
+ font-size: var(--text-xs); font-weight: 600; line-height: 1.5;
259
+ }
260
+ .badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 86%); }
261
+ .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
262
+
263
+ /* Platform pill — distinctive game-store white-on-dark tag */
264
+ .pill {
265
+ display: inline-flex; align-items: center;
266
+ padding: 6px 14px;
267
+ border-radius: var(--radius-pill);
268
+ background: var(--surface);
269
+ color: #000000;
270
+ font-size: var(--text-sm); font-weight: 500;
271
+ }
272
+
273
+ /* ─── Links & inline ────────────────────────────────────── */
274
+ a { color: #53b1ff; text-decoration: none; }
275
+ a:hover { color: #1883fd; }
276
+ .panel-light a { color: var(--accent); }
277
+ .panel-light a:hover { color: #1883fd; }
278
+
279
+ kbd {
280
+ font-family: var(--font-mono); font-size: var(--text-xs);
281
+ padding: 2px 6px; border-radius: 3px;
282
+ border: 1px solid rgba(255, 255, 255, 0.16);
283
+ background: rgba(255, 255, 255, 0.08); color: var(--muted);
284
+ }
285
+
286
+ /* ─── Layout helpers ────────────────────────────────────── */
287
+ .hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-12); align-items: end; }
288
+ @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
289
+ .hero-actions { display: flex; gap: var(--space-4); margin-block-start: var(--space-8); flex-wrap: wrap; }
290
+ .hero-meta {
291
+ display: flex; flex-direction: column; gap: var(--space-3);
292
+ padding: var(--space-5);
293
+ border-radius: var(--radius-md);
294
+ background: rgba(255, 255, 255, 0.06);
295
+ border: 1px solid rgba(255, 255, 255, 0.08);
296
+ backdrop-filter: blur(8px);
297
+ }
298
+ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
299
+ @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
300
+ @media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
301
+ .form-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: start; }
302
+ @media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
303
+ .form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 460px; }
304
+ .form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-3); flex-wrap: wrap; }
305
+ .icon { width: 16px; height: 16px; flex-shrink: 0; }
306
+ .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
307
+ .pill-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
308
+ </style>
309
+ </head>
310
+ <body>
311
+ <main class="container">
312
+ <section data-od-id="hero">
313
+ <div class="hero-grid">
314
+ <div class="stack-6">
315
+ <p class="eyebrow">Reference fixture · playstation</p>
316
+ <h1>Play has no limits.</h1>
317
+ <p class="lead" style="max-width: 52ch">
318
+ From masthead to footer, PlayStation moves like a console powering on —
319
+ quiet-weight SST headlines lead the eye, and every primary button
320
+ scales 1.2× into PlayStation Cyan on hover.
321
+ </p>
322
+ <div class="pill-row" aria-label="Supported platforms">
323
+ <span class="pill">PS5</span>
324
+ <span class="pill">PS4</span>
325
+ <span class="pill">PSVR2</span>
326
+ </div>
327
+ <div class="hero-actions">
328
+ <a href="./tokens.css" class="btn btn-primary">
329
+ Enter the system
330
+ <svg class="icon" viewBox="0 0 24 24" fill="none"
331
+ stroke="currentColor" stroke-width="2"
332
+ stroke-linecap="round" stroke-linejoin="round"
333
+ aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
334
+ </a>
335
+ <a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
336
+ </div>
337
+ </div>
338
+ <aside class="hero-meta" aria-label="System status">
339
+ <div class="row-between">
340
+ <span class="body-sm">PSN status</span>
341
+ <span class="badge badge-success">
342
+ <span class="badge-dot" aria-hidden="true"></span>
343
+ All services online
344
+ </span>
345
+ </div>
346
+ <p class="body-sm" style="color: var(--muted)">Network reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
347
+ <p class="body-sm" style="color: var(--muted)">Press <kbd>⌘</kbd> <kbd>K</kbd> to browse tokens.</p>
348
+ </aside>
349
+ </div>
350
+ </section>
351
+
352
+ <section data-od-id="features" class="panel-light">
353
+ <div class="stack-3">
354
+ <p class="eyebrow">What this fixture exercises</p>
355
+ <h2 style="max-width: 24ch">Three surfaces. One vertical channel.</h2>
356
+ </div>
357
+ <div class="features-grid" style="margin-block-start: var(--space-12)">
358
+ <article class="card">
359
+ <h3>Quiet-authority headlines</h3>
360
+ <p class="body-sm" style="color: #6b6b6b">
361
+ SST weight 300 from 22 to 54px — the typographic
362
+ signature that lets product photography lead while
363
+ the chrome stays restrained.
364
+ </p>
365
+ <a href="./tokens.css" class="body-sm">Inspect tokens →</a>
366
+ </article>
367
+ <article class="card">
368
+ <h3>Cyan power-on hover</h3>
369
+ <p class="body-sm" style="color: #6b6b6b">
370
+ Hover any primary button: fill snaps to PlayStation
371
+ Cyan, a 2px white border appears, a blue ring blooms,
372
+ and the button scales 1.2× — all in 180ms.
373
+ </p>
374
+ <a href="./DESIGN.md" class="body-sm">Read the rule →</a>
375
+ </article>
376
+ <article class="card">
377
+ <h3>Eleven-radius system</h3>
378
+ <p class="body-sm" style="color: #6b6b6b">
379
+ 3px on inputs, 12px on covers, 24px on hero cards,
380
+ 999px on pill CTAs. Square corners are forbidden —
381
+ every surface lands on a declared tier.
382
+ </p>
383
+ <a href="./tokens.css" class="body-sm">Inspect radius →</a>
384
+ </article>
385
+ </div>
386
+ </section>
387
+
388
+ <section data-od-id="form" class="panel-light">
389
+ <div class="form-row">
390
+ <div class="stack-4">
391
+ <p class="eyebrow">Form components</p>
392
+ <h2>Inputs in the Paper White panel.</h2>
393
+ <p class="body-sm" style="color: #6b6b6b; max-width: 48ch">
394
+ Input borders sit at 1px Mute Gray with a 3px radius —
395
+ tighter than the rest of the system. The focus indicator
396
+ is a 2px PlayStation Blue ring; no border-color change.
397
+ </p>
398
+ </div>
399
+ <form class="form" onsubmit="event.preventDefault();">
400
+ <div class="field">
401
+ <label for="psn">PSN ID</label>
402
+ <input id="psn" type="text" placeholder="enter your PSN ID" autocomplete="username" required />
403
+ <p class="field-help">We'll pair this with your console on first sign-in.</p>
404
+ </div>
405
+ <div class="form-actions">
406
+ <button type="submit" class="btn btn-primary">Sign in</button>
407
+ <button type="button" class="btn btn-secondary">Create an account</button>
408
+ </div>
409
+ </form>
410
+ </div>
411
+ </section>
412
+ </main>
413
+ </body>
414
+ </html>
package/dist/designer/data/systems/playstation/tokens.css ADDED
@@ -0,0 +1,150 @@
1
+ /* ─────────────────────────────────────────────────────────────────────────
2
+ * design-systems/playstation/tokens.css
3
+ *
4
+ * Structured token bindings for "Design System Inspired by PlayStation".
5
+ * Console-grade retail: a three-surface channel (black hero → white content
6
+ * → cobalt footer), SST weight 300 at display sizes, and a signature
7
+ * 1.2× scale-on-hover that fires across the page like a power-on chime.
8
+ *
9
+ * Key brand decisions encoded here:
10
+ * - Console Black (#000000) is the dominant brand canvas; Paper White
11
+ * is the lifted --surface tier where editorial content lives
12
+ * - PlayStation Blue (#0070cc) is the immovable anchor — primary CTAs,
13
+ * focus ring, footer
14
+ * - PlayStation Cyan (#1eaedb) lives only in --accent-hover — the
15
+ * "cyan never appears at rest" rule encoded into the token layer
16
+ * - SST weight 300 at 22–54px is the typographic voice (component layer
17
+ * enforces the weight; tokens carry sizes)
18
+ * - 180ms is the canonical interaction window for hover/focus/scale
19
+ * - Eleven-radius system collapsed onto the schema spine: 6/12/24/999
20
+ * ─────────────────────────────────────────────────────────────────── */
21
+
22
+ :root {
23
+ /* ─── Surface ─────────────────────────────────────────────────────
24
+ * Three-surface channel. Console Black anchors the masthead and hero
25
+ * zones; Paper White is the editorial gallery panel; Ice Mist is the
26
+ * gradient end-stop that quietly lifts panels off pure white. */
27
+ --bg: #000000; /* Console Black — masthead / hero canvas */
28
+ --surface: #ffffff; /* Paper White — primary content panel */
29
+ --surface-warm: #f5f7fa; /* Ice Mist — atmospheric panel lift */
30
+
31
+ /* ─── Foreground ──────────────────────────────────────────────────
32
+ * On Console Black the primary text is Inverse White. Body Gray
33
+ * (#6b6b6b) is reserved for white-panel context (set at component
34
+ * layer); Mute Gray (#cccccc) is the muted tier visible on dark. */
35
+ --fg: #ffffff; /* Inverse White — text on dark canvas */
36
+ --fg-2: var(--fg); /* alias — single display weight throughout */
37
+ --muted: #cccccc; /* Mute Gray — tertiary labels on dark */
38
+ --meta: var(--muted); /* alias — one muted tier */
39
+
40
+ /* ─── Border ──────────────────────────────────────────────────────
41
+ * Borders sit quiet — the brand prefers spacing and feather shadow to
42
+ * define edges. #cccccc matches the input border spec from DESIGN.md
43
+ * §Inputs; Divider Tint is the editorial row separator. */
44
+ --border: #cccccc; /* Mute Gray — input edges, default rule */
45
+ --border-soft: #f3f3f3; /* Divider Tint — quiet horizontal rule */
46
+
47
+ /* ─── Accent ──────────────────────────────────────────────────────
48
+ * PlayStation Blue is the immovable anchor. PlayStation Cyan lives
49
+ * exclusively in --accent-hover — never as a resting background.
50
+ * Active state lands on Dark Link Blue. */
51
+ --accent: #0070cc; /* PlayStation Blue — primary CTA / anchor */
52
+ --accent-on: #ffffff;
53
+ --accent-hover: #1eaedb; /* PlayStation Cyan — hover/focus only */
54
+ --accent-active: #0068bd; /* Dark Link Blue — pressed state */
55
+
56
+ /* ─── Semantic ────────────────────────────────────────────────────
57
+ * Warning Red is the only semantic color the brand declares. Success
58
+ * and warn ride the schema defaults — PlayStation reserves its warm
59
+ * palette for Commerce Orange, not for semantic green/yellow. */
60
+ --success: #16a34a;
61
+ --warn: #eab308;
62
+ --danger: #c81b3a; /* Warning Red — form errors */
63
+
64
+ /* ─── Typography ──────────────────────────────────────────────────
65
+ * SST is Sony's proprietary global typeface. Fallback chain:
66
+ * Arial → Helvetica → system sans. The weight 300 voice is enforced
67
+ * at the component layer — type tokens carry sizes, not weights. */
68
+ --font-display: "SST", "Playstation SST", Arial, Helvetica, sans-serif;
69
+ --font-body: "SST", "Playstation SST", Arial, Helvetica, sans-serif;
70
+ --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
71
+
72
+ /* Type scale — DESIGN.md §3 Typography.
73
+ * 54px hero → 12px legal microcopy. SST weight 300 occupies 22–54px;
74
+ * body lives at 18px; mini CTAs and captions at 14px. */
75
+ --text-xs: 12px; /* Micro Caption — footer / legal */
76
+ --text-sm: 14px; /* Caption Body / Mini CTA */
77
+ --text-base: 18px; /* Body Relaxed — standard reading */
78
+ --text-lg: 22px; /* Compact Display — module titles */
79
+ --text-xl: 28px; /* Mid Display — section headings */
80
+ --text-2xl: 35px; /* Large Display — feature headlines */
81
+ --text-3xl: 44px; /* Hero Display L — secondary hero */
82
+ --text-4xl: 54px; /* Hero Display XL — biggest SST moment */
83
+
84
+ --leading-body: 1.5; /* Body Relaxed — 1.5 throughout reading */
85
+ --leading-tight: 1.25; /* Display rhythm — 1.25 on 22–54px */
86
+ --tracking-display: -0.1px; /* 54px hero — barely-there tightening */
87
+
88
+ /* ─── Spacing ─────────────────────────────────────────────────────
89
+ * 8px base unit per DESIGN.md §5. Component-level micro-scale (3/6/
90
+ * 9/10px) lives inside individual rules; the section-y tokens below
91
+ * carry the gallery rhythm. */
92
+ --space-1: 4px;
93
+ --space-2: 8px;
94
+ --space-3: 12px;
95
+ --space-4: 16px;
96
+ --space-5: 20px;
97
+ --space-6: 24px;
98
+ --space-8: 32px;
99
+ --space-12: 48px;
100
+
101
+ /* Section rhythm — gallery pace. DESIGN.md collapsing strategy:
102
+ * 96px → 64px → 48px as the viewport narrows. */
103
+ --section-y-desktop: 96px;
104
+ --section-y-tablet: 64px;
105
+ --section-y-phone: 48px;
106
+
107
+ /* ─── Radius ──────────────────────────────────────────────────────
108
+ * Eleven-value radius system collapsed onto the schema spine:
109
+ * 6px → compact buttons / inline images
110
+ * 12px → standard game cover images & content media
111
+ * 24px → hero cards, primary feature frames
112
+ * 999px → full-pill primary buttons (the CTA signature)
113
+ * Inputs override --radius-sm with their own 3px at component layer. */
114
+ --radius-sm: 6px;
115
+ --radius-md: 12px;
116
+ --radius-lg: 24px;
117
+ --radius-pill: 999px;
118
+
119
+ /* ─── Elevation ───────────────────────────────────────────────────
120
+ * Whisper-or-shout ladder per DESIGN.md §6: shadow opacity lands on
121
+ * 0.06 / 0.08 / 0.16 / 0.8 with no middle ground. --elev-raised
122
+ * holds the standard 0.08 grid-tile feather. */
123
+ --elev-flat: none;
124
+ --elev-ring: 0 0 0 1px var(--border);
125
+ --elev-raised: rgba(0, 0, 0, 0.08) 0 5px 9px 0; /* Feather tile lift */
126
+
127
+ /* ─── Focus ring ──────────────────────────────────────────────────
128
+ * 2px PlayStation Blue ring — the exact spec from DESIGN.md §Inputs
129
+ * and §Buttons. Brand blue does focus; cyan does hover; the two
130
+ * never overlap at rest. */
131
+ --focus-ring: 0 0 0 2px #0070cc;
132
+
133
+ /* ─── Motion ──────────────────────────────────────────────────────
134
+ * 180ms is the canonical PlayStation interaction window — every
135
+ * hover / focus / scale transition lands here. The brand's "power-
136
+ * on" feel comes from synchronizing four properties at 180ms, not
137
+ * from a longer duration. */
138
+ --motion-fast: 180ms;
139
+ --motion-base: 200ms;
140
+ --ease-standard: cubic-bezier(0.2, 0, 0, 1);
141
+
142
+ /* ─── Layout ──────────────────────────────────────────────────────
143
+ * 1600px container — PlayStation explicitly tunes through 4K-TV
144
+ * browsing contexts (breakpoints reach 2120px). Outer gutters follow
145
+ * DESIGN.md §5: 64/32/16 from desktop to phone. */
146
+ --container-max: 1600px;
147
+ --container-gutter-desktop: 64px;
148
+ --container-gutter-tablet: 32px;
149
+ --container-gutter-phone: 16px;
150
+ }