@jaimevalasek/aioson 1.4.0 → 1.6.0

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 (301) hide show
  1. package/CHANGELOG.md +31 -1
  2. package/LICENSE +661 -21
  3. package/README.md +9 -1
  4. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  5. package/docs/design-previews/aurora-command-ui.html +682 -0
  6. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  7. package/docs/design-previews/bold-editorial-ui.html +717 -0
  8. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  9. package/docs/design-previews/clean-saas-ui.html +549 -0
  10. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  11. package/docs/design-previews/cognitive-core-ui.html +463 -0
  12. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  13. package/docs/design-previews/glassmorphism-ui.html +886 -0
  14. package/docs/design-previews/index.html +699 -0
  15. package/docs/design-previews/interface-design-website.html +1187 -0
  16. package/docs/design-previews/interface-design.html +513 -0
  17. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  18. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  19. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  20. package/docs/design-previews/premium-command-center-ui.html +552 -0
  21. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  22. package/docs/design-previews/warm-craft-ui.html +739 -0
  23. package/docs/en/cli-reference.md +20 -9
  24. package/docs/en/squad-dashboard.md +372 -0
  25. package/docs/openclaw-bridge.md +308 -0
  26. package/docs/pt/README.md +7 -0
  27. package/docs/pt/agent-sharding.md +132 -0
  28. package/docs/pt/agentes.md +131 -11
  29. package/docs/pt/busca-de-contexto.md +129 -0
  30. package/docs/pt/cache-de-contexto.md +156 -0
  31. package/docs/pt/cenarios.md +46 -2
  32. package/docs/pt/comandos-cli.md +88 -1
  33. package/docs/pt/design-hybrid-forge.md +107 -0
  34. package/docs/pt/inicio-rapido.md +72 -5
  35. package/docs/pt/inteligencia-adaptativa.md +324 -0
  36. package/docs/pt/monitor-de-contexto.md +104 -0
  37. package/docs/pt/recuperacao-de-sessao.md +125 -0
  38. package/docs/pt/sandbox.md +125 -0
  39. package/docs/pt/skills.md +98 -6
  40. package/docs/pt/squad-dashboard.md +373 -0
  41. package/docs/testing/genome-2.0-matrix.md +5 -5
  42. package/docs/testing/genome-2.0-rollout.md +9 -9
  43. package/package.json +2 -2
  44. package/src/agent-loader.js +280 -0
  45. package/src/backup-local.js +74 -0
  46. package/src/cli.js +192 -0
  47. package/src/commands/agent-loader.js +85 -0
  48. package/src/commands/backup-local-cmd.js +25 -0
  49. package/src/commands/context-cache.js +90 -0
  50. package/src/commands/context-monitor.js +92 -0
  51. package/src/commands/context-search.js +66 -0
  52. package/src/commands/design-hybrid-options.js +385 -0
  53. package/src/commands/health.js +214 -0
  54. package/src/commands/init.js +54 -13
  55. package/src/commands/install.js +52 -13
  56. package/src/commands/learning-evolve.js +355 -0
  57. package/src/commands/live.js +34 -0
  58. package/src/commands/recovery.js +43 -0
  59. package/src/commands/runtime.js +242 -0
  60. package/src/commands/sandbox.js +37 -0
  61. package/src/commands/setup-context.js +29 -4
  62. package/src/commands/setup.js +178 -0
  63. package/src/commands/skill.js +79 -32
  64. package/src/commands/squad-daemon.js +209 -0
  65. package/src/commands/squad-dashboard.js +39 -0
  66. package/src/commands/squad-deploy.js +64 -0
  67. package/src/commands/squad-doctor.js +52 -0
  68. package/src/commands/squad-mcp.js +270 -0
  69. package/src/commands/squad-processes.js +56 -0
  70. package/src/commands/squad-recovery.js +42 -0
  71. package/src/commands/squad-roi.js +291 -0
  72. package/src/commands/squad-score.js +250 -0
  73. package/src/commands/squad-status.js +37 -1
  74. package/src/commands/squad-validate.js +62 -1
  75. package/src/commands/squad-webhook.js +160 -0
  76. package/src/commands/squad-worker.js +191 -0
  77. package/src/commands/squad-worktrees.js +75 -0
  78. package/src/commands/tool-registry-cmd.js +232 -0
  79. package/src/commands/update.js +7 -0
  80. package/src/commands/web-map.js +70 -0
  81. package/src/commands/web-scrape.js +71 -0
  82. package/src/constants.js +17 -0
  83. package/src/context-cache.js +159 -0
  84. package/src/context-search.js +326 -0
  85. package/src/context-writer.js +45 -1
  86. package/src/design-variation-catalog.js +503 -0
  87. package/src/i18n/messages/en.js +159 -3
  88. package/src/i18n/messages/es.js +147 -2
  89. package/src/i18n/messages/fr.js +147 -2
  90. package/src/i18n/messages/pt-BR.js +158 -3
  91. package/src/install-animation.js +260 -0
  92. package/src/install-profile.js +143 -0
  93. package/src/install-wizard.js +474 -0
  94. package/src/installer.js +38 -10
  95. package/src/lib/webhook-server.js +328 -0
  96. package/src/mcp-connectors/registry.js +602 -0
  97. package/src/parser.js +7 -1
  98. package/src/recovery-context-session.js +154 -0
  99. package/src/runtime-store.js +355 -2
  100. package/src/sandbox.js +177 -0
  101. package/src/squad/external-session.js +180 -0
  102. package/src/squad/inter-squad.js +74 -0
  103. package/src/squad/recovery-context.js +201 -0
  104. package/src/squad/worktree-manager.js +114 -0
  105. package/src/squad-daemon.js +490 -0
  106. package/src/squad-dashboard/api.js +223 -0
  107. package/src/squad-dashboard/attachment-handler.js +93 -0
  108. package/src/squad-dashboard/context-monitor.js +157 -0
  109. package/src/squad-dashboard/execution-logs.js +115 -0
  110. package/src/squad-dashboard/hunk-review.js +209 -0
  111. package/src/squad-dashboard/metrics.js +133 -0
  112. package/src/squad-dashboard/process-monitor.js +125 -0
  113. package/src/squad-dashboard/renderer.js +858 -0
  114. package/src/squad-dashboard/server.js +232 -0
  115. package/src/squad-dashboard/styles.js +525 -0
  116. package/src/squad-dashboard/token-tracker.js +99 -0
  117. package/src/tool-executor.js +94 -0
  118. package/src/updater.js +11 -3
  119. package/src/web.js +284 -0
  120. package/src/worker-runner.js +339 -0
  121. package/template/.aioson/agents/analyst.md +62 -3
  122. package/template/.aioson/agents/architect.md +42 -0
  123. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  124. package/template/.aioson/agents/dev.md +223 -11
  125. package/template/.aioson/agents/deyvin.md +65 -0
  126. package/template/.aioson/agents/neo.md +152 -0
  127. package/template/.aioson/agents/orache.md +17 -0
  128. package/template/.aioson/agents/orchestrator.md +26 -0
  129. package/template/.aioson/agents/pm.md +58 -0
  130. package/template/.aioson/agents/product.md +88 -12
  131. package/template/.aioson/agents/qa.md +80 -0
  132. package/template/.aioson/agents/setup.md +128 -22
  133. package/template/.aioson/agents/sheldon.md +704 -0
  134. package/template/.aioson/agents/squad.md +191 -0
  135. package/template/.aioson/agents/tester.md +410 -0
  136. package/template/.aioson/agents/ux-ui.md +12 -0
  137. package/template/.aioson/config.md +21 -0
  138. package/template/.aioson/context/forensics/.gitkeep +0 -0
  139. package/template/.aioson/context/seeds/seed-example.md +27 -0
  140. package/template/.aioson/context/user-profile.md +42 -0
  141. package/template/.aioson/locales/en/agents/analyst.md +8 -0
  142. package/template/.aioson/locales/en/agents/architect.md +8 -0
  143. package/template/.aioson/locales/en/agents/dev.md +66 -7
  144. package/template/.aioson/locales/en/agents/deyvin.md +8 -0
  145. package/template/.aioson/locales/en/agents/neo.md +8 -0
  146. package/template/.aioson/locales/en/agents/orchestrator.md +26 -0
  147. package/template/.aioson/locales/en/agents/qa.md +49 -0
  148. package/template/.aioson/locales/en/agents/setup.md +35 -2
  149. package/template/.aioson/locales/en/agents/sheldon.md +340 -0
  150. package/template/.aioson/locales/en/agents/ux-ui.md +8 -0
  151. package/template/.aioson/locales/es/agents/analyst.md +8 -0
  152. package/template/.aioson/locales/es/agents/architect.md +8 -0
  153. package/template/.aioson/locales/es/agents/dev.md +66 -7
  154. package/template/.aioson/locales/es/agents/deyvin.md +8 -0
  155. package/template/.aioson/locales/es/agents/neo.md +48 -0
  156. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  157. package/template/.aioson/locales/es/agents/qa.md +26 -0
  158. package/template/.aioson/locales/es/agents/setup.md +35 -2
  159. package/template/.aioson/locales/es/agents/sheldon.md +192 -0
  160. package/template/.aioson/locales/es/agents/squad.md +63 -0
  161. package/template/.aioson/locales/es/agents/ux-ui.md +8 -0
  162. package/template/.aioson/locales/fr/agents/analyst.md +8 -0
  163. package/template/.aioson/locales/fr/agents/architect.md +8 -0
  164. package/template/.aioson/locales/fr/agents/dev.md +66 -7
  165. package/template/.aioson/locales/fr/agents/deyvin.md +8 -0
  166. package/template/.aioson/locales/fr/agents/neo.md +48 -0
  167. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  168. package/template/.aioson/locales/fr/agents/qa.md +26 -0
  169. package/template/.aioson/locales/fr/agents/setup.md +35 -2
  170. package/template/.aioson/locales/fr/agents/sheldon.md +192 -0
  171. package/template/.aioson/locales/fr/agents/squad.md +63 -0
  172. package/template/.aioson/locales/fr/agents/ux-ui.md +8 -0
  173. package/template/.aioson/locales/pt-BR/agents/analyst.md +19 -0
  174. package/template/.aioson/locales/pt-BR/agents/architect.md +19 -0
  175. package/template/.aioson/locales/pt-BR/agents/dev.md +75 -12
  176. package/template/.aioson/locales/pt-BR/agents/deyvin.md +8 -0
  177. package/template/.aioson/locales/pt-BR/agents/neo.md +147 -0
  178. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +26 -0
  179. package/template/.aioson/locales/pt-BR/agents/product.md +8 -3
  180. package/template/.aioson/locales/pt-BR/agents/qa.md +60 -0
  181. package/template/.aioson/locales/pt-BR/agents/setup.md +35 -2
  182. package/template/.aioson/locales/pt-BR/agents/sheldon.md +192 -0
  183. package/template/.aioson/locales/pt-BR/agents/squad.md +105 -0
  184. package/template/.aioson/locales/pt-BR/agents/ux-ui.md +8 -0
  185. package/template/.aioson/schemas/squad-blueprint.schema.json +21 -0
  186. package/template/.aioson/schemas/squad-manifest.schema.json +178 -1
  187. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  188. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  189. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  190. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  191. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  192. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  193. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  194. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  195. package/template/.aioson/skills/design/bold-editorial-ui/SKILL.md +205 -0
  196. package/template/.aioson/skills/design/bold-editorial-ui/references/art-direction.md +338 -0
  197. package/template/.aioson/skills/design/bold-editorial-ui/references/components.md +977 -0
  198. package/template/.aioson/skills/design/bold-editorial-ui/references/dashboards.md +218 -0
  199. package/template/.aioson/skills/design/bold-editorial-ui/references/design-tokens.md +326 -0
  200. package/template/.aioson/skills/design/bold-editorial-ui/references/motion.md +461 -0
  201. package/template/.aioson/skills/design/bold-editorial-ui/references/patterns.md +293 -0
  202. package/template/.aioson/skills/design/bold-editorial-ui/references/websites.md +352 -0
  203. package/template/.aioson/skills/design/clean-saas-ui/SKILL.md +210 -0
  204. package/template/.aioson/skills/design/clean-saas-ui/references/art-direction.md +319 -0
  205. package/template/.aioson/skills/design/clean-saas-ui/references/components.md +365 -0
  206. package/template/.aioson/skills/design/clean-saas-ui/references/dashboards.md +196 -0
  207. package/template/.aioson/skills/design/clean-saas-ui/references/design-tokens.md +244 -0
  208. package/template/.aioson/skills/design/clean-saas-ui/references/motion.md +235 -0
  209. package/template/.aioson/skills/design/clean-saas-ui/references/patterns.md +215 -0
  210. package/template/.aioson/skills/design/clean-saas-ui/references/websites.md +295 -0
  211. package/template/.aioson/skills/design/cognitive-core-ui/SKILL.md +55 -9
  212. package/template/.aioson/skills/design/cognitive-core-ui/references/art-direction.md +339 -0
  213. package/template/.aioson/skills/design/cognitive-core-ui/references/components.md +1 -1
  214. package/template/.aioson/skills/design/cognitive-core-ui/references/dashboards.md +100 -0
  215. package/template/.aioson/skills/design/cognitive-core-ui/references/design-tokens.md +43 -9
  216. package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md +40 -0
  217. package/template/.aioson/skills/design/cognitive-core-ui/references/patterns.md +1 -1
  218. package/template/.aioson/skills/design/cognitive-core-ui/references/websites.md +99 -12
  219. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  220. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  221. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  222. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  223. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  224. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  225. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  226. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  227. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  228. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  229. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  230. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  231. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  232. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  233. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  234. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  235. package/template/.aioson/skills/design/warm-craft-ui/SKILL.md +209 -0
  236. package/template/.aioson/skills/design/warm-craft-ui/references/art-direction.md +324 -0
  237. package/template/.aioson/skills/design/warm-craft-ui/references/components.md +508 -0
  238. package/template/.aioson/skills/design/warm-craft-ui/references/dashboards.md +223 -0
  239. package/template/.aioson/skills/design/warm-craft-ui/references/design-tokens.md +374 -0
  240. package/template/.aioson/skills/design/warm-craft-ui/references/motion.md +356 -0
  241. package/template/.aioson/skills/design/warm-craft-ui/references/patterns.md +288 -0
  242. package/template/.aioson/skills/design/warm-craft-ui/references/websites.md +289 -0
  243. package/template/.aioson/skills/premium-visual-design/SKILL.md +83 -0
  244. package/template/.aioson/skills/premium-visual-design/components/agent-badge.md +92 -0
  245. package/template/.aioson/skills/premium-visual-design/components/dependency-node.md +102 -0
  246. package/template/.aioson/skills/premium-visual-design/components/mention-autocomplete.md +136 -0
  247. package/template/.aioson/skills/premium-visual-design/components/notification-center.md +136 -0
  248. package/template/.aioson/skills/premium-visual-design/components/review-action-bar.md +188 -0
  249. package/template/.aioson/skills/premium-visual-design/components/team-switcher.md +131 -0
  250. package/template/.aioson/skills/premium-visual-design/patterns/agent-message-thread.md +198 -0
  251. package/template/.aioson/skills/premium-visual-design/patterns/notification-panel.md +275 -0
  252. package/template/.aioson/skills/premium-visual-design/patterns/review-workflow-ui.md +234 -0
  253. package/template/.aioson/skills/premium-visual-design/patterns/task-dependency-graph.md +147 -0
  254. package/template/.aioson/skills/premium-visual-design/tokens/status-extended.md +142 -0
  255. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  256. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  257. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  258. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  259. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  260. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  261. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  262. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  263. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  264. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  265. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  266. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  267. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  268. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  269. package/template/.aioson/skills/squad/formats/catalog.json +15 -0
  270. package/template/.aioson/skills/squad/formats/content/blog-post.md +47 -0
  271. package/template/.aioson/skills/squad/formats/content/newsletter.md +47 -0
  272. package/template/.aioson/skills/squad/formats/creative/podcast-script.md +43 -0
  273. package/template/.aioson/skills/squad/formats/creative/video-script.md +41 -0
  274. package/template/.aioson/skills/squad/formats/social/instagram-feed.md +42 -0
  275. package/template/.aioson/skills/squad/formats/social/linkedin-post.md +42 -0
  276. package/template/.aioson/skills/squad/formats/social/tiktok.md +39 -0
  277. package/template/.aioson/skills/squad/formats/social/twitter-thread.md +39 -0
  278. package/template/.aioson/skills/squad/formats/social/youtube-long.md +47 -0
  279. package/template/.aioson/skills/squad/formats/social/youtube-shorts.md +39 -0
  280. package/template/.aioson/skills/squad/patterns/multi-platform-pattern.md +108 -0
  281. package/template/.aioson/skills/squad/patterns/persona-based-pattern.md +98 -0
  282. package/template/.aioson/skills/squad/patterns/pipeline-pattern.md +106 -0
  283. package/template/.aioson/skills/squad/patterns/review-loop-pattern.md +81 -0
  284. package/template/.aioson/skills/squad/references/checklist-templates.md +122 -0
  285. package/template/.aioson/skills/squad/references/executor-archetypes.md +123 -0
  286. package/template/.aioson/skills/squad/references/workflow-templates.md +169 -0
  287. package/template/.aioson/skills/static/debugging-protocol.md +42 -0
  288. package/template/.aioson/skills/static/git-worktrees.md +36 -0
  289. package/template/.aioson/tasks/implementation-plan.md +19 -0
  290. package/template/.aioson/tasks/squad-design.md +28 -0
  291. package/template/.aioson/tasks/squad-profile.md +48 -0
  292. package/template/.aioson/tasks/squad-review.md +61 -0
  293. package/template/.aioson/tasks/squad-task-decompose.md +66 -0
  294. package/template/.claude/commands/aioson/agent/neo.md +5 -0
  295. package/template/.claude/commands/aioson/agent/tester.md +5 -0
  296. package/template/.gemini/GEMINI.md +1 -0
  297. package/template/.gemini/commands/aios-neo.toml +4 -0
  298. package/template/.gemini/commands/aios-tester.toml +6 -0
  299. package/template/AGENTS.md +26 -1
  300. package/template/CLAUDE.md +6 -2
  301. package/template/OPENCODE.md +2 -0
package/template/.aioson/skills/design/clean-saas-ui/references/design-tokens.md ADDED
@@ -0,0 +1,244 @@
1
+ # Design Tokens — Clean SaaS UI
2
+
3
+ This file is the source of truth for all CSS variables. Always apply tokens from this file — never hardcode values.
4
+
5
+ ---
6
+
7
+ ## Token application scope
8
+
9
+ Place root tokens on the page root or theme container:
10
+
11
+ ```html
12
+ <html data-theme="light">
13
+ <!-- or -->
14
+ <div data-theme="dark">
15
+ ```
16
+
17
+ All token overrides for dark theme go inside `[data-theme="dark"] { ... }`.
18
+
19
+ ---
20
+
21
+ ## Typography
22
+
23
+ ```css
24
+ :root {
25
+ --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
26
+ --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
27
+ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
28
+ }
29
+ ```
30
+
31
+ **Both display and body are sans-serif (Inter).** The differentiator is weight and tracking, not font family.
32
+
33
+ - Headings: `font-weight: 600–700`, `letter-spacing: -0.02em`
34
+ - Body: `font-weight: 400`, `letter-spacing: normal`
35
+ - Mono: used ONLY for code, IDs, technical metadata — never for paragraphs or navigation
36
+
37
+ ### Font sizes
38
+
39
+ ```css
40
+ :root {
41
+ --text-xs: 0.75rem; /* 12px — helper text, captions, mono labels */
42
+ --text-sm: 0.875rem; /* 14px — table data, form labels, nav items */
43
+ --text-base: 1rem; /* 16px — body text */
44
+ --text-lg: 1.125rem; /* 18px — section titles, card headings */
45
+ --text-xl: 1.25rem; /* 20px */
46
+ --text-2xl: 1.5rem; /* 24px — page titles */
47
+ --text-3xl: 1.875rem; /* 30px — stat numbers */
48
+ --text-4xl: 2.25rem; /* 36px — hero stat numbers */
49
+ --text-5xl: 3rem; /* 48px — hero headings (marketing pages only) */
50
+ }
51
+ ```
52
+
53
+ ---
54
+
55
+ ## Colors — Light theme (default)
56
+
57
+ ```css
58
+ :root,
59
+ [data-theme="light"] {
60
+ /* Backgrounds */
61
+ --bg-void: #F3F4F6; /* gray-100 — page background */
62
+ --bg-base: #F9FAFB; /* gray-50 — app shell background */
63
+ --bg-surface: #FFFFFF; /* cards, panels, sidebar */
64
+ --bg-elevated: #F3F4F6; /* gray-100 — hover states, nested areas */
65
+ --bg-overlay: #E5E7EB; /* gray-200 — overlays, dividers */
66
+
67
+ /* Text */
68
+ --text-heading: #111827; /* gray-900 — page titles, card headings */
69
+ --text-primary: #374151; /* gray-700 — body, table data */
70
+ --text-secondary: #6B7280; /* gray-500 — helper text, labels */
71
+ --text-muted: #9CA3AF; /* gray-400 — placeholders, timestamps */
72
+
73
+ /* Accent — professional blue */
74
+ --accent: #2563EB; /* blue-600 */
75
+ --accent-strong: #1D4ED8; /* blue-700 — hover on primary buttons */
76
+ --accent-dim: rgba(37, 99, 235, 0.10); /* bg for accent highlights */
77
+ --accent-hover: #1D4ED8;
78
+ --accent-contrast: #FFFFFF; /* text on accent bg */
79
+
80
+ /* Borders */
81
+ --border-subtle: #F3F4F6; /* gray-100 — very subtle dividers */
82
+ --border-default: #E5E7EB; /* gray-200 — standard borders */
83
+ --border-medium: #D1D5DB; /* gray-300 — input borders, card borders */
84
+ --border-strong: #9CA3AF; /* gray-400 — strong dividers */
85
+ --border-accent: #2563EB; /* accent border — active states */
86
+
87
+ /* Semantic */
88
+ --semantic-success: #16A34A; /* green-600 */
89
+ --semantic-success-dim: rgba(22, 163, 74, 0.10);
90
+ --semantic-warning: #D97706; /* amber-600 */
91
+ --semantic-warning-dim: rgba(217, 119, 6, 0.10);
92
+ --semantic-danger: #DC2626; /* red-600 */
93
+ --semantic-danger-dim: rgba(220, 38, 38, 0.10);
94
+ --semantic-info: #2563EB; /* blue-600 — same as accent */
95
+ --semantic-info-dim: rgba(37, 99, 235, 0.10);
96
+ --semantic-neutral: #6B7280; /* gray-500 */
97
+ --semantic-neutral-dim: rgba(107, 114, 128, 0.10);
98
+ }
99
+ ```
100
+
101
+ ---
102
+
103
+ ## Colors — Dark theme
104
+
105
+ ```css
106
+ [data-theme="dark"] {
107
+ /* Backgrounds */
108
+ --bg-void: #111827; /* gray-900 */
109
+ --bg-base: #1F2937; /* gray-800 */
110
+ --bg-surface: #374151; /* gray-700 */
111
+ --bg-elevated: #4B5563; /* gray-600 */
112
+ --bg-overlay: #6B7280; /* gray-500 */
113
+
114
+ /* Text */
115
+ --text-heading: #F9FAFB; /* gray-50 */
116
+ --text-primary: #E5E7EB; /* gray-200 */
117
+ --text-secondary: #9CA3AF; /* gray-400 */
118
+ --text-muted: #6B7280; /* gray-500 */
119
+
120
+ /* Accent — slightly brighter blue for dark bg */
121
+ --accent: #3B82F6; /* blue-500 */
122
+ --accent-strong: #2563EB; /* blue-600 */
123
+ --accent-dim: rgba(59, 130, 246, 0.15);
124
+ --accent-hover: #2563EB;
125
+ --accent-contrast: #FFFFFF;
126
+
127
+ /* Borders */
128
+ --border-subtle: #1F2937;
129
+ --border-default: #374151;
130
+ --border-medium: #4B5563;
131
+ --border-strong: #6B7280;
132
+ --border-accent: #3B82F6;
133
+
134
+ /* Semantic */
135
+ --semantic-success: #22C55E; /* green-500 */
136
+ --semantic-success-dim: rgba(34, 197, 94, 0.15);
137
+ --semantic-warning: #F59E0B; /* amber-500 */
138
+ --semantic-warning-dim: rgba(245, 158, 11, 0.15);
139
+ --semantic-danger: #EF4444; /* red-500 */
140
+ --semantic-danger-dim: rgba(239, 68, 68, 0.15);
141
+ --semantic-info: #3B82F6;
142
+ --semantic-info-dim: rgba(59, 130, 246, 0.15);
143
+ --semantic-neutral: #9CA3AF;
144
+ --semantic-neutral-dim: rgba(156, 163, 175, 0.15);
145
+ }
146
+ ```
147
+
148
+ ---
149
+
150
+ ## Shadows — Subtle (more subtle than other skills)
151
+
152
+ ```css
153
+ :root {
154
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
155
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
156
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
157
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
158
+ }
159
+ ```
160
+
161
+ **Note:** Shadows in Clean SaaS are nearly imperceptible. Separation comes primarily from borders and background differences, not from elevation shadows. Never use dramatic shadows.
162
+
163
+ ---
164
+
165
+ ## Border radius — Moderate
166
+
167
+ ```css
168
+ :root {
169
+ --radius-sm: 0.25rem; /* 4px — badges, chips, tags */
170
+ --radius-md: 0.375rem; /* 6px — inputs, buttons */
171
+ --radius-lg: 0.5rem; /* 8px — cards, panels */
172
+ --radius-xl: 0.75rem; /* 12px — modals, larger cards */
173
+ --radius-2xl: 1rem; /* 16px — hero sections (marketing only) */
174
+ --radius-full: 9999px; /* pills, avatars, toggle switches */
175
+ }
176
+ ```
177
+
178
+ ---
179
+
180
+ ## Spacing — 8px base grid
181
+
182
+ ```css
183
+ :root {
184
+ --space-1: 0.25rem; /* 4px */
185
+ --space-2: 0.5rem; /* 8px */
186
+ --space-3: 0.75rem; /* 12px */
187
+ --space-4: 1rem; /* 16px */
188
+ --space-5: 1.25rem; /* 20px */
189
+ --space-6: 1.5rem; /* 24px — standard content padding */
190
+ --space-8: 2rem; /* 32px */
191
+ --space-10: 2.5rem; /* 40px */
192
+ --space-12: 3rem; /* 48px */
193
+ --space-16: 4rem; /* 64px */
194
+ --space-20: 5rem; /* 80px */
195
+ }
196
+ ```
197
+
198
+ ---
199
+
200
+ ## Control heights — Strict
201
+
202
+ ```css
203
+ :root {
204
+ --control-xs: 1.75rem; /* 28px — compact table actions, icon buttons */
205
+ --control-sm: 2rem; /* 32px — small buttons, compact selects */
206
+ --control-md: 2.25rem; /* 36px — DEFAULT for all inputs and buttons */
207
+ --control-lg: 2.5rem; /* 40px — prominent inputs, search bars */
208
+ }
209
+ ```
210
+
211
+ **Note:** `control-md` is 36px (not 40px like warm-craft). Clean SaaS is more compact.
212
+
213
+ Every button and input **must** use a `--control-*` height. Never freehand a control height.
214
+
215
+ ---
216
+
217
+ ## Z-index scale
218
+
219
+ ```css
220
+ :root {
221
+ --z-base: 0;
222
+ --z-raised: 10;
223
+ --z-sticky: 100; /* sticky headers, filter bars */
224
+ --z-overlay: 200; /* overlays, backdrops */
225
+ --z-modal: 300; /* modals, dialogs */
226
+ --z-toast: 400; /* toast notifications */
227
+ --z-tooltip: 500; /* tooltips */
228
+ }
229
+ ```
230
+
231
+ ---
232
+
233
+ ## Token scope guardrails
234
+
235
+ | Token | Allowed on | Never on |
236
+ |-------|-----------|---------|
237
+ | `--bg-void` | page root, app shell | cards, modals |
238
+ | `--bg-surface` | cards, sidebar, modals | page background |
239
+ | `--bg-elevated` | hover states, nested panels | main surfaces |
240
+ | `--accent` | buttons, links, active states, borders | body text |
241
+ | `--accent-dim` | bg of highlighted rows, selected states | interactive elements |
242
+ | `--text-muted` | timestamps, metadata, placeholders | headings, primary body |
243
+ | `--font-mono` | code, IDs, technical metadata | navigation, headings, paragraphs |
244
+ | `--shadow-lg` | modals, popovers | cards (use shadow-sm or shadow-md) |
package/template/.aioson/skills/design/clean-saas-ui/references/motion.md ADDED
@@ -0,0 +1,235 @@
1
+ # Motion — Clean SaaS UI
2
+
3
+ ## Principle: functional, not decorative
4
+
5
+ Animation in Clean SaaS exists for **feedback and orientation**, not for impression.
6
+
7
+ Every animation must answer: does this help the user understand what happened, or where they are? If not, remove it.
8
+
9
+ - Tudo rápido: 150–250ms max para interações, 300ms para page transitions
10
+ - Easing: `ease-out` para entradas, `ease-in` para saídas
11
+ - **ZERO scroll animations em app pages** — só em marketing pages, com moderação
12
+ - Se a animação parece rápida ao desenvolvedor, está na velocidade certa para o usuário
13
+
14
+ ---
15
+
16
+ ## Timing tokens
17
+
18
+ ```css
19
+ :root {
20
+ --transition-fast: 100ms ease;
21
+ --transition-base: 150ms ease;
22
+ --transition-slow: 250ms ease;
23
+ }
24
+ ```
25
+
26
+ These are the only durations used in app pages. Never use values outside this range for UI interactions.
27
+
28
+ For page-level transitions (route change, modal open): max `300ms`.
29
+
30
+ ---
31
+
32
+ ## Entrances
33
+
34
+ ### Fade In
35
+ - `opacity: 0 → 1`
36
+ - Duration: `200ms ease-out`
37
+ - Use for: any element appearing without positional change — tooltips, inline state changes
38
+
39
+ ```css
40
+ @keyframes fadeIn {
41
+ from { opacity: 0; }
42
+ to { opacity: 1; }
43
+ }
44
+ ```
45
+
46
+ ### Fade Up
47
+ - `translateY(8px) → translateY(0)` + `opacity: 0 → 1`
48
+ - Duration: `250ms ease-out`
49
+ - Use for: cards appearing, dashboard sections loading, notifications
50
+ - **8px displacement only** — smaller than warm-craft (12px) and cognitive-core (10px). Clean SaaS moves less.
51
+
52
+ ```css
53
+ @keyframes fadeUp {
54
+ from { opacity: 0; transform: translateY(8px); }
55
+ to { opacity: 1; transform: translateY(0); }
56
+ }
57
+ ```
58
+
59
+ ### Scale In
60
+ - `scale(0.97) → scale(1)` + `opacity: 0 → 1`
61
+ - Duration: `200ms ease-out`
62
+ - Use for: modals, dropdowns, popovers, context menus
63
+ - **0.97 scale** — barely perceptible, just enough for spatial cue. Not 0.95 (too dramatic).
64
+
65
+ ```css
66
+ @keyframes scaleIn {
67
+ from { opacity: 0; transform: scale(0.97); }
68
+ to { opacity: 1; transform: scale(1); }
69
+ }
70
+ ```
71
+
72
+ ---
73
+
74
+ ## Micro-interactions
75
+
76
+ ### Buttons
77
+ - **Hover**: background color shift, `100ms ease`
78
+ - **Press**: `scale(0.99)`, `60ms ease-in` — nearly imperceptible, just tactile
79
+ - **Loading**: spinner replaces leading icon, text unchanged, cursor: `not-allowed` during load
80
+ - **Success**: brief `checkmark` icon flash, `300ms`, then returns to default state
81
+
82
+ ### Cards
83
+ - **Hover**: `box-shadow: var(--shadow-sm) → var(--shadow-md)`, `150ms ease`
84
+ - **NO translateY lift** — Clean SaaS cards do not "float up" on hover (unlike warm-craft). Cards stay grounded.
85
+
86
+ ### Inputs
87
+ - **Focus**: `border-color → var(--accent)`, ring appears `ring-2 ring-accent/20`, `100ms ease`
88
+ - **Error**: border goes `border-semantic-danger`, shakes if invalid on submit (see below)
89
+ - **Validation success**: brief green border flash before returning to default
90
+
91
+ ### Input shake (validation error)
92
+ ```css
93
+ @keyframes shake {
94
+ 0%, 100% { transform: translateX(0); }
95
+ 20% { transform: translateX(-4px); }
96
+ 40% { transform: translateX(4px); }
97
+ 60% { transform: translateX(-3px); }
98
+ 80% { transform: translateX(3px); }
99
+ }
100
+ /* Duration: 320ms — fast, firm, not cartoonish */
101
+ ```
102
+
103
+ ### Dropdowns
104
+ - Open: `scaleIn` + `fadeIn`, `150ms ease-out`, origin at trigger
105
+ - Close: `opacity: 1 → 0`, `100ms ease-in` — faster out than in
106
+
107
+ ### Toggle switch
108
+ - Thumb: `translateX` from off to on position, `150ms ease`
109
+ - Background: color transition `bg-border-strong → bg-accent`, `150ms ease`
110
+
111
+ ### Sidebar collapse (mobile)
112
+ - `translateX(-256px) → translateX(0)`, `250ms ease-out`
113
+ - Backdrop: `opacity: 0 → 0.4`, `200ms ease`
114
+
115
+ ---
116
+
117
+ ## Stagger
118
+
119
+ When multiple items appear together (card grid, list load, table rows):
120
+
121
+ - Delay per item: `40ms` — faster than warm-craft (60ms) to match efficiency feel
122
+ - Max staggered items: **4** — after 4, all remaining items appear simultaneously
123
+ - Base delay: `0ms` (first item appears immediately)
124
+
125
+ ```
126
+ Item 1: 0ms delay
127
+ Item 2: 40ms delay
128
+ Item 3: 80ms delay
129
+ Item 4: 120ms delay
130
+ Item 5+: 120ms delay (same as item 4 — no more stagger)
131
+ ```
132
+
133
+ ---
134
+
135
+ ## Page transitions
136
+
137
+ ### Route change
138
+ - Old page: `opacity: 1 → 0`, `150ms ease-in`
139
+ - New page: `opacity: 0 → 1`, `200ms ease-out`
140
+ - Optionally: `translateY(4px) → 0` on new page entry
141
+
142
+ ### Tab switch
143
+ - Content: `fadeIn` `200ms ease-out` — do NOT slide tabs horizontally (it's disorienting in data-dense apps)
144
+
145
+ ### Modal open
146
+ - Backdrop: `opacity: 0 → 0.4`, `200ms ease`
147
+ - Modal: `scaleIn` `200ms ease-out`
148
+
149
+ ### Modal close
150
+ - Modal: `scale(1) → scale(0.97)` + `opacity: 1 → 0`, `150ms ease-in`
151
+ - Backdrop: `opacity: 0.4 → 0`, `150ms ease`
152
+
153
+ ### Toast
154
+ - Enter: `translateX(calc(100% + 16px)) → translateX(0)`, `250ms ease-out` (slides in from right)
155
+ - Auto-dismiss: after 5s, `opacity: 1 → 0` over `300ms`
156
+ - Manual dismiss: `opacity: 1 → 0` + `scale(0.96)`, `150ms ease-in`
157
+
158
+ ---
159
+
160
+ ## Loading states
161
+
162
+ ### Skeleton pulse
163
+ ```css
164
+ @keyframes pulse {
165
+ 0%, 100% { opacity: 1; }
166
+ 50% { opacity: 0.5; }
167
+ }
168
+ /* Duration: 1.5s — slower than a button transition, rhythmic */
169
+ ```
170
+
171
+ ### Spinner
172
+ ```css
173
+ @keyframes spin {
174
+ from { transform: rotate(0deg); }
175
+ to { transform: rotate(360deg); }
176
+ }
177
+ /* Duration: 800ms linear infinite — smooth, not jerky */
178
+ ```
179
+
180
+ ### Progress bar (indeterminate)
181
+ ```css
182
+ @keyframes indeterminate {
183
+ 0% { left: -35%; right: 100%; }
184
+ 60% { left: 100%; right: -90%; }
185
+ 100% { left: 100%; right: -90%; }
186
+ }
187
+ /* Use only for operations with unknown duration (file upload, long request) */
188
+ ```
189
+
190
+ ---
191
+
192
+ ## Scroll animations (marketing pages only)
193
+
194
+ **Zero scroll animations on app pages.** Users in admin panels, dashboards, and forms should never have elements jumping in as they scroll — it breaks focus on data.
195
+
196
+ On **marketing pages** only:
197
+ - `fadeUp` on section entry: `250ms ease-out`, trigger at `20% from bottom`
198
+ - Stagger feature cards on scroll: `60ms` delay per card (slightly more generous than app stagger)
199
+ - Hero screenshot: `fadeIn` with slight `scale(1.02) → scale(1)` for depth, `400ms ease-out`
200
+
201
+ ---
202
+
203
+ ## Reduced motion
204
+
205
+ **Required.** All motion must respect `prefers-reduced-motion`:
206
+
207
+ ```css
208
+ @media (prefers-reduced-motion: reduce) {
209
+ *,
210
+ *::before,
211
+ *::after {
212
+ animation-duration: 0.01ms !important;
213
+ animation-iteration-count: 1 !important;
214
+ transition-duration: 0.01ms !important;
215
+ scroll-behavior: auto !important;
216
+ }
217
+ }
218
+ ```
219
+
220
+ When reduced motion is active:
221
+ - Transitions still happen but are near-instant
222
+ - State changes (hover, focus, active) remain functional — they just don't animate
223
+ - Spinners and skeletons still render correctly
224
+
225
+ ---
226
+
227
+ ## Motion anti-patterns
228
+
229
+ 1. `transition: all` — always specify exact properties (`background-color`, `box-shadow`, etc.)
230
+ 2. Duration > 300ms for any interactive element in the app
231
+ 3. Bounce or spring easing — not this skill; that is warm-craft
232
+ 4. Hover that moves the element in XY space (lift, slide) — cards stay grounded in Clean SaaS
233
+ 5. Staggering more than 4 items
234
+ 6. Scroll animations on any app page (list, dashboard, form, settings)
235
+ 7. Animation on focus — focus rings appear instantly, no animation
package/template/.aioson/skills/design/clean-saas-ui/references/patterns.md ADDED
@@ -0,0 +1,215 @@
1
+ # Patterns — Clean SaaS UI
2
+
3
+ Page-level composition patterns. Always build from these patterns — never invent a new shell without a domain reason.
4
+
5
+ ---
6
+
7
+ ## App Shell
8
+
9
+ ```
10
+ ┌──────────────────────────────────────────────────────────┐
11
+ │ [Logo] ProductName [Search] [?] [Avatar ▾] │ ← 56px top bar (optional)
12
+ ├────────────────┬─────────────────────────────────────────┤
13
+ │ │ Page Header (title + breadcrumbs + │
14
+ │ SIDEBAR │ actions) │
15
+ │ 256px ├─────────────────────────────────────────┤
16
+ │ bg-surface │ Filter Bar / Tab Bar (when needed) │
17
+ │ border-right ├─────────────────────────────────────────┤
18
+ │ │ CONTENT AREA │
19
+ │ Nav groups │ padding: 24px │
20
+ │ Active state │ scroll: vertical │
21
+ │ │ │
22
+ │ [User] │ │
23
+ └────────────────┴─────────────────────────────────────────┘
24
+ ```
25
+
26
+ **Rules:**
27
+ - Sidebar: `256px` fixed, `bg-surface`, `border-r border-default`, scrollable independently
28
+ - Top bar: optional — some apps omit it if sidebar has logo + user footer
29
+ - Content area: `flex-1 overflow-y-auto`, `padding: 24px`
30
+ - Page header: inside content area, not full-width — stays within the scrollable zone
31
+ - Sidebar collapses to hamburger menu below `1024px`
32
+
33
+ ---
34
+
35
+ ## 1. List Page
36
+
37
+ **Use for:** contacts, accounts, tickets, orders, products, users
38
+
39
+ ```
40
+ ┌─────────────────────────────────────────────────────────┐
41
+ │ Contacts [Export] [+ New] │ ← page header
42
+ ├─────────────────────────────────────────────────────────┤
43
+ │ [Search...] [Status ▾] [Owner ▾] ×2 filters [Clear] │ ← filter bar
44
+ ├─────────────────────────────────────────────────────────┤
45
+ │ ☐ Name ↕ Company ↕ Status Created (…) │ ← sticky table header
46
+ │ ☐ J. Smith Acme Corp ● Active Mar 12 │
47
+ │ ☐ A. Jones Beta Ltd ○ Inactive Mar 10 │
48
+ │ ☐ R. Miller Gamma Inc ⚠ Warning Mar 8 │
49
+ ├─────────────────────────────────────────────────────────┤
50
+ │ Showing 1–25 of 143 [← Prev] 1 2 3 [Next →] │ ← pagination
51
+ └─────────────────────────────────────────────────────────┘
52
+ ```
53
+
54
+ **Composition rules:**
55
+ - Page header always: title + subtitle + right actions
56
+ - Filter bar always below header, sticky below `--z-sticky`
57
+ - Table fills remaining space, sticky header
58
+ - Pagination anchored to bottom of table, not page
59
+ - Bulk action bar replaces filter bar when rows selected (slides in)
60
+
61
+ ---
62
+
63
+ ## 2. Detail Page
64
+
65
+ **Use for:** contact detail, account detail, ticket detail, order detail
66
+
67
+ ```
68
+ ┌─────────────────────────────────────────────────────────┐
69
+ │ Contacts > Acme Corp │ ← breadcrumb
70
+ │ Acme Corp [Archive] [Edit] [+ Task] │ ← title + status badge + actions
71
+ ├─────────────────────────────────────────────────────────┤
72
+ │ Overview │ Contacts │ Activity │ Documents │ Settings │ ← tabs
73
+ ├───────────────────────────────┬─────────────────────────┤
74
+ │ MAIN CONTENT │ SIDEBAR DETAIL RAIL │
75
+ │ (primary info, main data) │ Key metrics / info │
76
+ │ │ Related items │
77
+ │ │ Quick actions │
78
+ └───────────────────────────────┴─────────────────────────┘
79
+ ```
80
+
81
+ **Composition rules:**
82
+ - Breadcrumb above title — always
83
+ - Status badge inline with title
84
+ - Tabs separate content areas (Overview, Activity, etc.)
85
+ - Two-column layout: main content (2/3) + detail rail (1/3)
86
+ - Detail rail: `bg-surface border-l border-default px-4 py-5`
87
+
88
+ ---
89
+
90
+ ## 3. Form Page
91
+
92
+ **Use for:** create contact, new deal, edit settings section, configure integration
93
+
94
+ ```
95
+ ┌─────────────────────────────────────────────────────────┐
96
+ │ Contacts > New Contact │ ← breadcrumb
97
+ │ New Contact │ ← title
98
+ ├──────────────────────────────────────────────────────────┤
99
+ │ ┌─────────────────────────────────────────────────────┐ │
100
+ │ │ Basic Information │ │ ← section card
101
+ │ │ Fill in the contact's core details. │ │
102
+ │ │ ─────────────────────────────────────────────────── │ │
103
+ │ │ First name * [ __________________ ] │ │
104
+ │ │ Last name * [ __________________ ] │ │
105
+ │ │ Email [ __________________ ] │ │
106
+ │ └─────────────────────────────────────────────────────┘ │
107
+ │ ┌─────────────────────────────────────────────────────┐ │
108
+ │ │ Company Details │ │ ← section card 2
109
+ │ └─────────────────────────────────────────────────────┘ │
110
+ ├──────────────────────────────────────────────────────────┤
111
+ │ [Cancel] [Save Contact] │ ← sticky save bar
112
+ └─────────────────────────────────────────────────────────┘
113
+ ```
114
+
115
+ **Composition rules:**
116
+ - Max content width: `640px` (centered within content area or left-aligned)
117
+ - Section cards: `bg-surface border border-default rounded-lg`
118
+ - Section header: `px-5 py-4 border-b border-default` — title `text-base font-semibold` + description `text-sm text-secondary`
119
+ - Form fields inside: `px-5 py-5 space-y-4`
120
+ - Sticky save bar: `fixed bottom-0 left-[256px] right-0 bg-surface border-t border-default px-6 py-3 flex justify-between`
121
+ - Auto-save indicator: `text-xs text-secondary` in save bar left
122
+
123
+ ---
124
+
125
+ ## 4. Dashboard Page
126
+
127
+ **Use for:** main dashboard, analytics, reporting overview, exec summary
128
+
129
+ ```
130
+ ┌─────────────────────────────────────────────────────────┐
131
+ │ Dashboard [This month ▾] [Export] │ ← page header + date range
132
+ ├─────────────────────────────────────────────────────────┤
133
+ │ [MRR: $48K ↑] [ARR: $580K] [Churn: 1.2%] [NPS: 42] │ ← stat cards row
134
+ ├─────────────────────────────────────────────────────────┤
135
+ │ [Revenue Chart (2/3)] │ [Top Sources (1/3)] │ ← charts section
136
+ ├─────────────────────────────────────────────────────────┤
137
+ │ Recent Accounts [View all →] │ ← section header
138
+ │ [table snippet — 5 rows max] │
139
+ └─────────────────────────────────────────────────────────┘
140
+ ```
141
+
142
+ **Composition rules:**
143
+ - Date range selector: prominent in page header, right-aligned
144
+ - Stat cards: 4-column grid, `gap-4`
145
+ - Charts: 2/3 + 1/3 or 1/2 + 1/2 — never all equal width
146
+ - Table snippets: 5 rows max with "View all" link — do not paginate on dashboard
147
+ - Section headers: `flex justify-between items-center mb-3` — title + link
148
+
149
+ ---
150
+
151
+ ## 5. Settings Page
152
+
153
+ **Use for:** account settings, team settings, notifications, billing, integrations
154
+
155
+ ```
156
+ ┌──────────────────────┬──────────────────────────────────┐
157
+ │ SETTINGS NAV │ Profile │
158
+ │ │ Update your name and email. │
159
+ │ Profile │ ─────────────────────────────── │
160
+ │ Security ▶ │ [form content] │
161
+ │ Notifications │ │
162
+ │ Billing │ API Keys │
163
+ │ Integrations │ ─────────────────────────────── │
164
+ │ Team │ [form content] │
165
+ └──────────────────────┴──────────────────────────────────┘
166
+ ```
167
+
168
+ **Composition rules:**
169
+ - Settings nav: `200px` left sub-nav, `text-sm`, active item with accent color + weight-medium
170
+ - Content area: `flex-1 max-w-2xl`
171
+ - Each settings section: card with header + content
172
+ - Dangerous actions (delete account): separate section at bottom with danger styling
173
+
174
+ ---
175
+
176
+ ## 6. Empty / Onboarding Page
177
+
178
+ **Use for:** first-run, empty state for a feature, setup completion
179
+
180
+ ```
181
+ ┌─────────────────────────────────────────────────────────┐
182
+ │ [Step 1/4 progress] │
183
+ │ │
184
+ │ [geometric illustration] │
185
+ │ │
186
+ │ Connect your CRM │
187
+ │ Import your contacts automatically │
188
+ │ from Salesforce, HubSpot, or CSV. │
189
+ │ │
190
+ │ [Skip] [Connect CRM →] │
191
+ └─────────────────────────────────────────────────────────┘
192
+ ```
193
+
194
+ **Composition rules:**
195
+ - Centered, `max-w-sm` to `max-w-md`
196
+ - Progress: `text-xs text-secondary` or step dots above illustration
197
+ - Illustration: clean geometric SVG, 120–160px
198
+ - Title: `text-xl font-semibold`
199
+ - Description: `text-sm text-secondary text-center max-w-xs`
200
+ - Actions: ghost (skip) + primary (main action), `gap-3 mt-8`
201
+
202
+ ---
203
+
204
+ ## Responsive rules
205
+
206
+ | Breakpoint | Behavior |
207
+ |-----------|---------|
208
+ | `< 640px` | Single column, cards stack |
209
+ | `< 768px` | Tables scroll horizontally (NEVER stack into cards) |
210
+ | `< 1024px` | Sidebar collapses to hamburger; settings nav becomes tab bar |
211
+ | `>= 1024px` | Full app shell with fixed sidebar |
212
+
213
+ **Critical:** Tables **never** become card lists on mobile. Tabular data stays in a table, always with horizontal scroll. This is non-negotiable in this design system.
214
+
215
+ **Control heights** are maintained at all breakpoints — touch targets stay at minimum 36px.