codymaster 4.1.3 → 4.3.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 (658) hide show
  1. package/CHANGELOG.md +22 -2
  2. package/README.md +54 -84
  3. package/dist/index.js +589 -510
  4. package/dist/ui/box.js +49 -0
  5. package/install.sh +2 -2
  6. package/package.json +3 -9
  7. package/skills/AGENTS.md +61 -0
  8. package/skills/CLAUDE.md +158 -0
  9. package/skills/boxme-git-config/SKILL.md +56 -0
  10. package/skills/boxme-local-dev/SKILL.md +66 -0
  11. package/skills/build.sh +30 -0
  12. package/skills/cf +314 -0
  13. package/skills/cf 2 +313 -0
  14. package/skills/cm-ads-tracker/SKILL.md +364 -69
  15. package/skills/cm-auto-publisher/SKILL.md +81 -0
  16. package/skills/cm-booking-calendar/SKILL.md +521 -0
  17. package/skills/cm-booking-calendar/references/industry-patterns.md +527 -0
  18. package/skills/cm-booking-calendar/templates/booking-form.css +626 -0
  19. package/skills/cm-booking-calendar/templates/booking-form.html +477 -0
  20. package/skills/cm-booking-calendar/templates/calendar-engine.js +419 -0
  21. package/skills/cm-booking-calendar/templates/calendar-export.js +395 -0
  22. package/skills/cm-booking-calendar/templates/reminder-config.js +629 -0
  23. package/skills/cm-brainstorm-idea/SKILL.md +15 -24
  24. package/skills/cm-clean-code/SKILL.md +300 -0
  25. package/skills/cm-code-review/SKILL.md +0 -27
  26. package/skills/cm-codeintell/SKILL.md +598 -0
  27. package/skills/cm-content-factory/.content-factory-state.json +132 -0
  28. package/skills/cm-content-factory/.git 2/logs/refs/heads/main +1 -0
  29. package/skills/cm-content-factory/.git 2/logs/refs/remotes/origin/main +1 -0
  30. package/skills/cm-content-factory/.git 2/objects/02/fb0956734b5f8ba3f918b7defd04a89cfe0076 +0 -0
  31. package/skills/cm-content-factory/.git 2/objects/08/1e129d75dc6feac6c02037272e6bd1a04e3324 +0 -0
  32. package/skills/cm-content-factory/.git 2/objects/0c/5393416f3c5e01c9a655a802bff0dd52f76f0a +0 -0
  33. package/skills/cm-content-factory/.git 2/objects/10/0b9be46978a946a77188f68be725098a122001 +0 -0
  34. package/skills/cm-content-factory/.git 2/objects/10/cf041167fc9843610eb3d90259ef3396315fdc +0 -0
  35. package/skills/cm-content-factory/.git 2/objects/12/5e19538dd6e1338ffe74f6c4c165b00435bf48 +0 -0
  36. package/skills/cm-content-factory/.git 2/objects/16/a9b9d0088d5c1347628b45a2620b479d8ad57c +0 -0
  37. package/skills/cm-content-factory/.git 2/objects/17/8c2a9ef93c33ae4eec9d58e82321f9229843a1 +0 -0
  38. package/skills/cm-content-factory/.git 2/objects/25/397ae41d09104d763bdcac2695209d85cdea89 +0 -0
  39. package/skills/cm-content-factory/.git 2/objects/2f/a836b7947f2d458e1f639788bf4bb0983a3305 +0 -0
  40. package/skills/cm-content-factory/.git 2/objects/3a/baaaf0a1c0909c0828335791557125fba911e0 +0 -0
  41. package/skills/cm-content-factory/.git 2/objects/42/2924221b81f5ce3c4e4daac9a64a24f9b01f9a +0 -0
  42. package/skills/cm-content-factory/.git 2/objects/42/ec0ce707447dc11446a34c9995fb8533801731 +0 -0
  43. package/skills/cm-content-factory/.git 2/objects/46/e43ce92866d56ce74b1d750db307cfe6154a15 +0 -0
  44. package/skills/cm-content-factory/.git 2/objects/48/5e41b633c63f55b8277bcc59f44f67681f671a +0 -0
  45. package/skills/cm-content-factory/.git 2/objects/49/49c596a3a89fa240642acd95dd3258e261eb09 +0 -0
  46. package/skills/cm-content-factory/.git 2/objects/50/9d42d8412ef8eaf7f7e138476bac2e4d10ce60 +0 -0
  47. package/skills/cm-content-factory/.git 2/objects/55/0c8c389d981b463ef849aeb792d8be3ccb6ec8 +0 -0
  48. package/skills/cm-content-factory/.git 2/objects/5d/82d3b18410cdda3ace3677436f0cb599dbe2d2 +0 -0
  49. package/skills/cm-content-factory/.git 2/objects/60/0617c58e871a38b33bf29e282d132bb3c381ad +0 -0
  50. package/skills/cm-content-factory/.git 2/objects/6a/8369a99c687b7245c92ffaf0e0f0dab9014504 +0 -0
  51. package/skills/cm-content-factory/.git 2/objects/79/bea435d40ab531c1aaf6be0432c6a5b7aaed21 +0 -0
  52. package/skills/cm-content-factory/.git 2/objects/7e/5ebd79251c2f14e4aceb86c74b6b6daae6b500 +0 -0
  53. package/skills/cm-content-factory/.git 2/objects/81/98a822a60178d6d5023ddb3e222cddf048742e +0 -0
  54. package/skills/cm-content-factory/.git 2/objects/86/0a0e1943dfe53411d2e499a1f16f46a96ef758 +0 -0
  55. package/skills/cm-content-factory/.git 2/objects/86/971fb55fdc081fdbae52376f0f13e57a4e9b04 +0 -0
  56. package/skills/cm-content-factory/.git 2/objects/88/b89dd609a0a03f8d4fe8bfde20d5b8fc1d326d +0 -0
  57. package/skills/cm-content-factory/.git 2/objects/90/8737edb6b7809e32cc01590b4e08ba42a9d40d +0 -0
  58. package/skills/cm-content-factory/.git 2/objects/93/d5a8a9a7d4fb7f11491cb596a6880528725118 +0 -0
  59. package/skills/cm-content-factory/.git 2/objects/98/46a2ab81d0c3b3eb00ef88fc56989aa7e9f316 +0 -0
  60. package/skills/cm-content-factory/.git 2/objects/9b/d8dd1e49cf274eaf9c555f3ab39dce7af5715e +0 -0
  61. package/skills/cm-content-factory/.git 2/objects/a1/13329fb0cec96ae78b222d33a24c3b5bc7fa1f +0 -0
  62. package/skills/cm-content-factory/.git 2/objects/a9/e6effe626e8a3aea3a8fc3364b492191c6e7d0 +0 -0
  63. package/skills/cm-content-factory/.git 2/objects/ad/6de7e48d9782cca9353d1ff0aa1aab7fe1df85 +0 -0
  64. package/skills/cm-content-factory/.git 2/objects/af/54ae316f771ff692e299ffcd8bf2f06b413b59 +0 -0
  65. package/skills/cm-content-factory/.git 2/objects/b0/4cb8b0b00dad633e731c1472161419e738d674 +0 -0
  66. package/skills/cm-content-factory/.git 2/objects/b3/094abb0b9ed46419b269e4a4e36a459690e3b0 +0 -0
  67. package/skills/cm-content-factory/.git 2/objects/b9/435c5d4baac2cfc5c83009ddd27b46b60db5f1 +0 -0
  68. package/skills/cm-content-factory/.git 2/objects/ba/5da17dbaec5ec2dcfdfd126aead518d1171d5c +0 -0
  69. package/skills/cm-content-factory/.git 2/objects/c0/bf58703aa258ba5dd63083bebaec8f223d844c +0 -0
  70. package/skills/cm-content-factory/.git 2/objects/c4/701a34edf1fc1bad58ccc57bd03f9426acb59a +0 -0
  71. package/skills/cm-content-factory/.git 2/objects/c7/5ccce9a4e5cc74d9b3174550cf6d993ca43638 +0 -0
  72. package/skills/cm-content-factory/.git 2/objects/c7/710d59b5a35b0f1f0a0399386643a0bd94c929 +0 -0
  73. package/skills/cm-content-factory/.git 2/objects/d1/fe58237112e953e5fec52da22cf38e08be3df9 +5 -0
  74. package/skills/cm-content-factory/.git 2/objects/d2/2bbe9fd2f74c95bc5583e803f5e435f1e2cd86 +0 -0
  75. package/skills/cm-content-factory/.git 2/objects/d7/e72852ea2bff74581dbf247d400120086229f4 +0 -0
  76. package/skills/cm-content-factory/.git 2/objects/d8/d4c3b5553e4fd72807e1d4b49ef07d9ef3ac35 +0 -0
  77. package/skills/cm-content-factory/.git 2/objects/dc/75050c2876f6a02ae2a53a3c886f395b622977 +0 -0
  78. package/skills/cm-content-factory/.git 2/objects/ee/e8546f95acec500187c08a28a8b9ee02db0dec +0 -0
  79. package/skills/cm-content-factory/.git 2/objects/ef/263c059208b416c2146434f10cb2b9fabcba16 +0 -0
  80. package/skills/cm-content-factory/.git 2/objects/f3/ae597e84d9a59b88acd21c99bde2eaf686d785 +0 -0
  81. package/skills/cm-content-factory/.git 2/objects/f3/f6f5673c821d3d8e76fa267a9e882e7a5387ea +0 -0
  82. package/skills/cm-content-factory/.git 2/objects/f9/6e6d0ad02624dd11d5848594d056caef7a5e8b +0 -0
  83. package/skills/cm-content-factory/.git 2/objects/ff/278988fc1edf0db3abcf18de795f4cc0b4f3e1 +0 -0
  84. package/skills/cm-content-factory/.git 2/refs/heads/main +1 -0
  85. package/skills/cm-content-factory/.git 2/refs/remotes/origin/main +1 -0
  86. package/skills/cm-content-factory/.pytest_cache 2/v/cache/nodeids +76 -0
  87. package/skills/cm-content-factory/.pytest_cache 2/v/cache/stepwise +1 -0
  88. package/skills/cm-content-factory/AGENTS.md +61 -0
  89. package/skills/cm-content-factory/CLAUDE.md +63 -0
  90. package/skills/cm-content-factory/CURSOR.md +43 -0
  91. package/skills/cm-content-factory/Content Factory.zip +0 -0
  92. package/skills/cm-content-factory/cf +313 -0
  93. package/skills/cm-content-factory/config.schema.json +397 -0
  94. package/skills/cm-content-factory/dashboard/app.js +556 -0
  95. package/skills/cm-content-factory/dashboard/index.html +397 -0
  96. package/skills/cm-content-factory/dashboard/style.css +1211 -0
  97. package/skills/cm-content-factory/examples/01-real-estate.config.json +146 -0
  98. package/skills/cm-content-factory/examples/02-personal-finance.config.json +146 -0
  99. package/skills/cm-content-factory/examples/03-health-wellness.config.json +147 -0
  100. package/skills/cm-content-factory/examples/04-saas-software.config.json +147 -0
  101. package/skills/cm-content-factory/examples/05-legal-services.config.json +147 -0
  102. package/skills/cm-content-factory/examples/06-insurance.config.json +146 -0
  103. package/skills/cm-content-factory/examples/07-ecommerce-dropship.config.json +146 -0
  104. package/skills/cm-content-factory/examples/08-online-education.config.json +147 -0
  105. package/skills/cm-content-factory/examples/09-crypto-defi.config.json +147 -0
  106. package/skills/cm-content-factory/examples/10-beauty-skincare.config.json +147 -0
  107. package/skills/cm-content-factory/examples/11-home-services.config.json +146 -0
  108. package/skills/cm-content-factory/examples/12-dental-clinic.config.json +147 -0
  109. package/skills/cm-content-factory/examples/13-pet-care.config.json +147 -0
  110. package/skills/cm-content-factory/examples/14-travel-hospitality.config.json +147 -0
  111. package/skills/cm-content-factory/examples/15-ai-automation.config.json +147 -0
  112. package/skills/cm-content-factory/examples/16-wedding-events.config.json +147 -0
  113. package/skills/cm-content-factory/examples/17-fitness-coaching.config.json +148 -0
  114. package/skills/cm-content-factory/examples/18-cybersecurity.config.json +147 -0
  115. package/skills/cm-content-factory/examples/19-food-restaurant.config.json +148 -0
  116. package/skills/cm-content-factory/examples/20-solar-energy.config.json +147 -0
  117. package/skills/cm-content-factory/examples/fitness-blog.config.json +116 -0
  118. package/skills/cm-content-factory/examples/tech-blog.config.json +107 -0
  119. package/skills/cm-content-factory/extensions/EXTENSION_GUIDE.md +72 -0
  120. package/skills/cm-content-factory/extensions/hooks.py +126 -0
  121. package/skills/cm-content-factory/extensions/openclaw_adapter.py +132 -0
  122. package/skills/cm-content-factory/landing/index.html +680 -0
  123. package/skills/cm-content-factory/landing/script.js +101 -0
  124. package/skills/cm-content-factory/landing/style.css +1216 -0
  125. package/skills/cm-content-factory/landing/translations.js +508 -0
  126. package/skills/cm-content-factory/logs/events.jsonl +11 -0
  127. package/skills/cm-content-factory/profiles/_template.profile.json +231 -0
  128. package/skills/cm-content-factory/profiles/finance.profile.json +278 -0
  129. package/skills/cm-content-factory/profiles/legal.profile.json +263 -0
  130. package/skills/cm-content-factory/profiles/medical-research.profile.json +321 -0
  131. package/skills/cm-content-factory/profiles/technology.profile.json +275 -0
  132. package/skills/cm-content-factory/scripts/agent_dispatcher.py +266 -0
  133. package/skills/cm-content-factory/scripts/audit.py +106 -0
  134. package/skills/cm-content-factory/scripts/dashboard_server.py +225 -0
  135. package/skills/cm-content-factory/scripts/deploy.py +146 -0
  136. package/skills/cm-content-factory/scripts/extract.py +132 -0
  137. package/skills/cm-content-factory/scripts/landing_generator.py +459 -0
  138. package/skills/cm-content-factory/scripts/memory.py +521 -0
  139. package/skills/cm-content-factory/scripts/monetize.py +239 -0
  140. package/skills/cm-content-factory/scripts/pipeline.py +357 -0
  141. package/skills/cm-content-factory/scripts/plan.py +163 -0
  142. package/skills/cm-content-factory/scripts/publish.py +145 -0
  143. package/skills/cm-content-factory/scripts/research.py +337 -0
  144. package/skills/cm-content-factory/scripts/scaffold.py +464 -0
  145. package/skills/cm-content-factory/scripts/scoreboard.py +336 -0
  146. package/skills/cm-content-factory/scripts/seo.py +90 -0
  147. package/skills/cm-content-factory/scripts/state_manager.py +320 -0
  148. package/skills/cm-content-factory/scripts/token_manager.py +268 -0
  149. package/skills/cm-content-factory/scripts/validate.py +221 -0
  150. package/skills/cm-content-factory/scripts/wizard.py +329 -0
  151. package/skills/cm-content-factory/scripts/write.py +93 -0
  152. package/skills/cm-content-factory/sites/docs-site/src/assets/houston.webp +0 -0
  153. package/skills/cm-content-factory/sites/docs-site/src/content/docs/architecture.md +90 -0
  154. package/skills/cm-content-factory/sites/docs-site/src/content/docs/data-flow.md +54 -0
  155. package/skills/cm-content-factory/sites/docs-site/src/content/docs/deployment.md +38 -0
  156. package/skills/cm-content-factory/sites/docs-site/src/content/docs/flows/index.md +65 -0
  157. package/skills/cm-content-factory/sites/docs-site/src/content/docs/flows/lc-content-lifecycle.md +48 -0
  158. package/skills/cm-content-factory/sites/docs-site/src/content/docs/flows/seq-write-mode.md +39 -0
  159. package/skills/cm-content-factory/sites/docs-site/src/content/docs/flows/uj-first-batch.md +42 -0
  160. package/skills/cm-content-factory/sites/docs-site/src/content/docs/flows/wf-content-pipeline.md +51 -0
  161. package/skills/cm-content-factory/sites/docs-site/src/content/docs/flows/wf-learning-cycle.md +52 -0
  162. package/skills/cm-content-factory/sites/docs-site/src/content/docs/getting-started/configuration.md +86 -0
  163. package/skills/cm-content-factory/sites/docs-site/src/content/docs/getting-started/installation.md +80 -0
  164. package/skills/cm-content-factory/sites/docs-site/src/content/docs/getting-started/intro.md +58 -0
  165. package/skills/cm-content-factory/sites/docs-site/src/content/docs/index.md +102 -0
  166. package/skills/cm-content-factory/sites/docs-site/src/content/docs/jtbd/index.md +45 -0
  167. package/skills/cm-content-factory/sites/docs-site/src/content/docs/jtbd/optimize-seo.md +29 -0
  168. package/skills/cm-content-factory/sites/docs-site/src/content/docs/jtbd/scale-content-production.md +55 -0
  169. package/skills/cm-content-factory/sites/docs-site/src/content/docs/jtbd/standardize-quality.md +29 -0
  170. package/skills/cm-content-factory/sites/docs-site/src/content/docs/personas/buyer-cmo-huong.md +41 -0
  171. package/skills/cm-content-factory/sites/docs-site/src/content/docs/personas/buyer-content-lead-khoa.md +40 -0
  172. package/skills/cm-content-factory/sites/docs-site/src/content/docs/personas/index.md +56 -0
  173. package/skills/cm-content-factory/sites/docs-site/src/content/docs/personas/user-content-manager-lan.md +46 -0
  174. package/skills/cm-content-factory/sites/docs-site/src/content/docs/personas/user-seo-minh.md +45 -0
  175. package/skills/cm-content-factory/sites/docs-site/src/content/docs/personas/user-writer-tu.md +45 -0
  176. package/skills/cm-content-factory/sites/docs-site/src/content/docs/sop/content-pipeline.md +108 -0
  177. package/skills/cm-content-factory/sites/docs-site/src/content/docs/sop/index.md +22 -0
  178. package/skills/cm-content-factory/sites/docs-site/src/content/docs/sop/memory-system.md +52 -0
  179. package/skills/cm-content-factory/sites/docs-site/src/content/docs/sop/seo-optimization.md +58 -0
  180. package/skills/cm-content-factory/sites/docs-site/src/content/docs/sop/troubleshooting-guide.md +92 -0
  181. package/skills/cm-content-factory/sites/docs-site/src/styles/custom.css +575 -0
  182. package/skills/cm-content-factory/tests/conftest.py +66 -0
  183. package/skills/cm-content-factory/tests/test_agent_dispatcher.py +125 -0
  184. package/skills/cm-content-factory/tests/test_memory.py +128 -0
  185. package/skills/cm-content-factory/tests/test_pipeline.py +107 -0
  186. package/skills/cm-content-factory/tests/test_research.py +56 -0
  187. package/skills/cm-content-factory/tests/test_state_manager.py +131 -0
  188. package/skills/cm-content-factory/tests/test_token_manager.py +110 -0
  189. package/skills/cm-content-factory/tests/test_wizard.py +121 -0
  190. package/skills/cm-continuity/SKILL.md +7 -0
  191. package/skills/cm-cro-methodology/SKILL.md +290 -0
  192. package/skills/cm-dashboard/SKILL.md +7 -525
  193. package/skills/cm-debugging/SKILL.md +7 -116
  194. package/skills/cm-deep-search/SKILL.md +5 -1
  195. package/skills/cm-dockit/README.md +6 -15
  196. package/skills/cm-dockit/SKILL.md +20 -37
  197. package/skills/cm-execution/SKILL.md +6 -1
  198. package/skills/cm-frappe-agent/SKILL.md +134 -0
  199. package/skills/cm-frappe-agent/agents/doctype-architect.md +596 -0
  200. package/skills/cm-frappe-agent/agents/erpnext-customizer.md +643 -0
  201. package/skills/cm-frappe-agent/agents/frappe-backend.md +814 -0
  202. package/skills/cm-frappe-agent/agents/frappe-custom-frontend.md +557 -0
  203. package/skills/cm-frappe-agent/agents/frappe-debugger.md +625 -0
  204. package/skills/cm-frappe-agent/agents/frappe-fixer.md +275 -0
  205. package/skills/cm-frappe-agent/agents/frappe-frontend.md +660 -0
  206. package/skills/cm-frappe-agent/agents/frappe-installer.md +158 -0
  207. package/skills/cm-frappe-agent/agents/frappe-performance.md +307 -0
  208. package/skills/cm-frappe-agent/agents/frappe-planner.md +419 -0
  209. package/skills/cm-frappe-agent/agents/frappe-remote-ops.md +153 -0
  210. package/skills/cm-frappe-agent/agents/github-workflow.md +286 -0
  211. package/skills/cm-frappe-agent/commands/frappe-app.md +351 -0
  212. package/skills/cm-frappe-agent/commands/frappe-backend.md +162 -0
  213. package/skills/cm-frappe-agent/commands/frappe-bench.md +254 -0
  214. package/skills/cm-frappe-agent/commands/frappe-debug.md +263 -0
  215. package/skills/cm-frappe-agent/commands/frappe-doctype-create.md +272 -0
  216. package/skills/cm-frappe-agent/commands/frappe-doctype-field.md +310 -0
  217. package/skills/cm-frappe-agent/commands/frappe-erpnext.md +210 -0
  218. package/skills/cm-frappe-agent/commands/frappe-fix.md +59 -0
  219. package/skills/cm-frappe-agent/commands/frappe-frontend.md +210 -0
  220. package/skills/cm-frappe-agent/commands/frappe-fullstack.md +243 -0
  221. package/skills/cm-frappe-agent/commands/frappe-github.md +57 -0
  222. package/skills/cm-frappe-agent/commands/frappe-install.md +52 -0
  223. package/skills/cm-frappe-agent/commands/frappe-plan.md +442 -0
  224. package/skills/cm-frappe-agent/commands/frappe-remote.md +58 -0
  225. package/skills/cm-frappe-agent/commands/frappe-test.md +356 -0
  226. package/skills/cm-frappe-agent/docs/README.md +51 -0
  227. package/skills/cm-frappe-agent/docs/agents-catalog.md +113 -0
  228. package/skills/cm-frappe-agent/docs/architecture.md +149 -0
  229. package/skills/cm-frappe-agent/docs/commands-catalog.md +82 -0
  230. package/skills/cm-frappe-agent/docs/resources-catalog.md +66 -0
  231. package/skills/cm-frappe-agent/docs/sitemap-urls.txt +52 -0
  232. package/skills/cm-frappe-agent/docs/sitemap.md +81 -0
  233. package/skills/cm-frappe-agent/docs/sop/user-guide.md +178 -0
  234. package/skills/cm-frappe-agent/docs/sop/vibe-coding-guide.md +122 -0
  235. package/skills/cm-frappe-agent/resources/7-layer-architecture.md +985 -0
  236. package/skills/cm-frappe-agent/resources/bench_commands.md +73 -0
  237. package/skills/cm-frappe-agent/resources/code-patterns-guide.md +948 -0
  238. package/skills/cm-frappe-agent/resources/common_pitfalls.md +266 -0
  239. package/skills/cm-frappe-agent/resources/doctype-registry.md +158 -0
  240. package/skills/cm-frappe-agent/resources/installation-guide.md +289 -0
  241. package/skills/cm-frappe-agent/resources/rest-api-patterns.md +182 -0
  242. package/skills/cm-frappe-agent/resources/scaffold_checklist.md +82 -0
  243. package/skills/cm-frappe-agent/resources/upgrade_patterns.md +113 -0
  244. package/skills/cm-frappe-agent/resources/web-form-patterns.md +252 -0
  245. package/skills/cm-frappe-agent/skills/bench-commands/SKILL.md +621 -0
  246. package/skills/cm-frappe-agent/skills/client-scripts/SKILL.md +642 -0
  247. package/skills/cm-frappe-agent/skills/doctype-patterns/SKILL.md +576 -0
  248. package/skills/cm-frappe-agent/skills/frappe-api/SKILL.md +740 -0
  249. package/skills/cm-frappe-agent/skills/remote-operations/SKILL.md +47 -0
  250. package/skills/cm-frappe-agent/skills/server-scripts/SKILL.md +608 -0
  251. package/skills/cm-frappe-agent/skills/web-forms/SKILL.md +46 -0
  252. package/skills/cm-git-worktrees/SKILL.md +0 -7
  253. package/skills/cm-google-form/SKILL.md +266 -0
  254. package/skills/cm-google-form/templates/apps-script.js +55 -0
  255. package/skills/cm-google-form/templates/form-markup.html +110 -0
  256. package/skills/cm-google-form/templates/form-submit.js +201 -0
  257. package/skills/cm-google-form/templates/toast.css +152 -0
  258. package/skills/cm-growth-hacking/SKILL.md +293 -0
  259. package/skills/cm-growth-hacking/bottom-sheet-engine.md +261 -0
  260. package/skills/cm-growth-hacking/calendar-integration.md +264 -0
  261. package/skills/cm-growth-hacking/references/engagement-patterns.md +346 -0
  262. package/skills/cm-growth-hacking/templates/bottom-sheet.css +528 -0
  263. package/skills/cm-growth-hacking/templates/bottom-sheet.js +269 -0
  264. package/skills/cm-growth-hacking/templates/calendar-cta.js +213 -0
  265. package/skills/cm-growth-hacking/templates/tracking-events.js +211 -0
  266. package/skills/cm-growth-hacking/templates/trigger-manager.js +254 -0
  267. package/skills/cm-growth-hacking/tracking-events.md +246 -0
  268. package/skills/cm-growth-hacking/trigger-system.md +342 -0
  269. package/skills/cm-how-it-work/SKILL.md +20 -4
  270. package/skills/cm-identity-guard/SKILL.md +0 -11
  271. package/skills/cm-jtbd/SKILL.md +1 -1
  272. package/skills/cm-notebooklm/SKILL.md +172 -0
  273. package/skills/cm-notebooklm/references/command_reference.md +94 -0
  274. package/skills/cm-notebooklm/references/workflows.md +60 -0
  275. package/skills/cm-notebooklm/resources/knowledge_sources.md +106 -0
  276. package/skills/cm-notebooklm/scripts/brain-sync.sh +453 -0
  277. package/skills/cm-notebooklm/scripts/graduate_wisdom.py +101 -0
  278. package/skills/cm-planning/SKILL.md +39 -52
  279. package/skills/cm-project-bootstrap/SKILL.md +1307 -99
  280. package/skills/cm-quality-gate/SKILL.md +13 -106
  281. package/skills/cm-reactor/SKILL.md +274 -0
  282. package/skills/cm-safe-deploy/SKILL.md +415 -52
  283. package/skills/cm-safe-i18n/SKILL.md +1 -22
  284. package/skills/cm-secret-shield/SKILL.md +2 -2
  285. package/skills/cm-security-gate/SKILL.md +114 -0
  286. package/skills/cm-skill-chain/SKILL.md +2 -2
  287. package/skills/cm-skill-index/SKILL.md +9 -6
  288. package/skills/cm-skill-mastery/SKILL.md +2 -15
  289. package/skills/cm-start/SKILL.md +9 -0
  290. package/skills/cm-tdd/SKILL.md +8 -41
  291. package/skills/cm-ui-preview/SKILL.md +35 -173
  292. package/skills/cm-ux-master/FEATURES-v4.md +305 -0
  293. package/skills/cm-ux-master/README-ru.md +135 -0
  294. package/skills/cm-ux-master/README-vi.md +135 -0
  295. package/skills/cm-ux-master/README-zh.md +135 -0
  296. package/skills/cm-ux-master/README.md +489 -0
  297. package/skills/cm-ux-master/SKILL.md +773 -62
  298. package/skills/cm-ux-master/cli/README.md +180 -0
  299. package/skills/cm-ux-master/cli/pyproject.toml +106 -0
  300. package/skills/cm-ux-master/cli/requirements.txt +21 -0
  301. package/skills/cm-ux-master/cli/templates/base/skill-core.md +262 -0
  302. package/skills/cm-ux-master/cli/templates/platforms/claude.yaml +21 -0
  303. package/skills/cm-ux-master/cli/templates/platforms/cursor.yaml +21 -0
  304. package/skills/cm-ux-master/cli/templates/platforms/figma.yaml +24 -0
  305. package/skills/cm-ux-master/cli/templates/platforms/vscode-mcp.yaml +28 -0
  306. package/skills/cm-ux-master/cli/templates/platforms/windsurf.yaml +21 -0
  307. package/skills/cm-ux-master/cli/uxmaster/__init__.py +10 -0
  308. package/skills/cm-ux-master/cli/uxmaster/__main__.py +19 -0
  309. package/skills/cm-ux-master/cli/uxmaster/cli.py +349 -0
  310. package/skills/cm-ux-master/cli/uxmaster/commands/__init__.py +8 -0
  311. package/skills/cm-ux-master/cli/uxmaster/commands/extract.py +18 -0
  312. package/skills/cm-ux-master/cli/uxmaster/commands/init.py +58 -0
  313. package/skills/cm-ux-master/cli/uxmaster/commands/mcp.py +194 -0
  314. package/skills/cm-ux-master/cli/uxmaster/commands/search.py +23 -0
  315. package/skills/cm-ux-master/cli/uxmaster/commands/validate.py +270 -0
  316. package/skills/cm-ux-master/cli/uxmaster/search_engine.py +532 -0
  317. package/skills/cm-ux-master/cli/uxmaster/template_engine.py +458 -0
  318. package/skills/cm-ux-master/cli/uxmaster/utils/__init__.py +9 -0
  319. package/skills/cm-ux-master/cli/uxmaster/utils/console.py +42 -0
  320. package/skills/cm-ux-master/cli/uxmaster/utils/detect.py +83 -0
  321. package/skills/cm-ux-master/data/accessibility-advanced.csv +26 -0
  322. package/skills/cm-ux-master/data/animation.csv +31 -0
  323. package/skills/cm-ux-master/data/charts.csv +26 -0
  324. package/skills/cm-ux-master/data/colors.csv +97 -0
  325. package/skills/cm-ux-master/data/design-tests.csv +37 -0
  326. package/skills/cm-ux-master/data/devices.csv +21 -0
  327. package/skills/cm-ux-master/data/icons.csv +101 -0
  328. package/skills/cm-ux-master/data/landing.csv +31 -0
  329. package/skills/cm-ux-master/data/products.csv +97 -0
  330. package/skills/cm-ux-master/data/react-performance.csv +45 -0
  331. package/skills/cm-ux-master/data/responsive.csv +26 -0
  332. package/skills/cm-ux-master/data/semi-tokens.csv +52 -0
  333. package/skills/cm-ux-master/data/stacks/angular.csv +34 -0
  334. package/skills/cm-ux-master/data/stacks/astro.csv +54 -0
  335. package/skills/cm-ux-master/data/stacks/electron.csv +32 -0
  336. package/skills/cm-ux-master/data/stacks/flutter.csv +53 -0
  337. package/skills/cm-ux-master/data/stacks/html-tailwind.csv +56 -0
  338. package/skills/cm-ux-master/data/stacks/htmx.csv +28 -0
  339. package/skills/cm-ux-master/data/stacks/jetpack-compose.csv +53 -0
  340. package/skills/cm-ux-master/data/stacks/nextjs.csv +53 -0
  341. package/skills/cm-ux-master/data/stacks/nuxt-ui.csv +51 -0
  342. package/skills/cm-ux-master/data/stacks/nuxtjs.csv +59 -0
  343. package/skills/cm-ux-master/data/stacks/react-native.csv +52 -0
  344. package/skills/cm-ux-master/data/stacks/react.csv +54 -0
  345. package/skills/cm-ux-master/data/stacks/shadcn.csv +61 -0
  346. package/skills/cm-ux-master/data/stacks/svelte.csv +54 -0
  347. package/skills/cm-ux-master/data/stacks/swiftui.csv +51 -0
  348. package/skills/cm-ux-master/data/stacks/tauri.csv +29 -0
  349. package/skills/cm-ux-master/data/stacks/vue.csv +50 -0
  350. package/skills/cm-ux-master/data/styles.csv +68 -0
  351. package/skills/cm-ux-master/data/typography.csv +58 -0
  352. package/skills/cm-ux-master/data/ui-reasoning.csv +101 -0
  353. package/skills/cm-ux-master/data/ux-guidelines.csv +100 -0
  354. package/skills/cm-ux-master/data/ux-laws.csv +49 -0
  355. package/skills/cm-ux-master/data/web-interface.csv +31 -0
  356. package/skills/cm-ux-master/docs/LANDING-PAGE.html +377 -0
  357. package/skills/cm-ux-master/docs/README.md +108 -0
  358. package/skills/cm-ux-master/docs/css/styles.css +573 -0
  359. package/skills/cm-ux-master/docs/examples/demo-script.md +319 -0
  360. package/skills/cm-ux-master/docs/guides/for-designers.md +692 -0
  361. package/skills/cm-ux-master/docs/guides/for-developers.md +778 -0
  362. package/skills/cm-ux-master/docs/guides/for-product-managers.md +693 -0
  363. package/skills/cm-ux-master/docs/guides/react-guide-vi.md +50 -0
  364. package/skills/cm-ux-master/docs/index.html +1062 -0
  365. package/skills/cm-ux-master/docs/js/i18n.js +84 -0
  366. package/skills/cm-ux-master/docs/js/lang/de.js +145 -0
  367. package/skills/cm-ux-master/docs/js/lang/en.js +145 -0
  368. package/skills/cm-ux-master/docs/js/lang/fr.js +145 -0
  369. package/skills/cm-ux-master/docs/js/lang/hi.js +145 -0
  370. package/skills/cm-ux-master/docs/js/lang/id.js +145 -0
  371. package/skills/cm-ux-master/docs/js/lang/ja.js +145 -0
  372. package/skills/cm-ux-master/docs/js/lang/ko.js +145 -0
  373. package/skills/cm-ux-master/docs/js/lang/ru.js +145 -0
  374. package/skills/cm-ux-master/docs/js/lang/vi.js +145 -0
  375. package/skills/cm-ux-master/docs/js/lang/zh.js +145 -0
  376. package/skills/cm-ux-master/docs/js/main.js +117 -0
  377. package/skills/cm-ux-master/docs/plan/PHASE1-COMPLETION.md +217 -0
  378. package/skills/cm-ux-master/docs/plan/PHASE2-COMPLETION.md +199 -0
  379. package/skills/cm-ux-master/docs/plan/PHASE2-ENHANCED-COMPLETION.md +352 -0
  380. package/skills/cm-ux-master/docs/plan/PHASE3-VALIDATION-COMPLETION.md +499 -0
  381. package/skills/cm-ux-master/docs/plan/PHASE4-TESTING-POLISH-COMPLETION.md +483 -0
  382. package/skills/cm-ux-master/docs/plan/UXM-2.0-ROADMAP.md +681 -0
  383. package/skills/cm-ux-master/docs/plan/WOW-PITCH.md +410 -0
  384. package/skills/cm-ux-master/docs/technical/api-reference.md +824 -0
  385. package/skills/cm-ux-master/docs/technical/harvester-v4.md +328 -0
  386. package/skills/cm-ux-master/docs/technical/how-it-works.md +1128 -0
  387. package/skills/cm-ux-master/docs/tutorials/quickstart.md +339 -0
  388. package/skills/cm-ux-master/docs/tutorials/tutorials.md +939 -0
  389. package/skills/cm-ux-master/docs/tutorials/user-guide.md +716 -0
  390. package/skills/cm-ux-master/examples/README.md +63 -0
  391. package/skills/cm-ux-master/mcp/__init__.py +3 -0
  392. package/skills/cm-ux-master/mcp/integrations/__init__.py +11 -0
  393. package/skills/cm-ux-master/mcp/integrations/figma/__init__.py +6 -0
  394. package/skills/cm-ux-master/mcp/integrations/figma/client.py +293 -0
  395. package/skills/cm-ux-master/mcp/integrations/figma/plugin/code.js +561 -0
  396. package/skills/cm-ux-master/mcp/integrations/figma/plugin/ui.html +334 -0
  397. package/skills/cm-ux-master/mcp/integrations/stitch/__init__.py +5 -0
  398. package/skills/cm-ux-master/mcp/integrations/stitch/client.py +410 -0
  399. package/skills/cm-ux-master/mcp/integrations/vscode/package.json +167 -0
  400. package/skills/cm-ux-master/mcp/integrations/vscode/src/extension.ts +81 -0
  401. package/skills/cm-ux-master/mcp/mcp-config.json +274 -0
  402. package/skills/cm-ux-master/mcp/server.py +771 -0
  403. package/skills/cm-ux-master/mcp/tools/__init__.py +13 -0
  404. package/skills/cm-ux-master/mcp-server/server.py +595 -0
  405. package/skills/cm-ux-master/output/fila/FilaDashboard.tsx +47 -0
  406. package/skills/cm-ux-master/output/fila/components/badge/component.tsx +35 -0
  407. package/skills/cm-ux-master/output/fila/components/badge/index.ts +1 -0
  408. package/skills/cm-ux-master/output/fila/components/button/component.tsx +53 -0
  409. package/skills/cm-ux-master/output/fila/components/button/index.ts +1 -0
  410. package/skills/cm-ux-master/output/fila/components/card/component.tsx +35 -0
  411. package/skills/cm-ux-master/output/fila/components/card/index.ts +1 -0
  412. package/skills/cm-ux-master/output/fila/components/input/component.tsx +41 -0
  413. package/skills/cm-ux-master/output/fila/components/input/index.ts +1 -0
  414. package/skills/cm-ux-master/output/fila/design-system.css +151 -0
  415. package/skills/cm-ux-master/output/fila/design-system.html +1596 -0
  416. package/skills/cm-ux-master/output/fila/design-system.json +168 -0
  417. package/skills/cm-ux-master/output/fila/figma-tokens.json +523 -0
  418. package/skills/cm-ux-master/output/fila/harvest-v4-raw.json +406 -0
  419. package/skills/cm-ux-master/output/fila/semi-theme-override.css +95 -0
  420. package/skills/cm-ux-master/output/haravan/HaravanDashboard.tsx +103 -0
  421. package/skills/cm-ux-master/output/haravan/design-system-v3-live.html +2716 -0
  422. package/skills/cm-ux-master/output/haravan/design-system-v3.html +1770 -0
  423. package/skills/cm-ux-master/output/haravan/design-system.html +914 -0
  424. package/skills/cm-ux-master/output/haravan/figma-tokens.json +84 -0
  425. package/skills/cm-ux-master/output/haravan/haravan-harvest.json +33 -0
  426. package/skills/cm-ux-master/output/haravan/harvest-v3-raw.json +167 -0
  427. package/skills/cm-ux-master/output/haravan/semi-theme-override.css +39 -0
  428. package/skills/cm-ux-master/references/audit-template.md +257 -0
  429. package/skills/cm-ux-master/references/cultural-ux.md +346 -0
  430. package/skills/cm-ux-master/references/dark-patterns.md +362 -0
  431. package/skills/cm-ux-master/references/heuristic-conflicts.md +296 -0
  432. package/skills/cm-ux-master/references/krug-principles.md +289 -0
  433. package/skills/cm-ux-master/references/nielsen-heuristics.md +360 -0
  434. package/skills/cm-ux-master/references/wcag-checklist.md +306 -0
  435. package/skills/cm-ux-master/scripts/component_generator.py +631 -0
  436. package/skills/cm-ux-master/scripts/core.py +305 -0
  437. package/skills/cm-ux-master/scripts/demo_validation.py +452 -0
  438. package/skills/cm-ux-master/scripts/design_doc_generator.py +1325 -0
  439. package/skills/cm-ux-master/scripts/design_system.py +1141 -0
  440. package/skills/cm-ux-master/scripts/design_system_indexer.py +889 -0
  441. package/skills/cm-ux-master/scripts/extract_i18n.py +251 -0
  442. package/skills/cm-ux-master/scripts/extractor.py +1437 -0
  443. package/skills/cm-ux-master/scripts/figma_bridge.py +406 -0
  444. package/skills/cm-ux-master/scripts/generate.py +147 -0
  445. package/skills/cm-ux-master/scripts/harvest_session.py +207 -0
  446. package/skills/cm-ux-master/scripts/harvester.js +240 -0
  447. package/skills/cm-ux-master/scripts/harvester_browser.py +717 -0
  448. package/skills/cm-ux-master/scripts/harvester_cli.py +431 -0
  449. package/skills/cm-ux-master/scripts/harvester_v1.js +275 -0
  450. package/skills/cm-ux-master/scripts/harvester_v3.js +620 -0
  451. package/skills/cm-ux-master/scripts/harvester_v4.js +1003 -0
  452. package/skills/cm-ux-master/scripts/install.py +528 -0
  453. package/skills/cm-ux-master/scripts/license.py +81 -0
  454. package/skills/cm-ux-master/scripts/media/qrpayment.png +0 -0
  455. package/skills/cm-ux-master/scripts/pro_stubs.py +120 -0
  456. package/skills/cm-ux-master/scripts/project_registry.py +217 -0
  457. package/skills/cm-ux-master/scripts/search.py +114 -0
  458. package/skills/cm-ux-master/scripts/semi_mcp_bridge.py +425 -0
  459. package/skills/cm-ux-master/scripts/stitch_integration.py +583 -0
  460. package/skills/cm-ux-master/scripts/test_harvester_v4.py +335 -0
  461. package/skills/cm-ux-master/scripts/token_mapper.py +626 -0
  462. package/skills/cm-ux-master/scripts/validation_engine.py +1571 -0
  463. package/skills/cm-ux-master/scripts/wizard.py +653 -0
  464. package/skills/cm-ux-master/setup.py +93 -0
  465. package/skills/cm-ux-master/templates/base/flutter-widget.dart +69 -0
  466. package/skills/cm-ux-master/templates/base/html-page.html +152 -0
  467. package/skills/cm-ux-master/templates/base/react-component.tsx +47 -0
  468. package/skills/cm-ux-master/templates/base/swiftui-view.swift +62 -0
  469. package/skills/cm-ux-master/templates/quick-start.sh +176 -0
  470. package/skills/cm-ux-master/tests/automation/batch-validate.sh +250 -0
  471. package/skills/cm-ux-master/tests/automation/generate-test-projects.sh +561 -0
  472. package/skills/cm-ux-master/tests/automation/run-all-tests.sh +315 -0
  473. package/skills/cm-ux-master/tests/test_design_doc.py +145 -0
  474. package/skills/cm-ux-master/tests/test_devices.py +74 -0
  475. package/skills/cm-ux-master/tests/test_generator.py +116 -0
  476. package/skills/cm-ux-master/tests/test_harvest_session.py +131 -0
  477. package/skills/cm-ux-master/tests/test_harvester.py +127 -0
  478. package/skills/cm-ux-master/tests/test_harvester_v3.py +324 -0
  479. package/skills/cm-ux-master/tests/test_mcp_server.py +496 -0
  480. package/skills/cm-ux-master/tests/test_new_domains.py +108 -0
  481. package/skills/cm-ux-master/tests/test_new_stacks.py +103 -0
  482. package/skills/cm-ux-master/tests/test_project_registry.py +146 -0
  483. package/skills/cm-ux-master/tests/test_semi_mcp_bridge.py +207 -0
  484. package/skills/cm-ux-master/tests/test_token_mapper.py +247 -0
  485. package/skills/cm-ux-master/tests/test_validation_engine.py +617 -0
  486. package/skills/config.schema.json +397 -0
  487. package/skills/frappe-app-builder.zip +0 -0
  488. package/skills/jobs-to-be-done/SKILL.md +266 -0
  489. package/skills/jobs-to-be-done/references/case-studies.md +154 -0
  490. package/skills/jobs-to-be-done/references/competitive-strategy.md +280 -0
  491. package/skills/jobs-to-be-done/references/diagnostics.md +158 -0
  492. package/skills/jobs-to-be-done/references/innovation-process.md +392 -0
  493. package/skills/jobs-to-be-done/references/organizational-change.md +328 -0
  494. package/skills/marketplace-report-crawler/SKILL.md +176 -0
  495. package/skills/marketplace-report-crawler/config/accounts.json +41 -0
  496. package/skills/marketplace-report-crawler/config/report-types.json +422 -0
  497. package/skills/marketplace-report-crawler/config/sessions.json +3 -0
  498. package/skills/marketplace-report-crawler/scripts/ab-wrapper.sh +102 -0
  499. package/skills/marketplace-report-crawler/scripts/browser-actions/lazada/lazada-actions.js +114 -0
  500. package/skills/marketplace-report-crawler/scripts/browser-actions/shopee/shopee-actions.js +94 -0
  501. package/skills/marketplace-report-crawler/scripts/browser-actions/tiktok/tiktok-actions.js +272 -0
  502. package/skills/marketplace-report-crawler/scripts/crawl-runner.js +281 -0
  503. package/skills/marketplace-report-crawler/scripts/session-check.sh +72 -0
  504. package/skills/marketplace-report-crawler/scripts/session-manager.sh +349 -0
  505. package/skills/marketplace-report-crawler/scripts/setup-folders.sh +83 -0
  506. package/skills/medical-research/SKILL.md +194 -0
  507. package/skills/medical-research/scripts/evidence_checker.py +288 -0
  508. package/skills/mom-test/SKILL.md +267 -0
  509. package/skills/mom-test/references/avoiding-bad-data.md +221 -0
  510. package/skills/mom-test/references/case-studies.md +306 -0
  511. package/skills/mom-test/references/commitment-advancement.md +219 -0
  512. package/skills/mom-test/references/finding-conversations.md +251 -0
  513. package/skills/mom-test/references/processing-learning.md +256 -0
  514. package/skills/mom-test/references/question-patterns.md +198 -0
  515. package/skills/pandasai-analytics/SKILL.md +251 -0
  516. package/skills/release-it/SKILL.md +235 -0
  517. package/skills/release-it/references/anti-patterns.md +279 -0
  518. package/skills/release-it/references/capacity-planning.md +285 -0
  519. package/skills/release-it/references/chaos-engineering.md +325 -0
  520. package/skills/release-it/references/deployment-strategies.md +331 -0
  521. package/skills/release-it/references/observability.md +301 -0
  522. package/skills/release-it/references/stability-patterns.md +355 -0
  523. package/skills/scripts/sync-ide-skills.sh +61 -0
  524. package/skills/skill-creator-ultra/.agents/workflows/skill-audit.md +37 -0
  525. package/skills/skill-creator-ultra/.agents/workflows/skill-compare.md +34 -0
  526. package/skills/skill-creator-ultra/.agents/workflows/skill-export.md +51 -0
  527. package/skills/skill-creator-ultra/.agents/workflows/skill-generate.md +39 -0
  528. package/skills/skill-creator-ultra/.agents/workflows/skill-scaffold.md +52 -0
  529. package/skills/skill-creator-ultra/.agents/workflows/skill-simulate.md +25 -0
  530. package/skills/skill-creator-ultra/.agents/workflows/skill-stats.md +31 -0
  531. package/skills/skill-creator-ultra/.agents/workflows/skill-validate.md +25 -0
  532. package/skills/skill-creator-ultra/README.md +1242 -0
  533. package/skills/skill-creator-ultra/SKILL.md +388 -0
  534. package/skills/skill-creator-ultra/agents/analyzer.md +274 -0
  535. package/skills/skill-creator-ultra/agents/comparator.md +202 -0
  536. package/skills/skill-creator-ultra/agents/grader.md +223 -0
  537. package/skills/skill-creator-ultra/assets/eval_review.html +146 -0
  538. package/skills/skill-creator-ultra/eval-viewer/generate_review.py +471 -0
  539. package/skills/skill-creator-ultra/eval-viewer/viewer.html +1325 -0
  540. package/skills/skill-creator-ultra/examples/example_anthropic_frontend.md +109 -0
  541. package/skills/skill-creator-ultra/examples/example_anthropic_pdf.md +116 -0
  542. package/skills/skill-creator-ultra/examples/example_api_docs.md +189 -0
  543. package/skills/skill-creator-ultra/examples/example_db_migration.md +253 -0
  544. package/skills/skill-creator-ultra/examples/example_git_commit.md +111 -0
  545. package/skills/skill-creator-ultra/install.ps1 +289 -0
  546. package/skills/skill-creator-ultra/install.sh +313 -0
  547. package/skills/skill-creator-ultra/phases/phase1_interview.md +202 -0
  548. package/skills/skill-creator-ultra/phases/phase2_extract.md +55 -0
  549. package/skills/skill-creator-ultra/phases/phase3_detect.md +57 -0
  550. package/skills/skill-creator-ultra/phases/phase4_generate.md +543 -0
  551. package/skills/skill-creator-ultra/phases/phase5_test.md +319 -0
  552. package/skills/skill-creator-ultra/phases/phase6_eval.md +301 -0
  553. package/skills/skill-creator-ultra/phases/phase7_iterate.md +103 -0
  554. package/skills/skill-creator-ultra/phases/phase8_optimize.md +113 -0
  555. package/skills/skill-creator-ultra/resources/advanced_patterns.md +499 -0
  556. package/skills/skill-creator-ultra/resources/anti_patterns.md +376 -0
  557. package/skills/skill-creator-ultra/resources/blueprints.md +498 -0
  558. package/skills/skill-creator-ultra/resources/checklist.md +243 -0
  559. package/skills/skill-creator-ultra/resources/composition_cookbook.md +291 -0
  560. package/skills/skill-creator-ultra/resources/description_optimization.md +90 -0
  561. package/skills/skill-creator-ultra/resources/eval_guide.md +133 -0
  562. package/skills/skill-creator-ultra/resources/industry_questions.md +189 -0
  563. package/skills/skill-creator-ultra/resources/interview_questions.md +200 -0
  564. package/skills/skill-creator-ultra/resources/pattern_detection.md +200 -0
  565. package/skills/skill-creator-ultra/resources/prompt_engineering.md +531 -0
  566. package/skills/skill-creator-ultra/resources/schemas.md +430 -0
  567. package/skills/skill-creator-ultra/resources/script_integration.md +593 -0
  568. package/skills/skill-creator-ultra/resources/scripts_guide.md +339 -0
  569. package/skills/skill-creator-ultra/resources/skill_template.md +124 -0
  570. package/skills/skill-creator-ultra/resources/skill_writing_guide.md +634 -0
  571. package/skills/skill-creator-ultra/resources/versioning_guide.md +193 -0
  572. package/skills/skill-creator-ultra/scripts/ci_eval.py +200 -0
  573. package/skills/skill-creator-ultra/scripts/package_skill.py +165 -0
  574. package/skills/skill-creator-ultra/scripts/simulate_skill.py +398 -0
  575. package/skills/skill-creator-ultra/scripts/skill_audit.py +611 -0
  576. package/skills/skill-creator-ultra/scripts/skill_compare.py +265 -0
  577. package/skills/skill-creator-ultra/scripts/skill_export.py +334 -0
  578. package/skills/skill-creator-ultra/scripts/skill_scaffold.py +403 -0
  579. package/skills/skill-creator-ultra/scripts/skill_stats.py +339 -0
  580. package/skills/skill-creator-ultra/scripts/validate_skill.py +411 -0
  581. package/skills/tailwind-mastery/SKILL.md +229 -0
  582. package/skills/vercel-react-best-practices/AGENTS.md +3373 -0
  583. package/skills/vercel-react-best-practices/README.md +123 -0
  584. package/skills/vercel-react-best-practices/SKILL.md +143 -0
  585. package/skills/vercel-react-best-practices/rules/_sections.md +46 -0
  586. package/skills/vercel-react-best-practices/rules/_template.md +28 -0
  587. package/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md +55 -0
  588. package/skills/vercel-react-best-practices/rules/advanced-init-once.md +42 -0
  589. package/skills/vercel-react-best-practices/rules/advanced-use-latest.md +39 -0
  590. package/skills/vercel-react-best-practices/rules/async-api-routes.md +38 -0
  591. package/skills/vercel-react-best-practices/rules/async-defer-await.md +80 -0
  592. package/skills/vercel-react-best-practices/rules/async-dependencies.md +51 -0
  593. package/skills/vercel-react-best-practices/rules/async-parallel.md +28 -0
  594. package/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md +99 -0
  595. package/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md +59 -0
  596. package/skills/vercel-react-best-practices/rules/bundle-conditional.md +31 -0
  597. package/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md +49 -0
  598. package/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md +35 -0
  599. package/skills/vercel-react-best-practices/rules/bundle-preload.md +50 -0
  600. package/skills/vercel-react-best-practices/rules/client-event-listeners.md +74 -0
  601. package/skills/vercel-react-best-practices/rules/client-localstorage-schema.md +71 -0
  602. package/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md +48 -0
  603. package/skills/vercel-react-best-practices/rules/client-swr-dedup.md +56 -0
  604. package/skills/vercel-react-best-practices/rules/js-batch-dom-css.md +107 -0
  605. package/skills/vercel-react-best-practices/rules/js-cache-function-results.md +80 -0
  606. package/skills/vercel-react-best-practices/rules/js-cache-property-access.md +28 -0
  607. package/skills/vercel-react-best-practices/rules/js-cache-storage.md +70 -0
  608. package/skills/vercel-react-best-practices/rules/js-combine-iterations.md +32 -0
  609. package/skills/vercel-react-best-practices/rules/js-early-exit.md +50 -0
  610. package/skills/vercel-react-best-practices/rules/js-flatmap-filter.md +60 -0
  611. package/skills/vercel-react-best-practices/rules/js-hoist-regexp.md +45 -0
  612. package/skills/vercel-react-best-practices/rules/js-index-maps.md +37 -0
  613. package/skills/vercel-react-best-practices/rules/js-length-check-first.md +49 -0
  614. package/skills/vercel-react-best-practices/rules/js-min-max-loop.md +82 -0
  615. package/skills/vercel-react-best-practices/rules/js-set-map-lookups.md +24 -0
  616. package/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md +57 -0
  617. package/skills/vercel-react-best-practices/rules/rendering-activity.md +26 -0
  618. package/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md +47 -0
  619. package/skills/vercel-react-best-practices/rules/rendering-conditional-render.md +40 -0
  620. package/skills/vercel-react-best-practices/rules/rendering-content-visibility.md +38 -0
  621. package/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md +46 -0
  622. package/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md +82 -0
  623. package/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md +30 -0
  624. package/skills/vercel-react-best-practices/rules/rendering-resource-hints.md +85 -0
  625. package/skills/vercel-react-best-practices/rules/rendering-script-defer-async.md +68 -0
  626. package/skills/vercel-react-best-practices/rules/rendering-svg-precision.md +28 -0
  627. package/skills/vercel-react-best-practices/rules/rendering-usetransition-loading.md +75 -0
  628. package/skills/vercel-react-best-practices/rules/rerender-defer-reads.md +39 -0
  629. package/skills/vercel-react-best-practices/rules/rerender-dependencies.md +45 -0
  630. package/skills/vercel-react-best-practices/rules/rerender-derived-state-no-effect.md +40 -0
  631. package/skills/vercel-react-best-practices/rules/rerender-derived-state.md +29 -0
  632. package/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md +74 -0
  633. package/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md +58 -0
  634. package/skills/vercel-react-best-practices/rules/rerender-memo-with-default-value.md +38 -0
  635. package/skills/vercel-react-best-practices/rules/rerender-memo.md +44 -0
  636. package/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md +45 -0
  637. package/skills/vercel-react-best-practices/rules/rerender-no-inline-components.md +82 -0
  638. package/skills/vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md +35 -0
  639. package/skills/vercel-react-best-practices/rules/rerender-split-combined-hooks.md +64 -0
  640. package/skills/vercel-react-best-practices/rules/rerender-transitions.md +40 -0
  641. package/skills/vercel-react-best-practices/rules/rerender-use-deferred-value.md +59 -0
  642. package/skills/vercel-react-best-practices/rules/rerender-use-ref-transient-values.md +73 -0
  643. package/skills/vercel-react-best-practices/rules/server-after-nonblocking.md +73 -0
  644. package/skills/vercel-react-best-practices/rules/server-auth-actions.md +96 -0
  645. package/skills/vercel-react-best-practices/rules/server-cache-lru.md +41 -0
  646. package/skills/vercel-react-best-practices/rules/server-cache-react.md +76 -0
  647. package/skills/vercel-react-best-practices/rules/server-dedup-props.md +65 -0
  648. package/skills/vercel-react-best-practices/rules/server-hoist-static-io.md +142 -0
  649. package/skills/vercel-react-best-practices/rules/server-parallel-fetching.md +83 -0
  650. package/skills/vercel-react-best-practices/rules/server-serialization.md +38 -0
  651. package/skills/web-design-guidelines/SKILL.md +39 -0
  652. package/skills/cro-methodology/SKILL.md +0 -98
  653. /package/skills/{cro-methodology → cm-cro-methodology}/references/COPYWRITING.md +0 -0
  654. /package/skills/{cro-methodology → cm-cro-methodology}/references/OBJECTIONS.md +0 -0
  655. /package/skills/{cro-methodology → cm-cro-methodology}/references/PERSUASION.md +0 -0
  656. /package/skills/{cro-methodology → cm-cro-methodology}/references/RESEARCH.md +0 -0
  657. /package/skills/{cro-methodology → cm-cro-methodology}/references/funnel-analysis.md +0 -0
  658. /package/skills/{cro-methodology → cm-cro-methodology}/references/testing-methodology.md +0 -0
package/skills/cm-ux-master/output/haravan/design-system-v3-live.html ADDED
@@ -0,0 +1,2716 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Haravan Dashboard — Design System</title>
7
+ <style>
8
+
9
+ :root {
10
+ --doc-primary: #2463EB;
11
+ --doc-bg: #FAFBFC;
12
+ --doc-surface: #FFFFFF;
13
+ --doc-text: #111827;
14
+ --doc-text-secondary: #6B7280;
15
+ --doc-border: #E5E7EB;
16
+ --doc-code-bg: #F3F4F6;
17
+ --doc-radius: 12px;
18
+ --doc-shadow: 0 1px 3px rgba(0,0,0,0.08);
19
+ }
20
+
21
+ [data-theme="dark"] {
22
+ --doc-bg: #0F172A;
23
+ --doc-surface: #1E293B;
24
+ --doc-text: #F1F5F9;
25
+ --doc-text-secondary: #94A3B8;
26
+ --doc-border: #334155;
27
+ --doc-code-bg: #1E293B;
28
+ --doc-shadow: 0 1px 3px rgba(0,0,0,0.3);
29
+ }
30
+
31
+ * { margin: 0; padding: 0; box-sizing: border-box; }
32
+
33
+ body {
34
+ font-family: -apple-system, system-ui, 'Segoe UI', Roboto, 'Inter', sans-serif;
35
+ background: var(--doc-bg);
36
+ color: var(--doc-text);
37
+ line-height: 1.6;
38
+ transition: background 0.3s, color 0.3s;
39
+ }
40
+
41
+ .header {
42
+ position: sticky;
43
+ top: 0;
44
+ z-index: 100;
45
+ background: var(--doc-surface);
46
+ border-bottom: 1px solid var(--doc-border);
47
+ backdrop-filter: blur(12px);
48
+ -webkit-backdrop-filter: blur(12px);
49
+ }
50
+
51
+ .header-inner {
52
+ max-width: 1200px;
53
+ margin: 0 auto;
54
+ padding: 16px 24px;
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: space-between;
58
+ }
59
+
60
+ .header-left {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 12px;
64
+ }
65
+
66
+ .header-title {
67
+ font-size: 20px;
68
+ font-weight: 700;
69
+ }
70
+
71
+ .header-badge {
72
+ background: var(--doc-primary);
73
+ color: #fff;
74
+ font-size: 11px;
75
+ font-weight: 600;
76
+ padding: 2px 8px;
77
+ border-radius: 100px;
78
+ text-transform: uppercase;
79
+ letter-spacing: 0.5px;
80
+ }
81
+
82
+ .theme-toggle {
83
+ background: var(--doc-code-bg);
84
+ border: 1px solid var(--doc-border);
85
+ border-radius: 8px;
86
+ padding: 8px 12px;
87
+ cursor: pointer;
88
+ font-size: 16px;
89
+ transition: all 0.2s;
90
+ }
91
+
92
+ .theme-toggle:hover {
93
+ border-color: var(--doc-primary);
94
+ }
95
+
96
+ .main {
97
+ max-width: 1200px;
98
+ margin: 0 auto;
99
+ padding: 32px 24px;
100
+ }
101
+
102
+ .section {
103
+ margin-bottom: 48px;
104
+ }
105
+
106
+ .section-title {
107
+ font-size: 24px;
108
+ font-weight: 700;
109
+ margin-bottom: 20px;
110
+ padding-bottom: 8px;
111
+ border-bottom: 2px solid var(--doc-border);
112
+ }
113
+
114
+ .subsection-title {
115
+ font-size: 16px;
116
+ font-weight: 600;
117
+ margin: 16px 0 12px;
118
+ color: var(--doc-text-secondary);
119
+ }
120
+
121
+ /* Intro Grid */
122
+ .intro-grid {
123
+ display: grid;
124
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
125
+ gap: 12px;
126
+ }
127
+
128
+ .intro-card {
129
+ background: var(--doc-surface);
130
+ border: 1px solid var(--doc-border);
131
+ border-radius: var(--doc-radius);
132
+ padding: 16px;
133
+ box-shadow: var(--doc-shadow);
134
+ }
135
+
136
+ .intro-label {
137
+ font-size: 12px;
138
+ font-weight: 600;
139
+ text-transform: uppercase;
140
+ letter-spacing: 0.5px;
141
+ color: var(--doc-text-secondary);
142
+ margin-bottom: 4px;
143
+ }
144
+
145
+ .intro-value {
146
+ font-size: 15px;
147
+ font-weight: 500;
148
+ word-break: break-all;
149
+ }
150
+
151
+ .intro-value a {
152
+ color: var(--doc-primary);
153
+ text-decoration: none;
154
+ }
155
+
156
+ /* Color Swatches */
157
+ .swatch-grid {
158
+ display: grid;
159
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
160
+ gap: 12px;
161
+ }
162
+
163
+ .swatch {
164
+ background: var(--doc-surface);
165
+ border: 1px solid var(--doc-border);
166
+ border-radius: var(--doc-radius);
167
+ overflow: hidden;
168
+ cursor: pointer;
169
+ transition: transform 0.15s, box-shadow 0.15s;
170
+ }
171
+
172
+ .swatch:hover {
173
+ transform: translateY(-2px);
174
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
175
+ }
176
+
177
+ .swatch-color {
178
+ height: 72px;
179
+ width: 100%;
180
+ }
181
+
182
+ .swatch-info {
183
+ padding: 10px 12px;
184
+ }
185
+
186
+ .swatch-name {
187
+ font-size: 13px;
188
+ font-weight: 600;
189
+ margin-bottom: 2px;
190
+ }
191
+
192
+ .swatch-value {
193
+ font-size: 11px;
194
+ color: var(--doc-text-secondary);
195
+ }
196
+
197
+ /* Typography */
198
+ .type-specimens {
199
+ display: flex;
200
+ flex-direction: column;
201
+ gap: 16px;
202
+ }
203
+
204
+ .type-specimen {
205
+ background: var(--doc-surface);
206
+ border: 1px solid var(--doc-border);
207
+ border-radius: var(--doc-radius);
208
+ padding: 20px;
209
+ }
210
+
211
+ .type-label {
212
+ font-size: 12px;
213
+ font-weight: 600;
214
+ text-transform: uppercase;
215
+ letter-spacing: 0.5px;
216
+ color: var(--doc-text-secondary);
217
+ margin-bottom: 8px;
218
+ }
219
+
220
+ .type-sample {
221
+ font-size: 32px;
222
+ font-weight: 600;
223
+ margin-bottom: 8px;
224
+ }
225
+
226
+ .type-heading-sample {
227
+ font-size: 28px;
228
+ font-weight: 700;
229
+ }
230
+
231
+ .type-body-sample {
232
+ line-height: 1.6;
233
+ }
234
+
235
+ .type-muted-sample {
236
+ color: var(--doc-text-secondary);
237
+ line-height: 1.6;
238
+ }
239
+
240
+ /* Geometry */
241
+ .geo-grid {
242
+ display: grid;
243
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
244
+ gap: 12px;
245
+ }
246
+
247
+ .geo-item {
248
+ background: var(--doc-surface);
249
+ border: 1px solid var(--doc-border);
250
+ border-radius: var(--doc-radius);
251
+ padding: 16px;
252
+ display: flex;
253
+ align-items: center;
254
+ gap: 16px;
255
+ }
256
+
257
+ .geo-preview {
258
+ width: 48px;
259
+ height: 48px;
260
+ background: var(--doc-primary);
261
+ flex-shrink: 0;
262
+ }
263
+
264
+ .geo-shadow {
265
+ background: var(--doc-surface);
266
+ border-radius: 8px;
267
+ }
268
+
269
+ .geo-label {
270
+ font-size: 13px;
271
+ font-weight: 600;
272
+ margin-bottom: 2px;
273
+ }
274
+
275
+ .geo-info code {
276
+ font-size: 11px;
277
+ color: var(--doc-text-secondary);
278
+ }
279
+
280
+ /* Components */
281
+ .component-grid {
282
+ display: grid;
283
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
284
+ gap: 16px;
285
+ }
286
+
287
+ .component-card {
288
+ background: var(--doc-surface);
289
+ border: 1px solid var(--doc-border);
290
+ border-radius: var(--doc-radius);
291
+ padding: 20px;
292
+ }
293
+
294
+ .component-card h4 {
295
+ font-size: 14px;
296
+ font-weight: 600;
297
+ margin-bottom: 12px;
298
+ color: var(--doc-text-secondary);
299
+ }
300
+
301
+ .component-row {
302
+ display: flex;
303
+ gap: 8px;
304
+ flex-wrap: wrap;
305
+ }
306
+
307
+ .comp-btn {
308
+ padding: 8px 16px;
309
+ border: none;
310
+ font-size: 14px;
311
+ font-weight: 500;
312
+ cursor: pointer;
313
+ transition: opacity 0.2s;
314
+ }
315
+
316
+ .comp-btn:hover { opacity: 0.9; }
317
+
318
+ .comp-card-preview {
319
+ padding: 16px;
320
+ }
321
+
322
+ .comp-card-title {
323
+ font-size: 16px;
324
+ font-weight: 600;
325
+ margin-bottom: 8px;
326
+ }
327
+
328
+ .comp-card-body {
329
+ font-size: 14px;
330
+ line-height: 1.5;
331
+ }
332
+
333
+ .comp-input {
334
+ width: 100%;
335
+ padding: 10px 12px;
336
+ font-size: 14px;
337
+ background: var(--doc-bg);
338
+ outline: none;
339
+ transition: border-color 0.2s;
340
+ }
341
+
342
+ .comp-input:focus {
343
+ border-color: var(--doc-primary) !important;
344
+ }
345
+
346
+ .comp-tag {
347
+ display: inline-block;
348
+ padding: 4px 10px;
349
+ font-size: 12px;
350
+ font-weight: 500;
351
+ }
352
+
353
+ /* Neutral Scale */
354
+ .neutral-grid {
355
+ display: grid;
356
+ grid-template-columns: repeat(10, 1fr);
357
+ gap: 4px;
358
+ border-radius: var(--doc-radius);
359
+ overflow: hidden;
360
+ }
361
+
362
+ .neutral-swatch {
363
+ cursor: pointer;
364
+ text-align: center;
365
+ transition: transform 0.15s;
366
+ }
367
+
368
+ .neutral-swatch:hover { transform: translateY(-2px); }
369
+
370
+ .neutral-color {
371
+ height: 48px;
372
+ width: 100%;
373
+ }
374
+
375
+ .neutral-label {
376
+ font-size: 11px;
377
+ font-weight: 600;
378
+ margin-top: 4px;
379
+ color: var(--doc-text-secondary);
380
+ }
381
+
382
+ .neutral-hex {
383
+ font-size: 9px;
384
+ color: var(--doc-text-secondary);
385
+ }
386
+
387
+ /* Spacing Scale */
388
+ .spacing-scale {
389
+ display: flex;
390
+ flex-direction: column;
391
+ gap: 8px;
392
+ background: var(--doc-surface);
393
+ border: 1px solid var(--doc-border);
394
+ border-radius: var(--doc-radius);
395
+ padding: 20px;
396
+ }
397
+
398
+ .spacing-item {
399
+ display: flex;
400
+ align-items: center;
401
+ gap: 12px;
402
+ }
403
+
404
+ .spacing-value {
405
+ width: 48px;
406
+ text-align: right;
407
+ font-size: 12px;
408
+ color: var(--doc-text-secondary);
409
+ flex-shrink: 0;
410
+ }
411
+
412
+ .spacing-bar {
413
+ height: 12px;
414
+ background: var(--doc-primary);
415
+ border-radius: 4px;
416
+ opacity: 0.7;
417
+ transition: opacity 0.2s;
418
+ }
419
+
420
+ .spacing-bar:hover { opacity: 1; }
421
+
422
+ .spacing-px {
423
+ font-size: 11px;
424
+ color: var(--doc-text-secondary);
425
+ }
426
+
427
+ /* Layout Blueprint */
428
+ .layout-blueprint {
429
+ margin-bottom: 20px;
430
+ }
431
+
432
+ .layout-diagram {
433
+ display: flex;
434
+ border: 2px dashed var(--doc-border);
435
+ border-radius: var(--doc-radius);
436
+ min-height: 200px;
437
+ overflow: hidden;
438
+ }
439
+
440
+ .layout-sidebar {
441
+ background: rgba(31, 41, 55, 0.9);
442
+ color: #D1D5DB;
443
+ display: flex;
444
+ flex-direction: column;
445
+ align-items: center;
446
+ justify-content: center;
447
+ gap: 4px;
448
+ border-right: 2px dashed var(--doc-border);
449
+ flex-shrink: 0;
450
+ }
451
+
452
+ .layout-main-area {
453
+ flex: 1;
454
+ display: flex;
455
+ flex-direction: column;
456
+ }
457
+
458
+ .layout-header {
459
+ background: var(--doc-surface);
460
+ border-bottom: 2px dashed var(--doc-border);
461
+ display: flex;
462
+ align-items: center;
463
+ justify-content: center;
464
+ gap: 8px;
465
+ }
466
+
467
+ .layout-content {
468
+ flex: 1;
469
+ padding: 20px;
470
+ display: flex;
471
+ flex-direction: column;
472
+ align-items: center;
473
+ justify-content: center;
474
+ gap: 4px;
475
+ background: var(--doc-bg);
476
+ }
477
+
478
+ .layout-metric-label {
479
+ font-size: 12px;
480
+ font-weight: 600;
481
+ }
482
+
483
+ .layout-tokens {
484
+ margin-top: 16px;
485
+ }
486
+
487
+ /* Token Table */
488
+ .table-wrapper {
489
+ overflow-x: auto;
490
+ border: 1px solid var(--doc-border);
491
+ border-radius: var(--doc-radius);
492
+ }
493
+
494
+ .token-table {
495
+ width: 100%;
496
+ border-collapse: collapse;
497
+ font-size: 13px;
498
+ }
499
+
500
+ .token-table th {
501
+ background: var(--doc-code-bg);
502
+ padding: 10px 16px;
503
+ text-align: left;
504
+ font-weight: 600;
505
+ font-size: 12px;
506
+ text-transform: uppercase;
507
+ letter-spacing: 0.5px;
508
+ border-bottom: 1px solid var(--doc-border);
509
+ }
510
+
511
+ .token-table td {
512
+ padding: 8px 16px;
513
+ border-bottom: 1px solid var(--doc-border);
514
+ vertical-align: middle;
515
+ }
516
+
517
+ .token-table tr:last-child td {
518
+ border-bottom: none;
519
+ }
520
+
521
+ .token-table tr:hover {
522
+ background: var(--doc-code-bg);
523
+ }
524
+
525
+ .token-color-preview {
526
+ display: inline-block;
527
+ width: 16px;
528
+ height: 16px;
529
+ border-radius: 4px;
530
+ vertical-align: middle;
531
+ margin-right: 8px;
532
+ border: 1px solid var(--doc-border);
533
+ }
534
+
535
+ /* Usage */
536
+ .usage-blocks {
537
+ display: flex;
538
+ flex-direction: column;
539
+ gap: 16px;
540
+ }
541
+
542
+ .usage-block {
543
+ background: var(--doc-surface);
544
+ border: 1px solid var(--doc-border);
545
+ border-radius: var(--doc-radius);
546
+ padding: 20px;
547
+ }
548
+
549
+ .usage-block h4 {
550
+ font-size: 14px;
551
+ font-weight: 600;
552
+ margin-bottom: 12px;
553
+ }
554
+
555
+ .usage-block pre {
556
+ background: var(--doc-code-bg);
557
+ border-radius: 8px;
558
+ padding: 16px;
559
+ overflow-x: auto;
560
+ font-size: 13px;
561
+ line-height: 1.5;
562
+ }
563
+
564
+ code {
565
+ font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
566
+ }
567
+
568
+ /* Footer */
569
+ .footer {
570
+ text-align: center;
571
+ padding: 24px;
572
+ font-size: 13px;
573
+ color: var(--doc-text-secondary);
574
+ border-top: 1px solid var(--doc-border);
575
+ }
576
+
577
+ /* Toast */
578
+ .toast {
579
+ position: fixed;
580
+ bottom: -60px;
581
+ left: 50%;
582
+ transform: translateX(-50%);
583
+ background: var(--doc-text);
584
+ color: var(--doc-bg);
585
+ padding: 10px 20px;
586
+ border-radius: 8px;
587
+ font-size: 14px;
588
+ font-weight: 500;
589
+ transition: bottom 0.3s;
590
+ z-index: 999;
591
+ }
592
+
593
+ .toast.show {
594
+ bottom: 24px;
595
+ }
596
+
597
+ /* Responsive */
598
+ @media (max-width: 640px) {
599
+ .intro-grid { grid-template-columns: 1fr 1fr; }
600
+ .swatch-grid { grid-template-columns: repeat(2, 1fr); }
601
+ .component-grid { grid-template-columns: 1fr; }
602
+ .geo-grid { grid-template-columns: 1fr; }
603
+ }
604
+
605
+ </style>
606
+ </head>
607
+ <body>
608
+ <header class="header">
609
+ <div class="header-inner">
610
+ <div class="header-left">
611
+ <h1 class="header-title">Haravan Dashboard</h1>
612
+ <span class="header-badge">Design System</span>
613
+ </div>
614
+ <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode">
615
+ <span class="toggle-icon" id="themeIcon">☀️</span>
616
+ </button>
617
+ </div>
618
+ </header>
619
+
620
+ <main class="main">
621
+ <!-- Section 1: Introduction -->
622
+ <section class="section" id="introduction">
623
+ <h2 class="section-title">Introduction</h2>
624
+ <div class="intro-grid">
625
+ <div class="intro-card">
626
+ <div class="intro-label">Project</div>
627
+ <div class="intro-value">Haravan Dashboard</div>
628
+ </div>
629
+ <div class="intro-card">
630
+ <div class="intro-label">Source</div>
631
+ <div class="intro-value"><a href="https://showcase.myharavan.com/admin/dashboard/generals" target="_blank" rel="noopener">https://showcase.myharavan.com/admin/dashboard/generals</a></div>
632
+ </div>
633
+ <div class="intro-card">
634
+ <div class="intro-label">Pages Scanned</div>
635
+ <div class="intro-value">1</div>
636
+ </div>
637
+ <div class="intro-card">
638
+ <div class="intro-label">Tokens Extracted</div>
639
+ <div class="intro-value">150</div>
640
+ </div>
641
+ <div class="intro-card">
642
+ <div class="intro-label">Last Updated</div>
643
+ <div class="intro-value">2026-02-25</div>
644
+ </div>
645
+ </div>
646
+ </section>
647
+
648
+ <!-- Section 2: Color Palette -->
649
+ <section class="section" id="colors">
650
+ <h2 class="section-title">🎨 Color Palette</h2>
651
+
652
+ <h3 class="subsection-title">Brand Colors</h3>
653
+ <div class="swatch-grid">
654
+ <div class="swatch" onclick="copyColor('#2463EB')">
655
+ <div class="swatch-color" style="background: #2463EB"></div>
656
+ <div class="swatch-info">
657
+ <div class="swatch-name">Primary</div>
658
+ <code class="swatch-value">#2463EB</code>
659
+ </div>
660
+ </div>
661
+ <div class="swatch" onclick="copyColor('#1C4FBC')">
662
+ <div class="swatch-color" style="background: #1C4FBC"></div>
663
+ <div class="swatch-info">
664
+ <div class="swatch-name">Primary Active</div>
665
+ <code class="swatch-value">#1C4FBC</code>
666
+ </div>
667
+ </div>
668
+ <div class="swatch" onclick="copyColor('#A7C0F7')">
669
+ <div class="swatch-color" style="background: #A7C0F7"></div>
670
+ <div class="swatch-info">
671
+ <div class="swatch-name">Primary Disabled</div>
672
+ <code class="swatch-value">#A7C0F7</code>
673
+ </div>
674
+ </div>
675
+ <div class="swatch" onclick="copyColor('#2059D3')">
676
+ <div class="swatch-color" style="background: #2059D3"></div>
677
+ <div class="swatch-info">
678
+ <div class="swatch-name">Primary Hover</div>
679
+ <code class="swatch-value">#2059D3</code>
680
+ </div>
681
+ </div>
682
+ <div class="swatch" onclick="copyColor('#C8D8FA')">
683
+ <div class="swatch-color" style="background: #C8D8FA"></div>
684
+ <div class="swatch-info">
685
+ <div class="swatch-name">Primary Light Active</div>
686
+ <code class="swatch-value">#C8D8FA</code>
687
+ </div>
688
+ </div>
689
+ <div class="swatch" onclick="copyColor('#E4ECFC')">
690
+ <div class="swatch-color" style="background: #E4ECFC"></div>
691
+ <div class="swatch-info">
692
+ <div class="swatch-name">Primary Light Default</div>
693
+ <code class="swatch-value">#E4ECFC</code>
694
+ </div>
695
+ </div>
696
+ <div class="swatch" onclick="copyColor('#D7E2FB')">
697
+ <div class="swatch-color" style="background: #D7E2FB"></div>
698
+ <div class="swatch-info">
699
+ <div class="swatch-name">Primary Light Hover</div>
700
+ <code class="swatch-value">#D7E2FB</code>
701
+ </div>
702
+ </div>
703
+ </div>
704
+ <h3 class="subsection-title">Semantic Colors</h3>
705
+ <div class="swatch-grid">
706
+ <div class="swatch" onclick="copyColor('#FFFBEB')">
707
+ <div class="swatch-color" style="background: #FFFBEB"></div>
708
+ <div class="swatch-info">
709
+ <div class="swatch-name">Warning</div>
710
+ <code class="swatch-value">#FFFBEB</code>
711
+ </div>
712
+ </div>
713
+ <div class="swatch" onclick="copyColor('#CCC8BC')">
714
+ <div class="swatch-color" style="background: #CCC8BC"></div>
715
+ <div class="swatch-info">
716
+ <div class="swatch-name">Warning Active</div>
717
+ <code class="swatch-value">#CCC8BC</code>
718
+ </div>
719
+ </div>
720
+ <div class="swatch" onclick="copyColor('#FFFDF7')">
721
+ <div class="swatch-color" style="background: #FFFDF7"></div>
722
+ <div class="swatch-info">
723
+ <div class="swatch-name">Warning Disabled</div>
724
+ <code class="swatch-value">#FFFDF7</code>
725
+ </div>
726
+ </div>
727
+ <div class="swatch" onclick="copyColor('#E5E1D3')">
728
+ <div class="swatch-color" style="background: #E5E1D3"></div>
729
+ <div class="swatch-info">
730
+ <div class="swatch-name">Warning Hover</div>
731
+ <code class="swatch-value">#E5E1D3</code>
732
+ </div>
733
+ </div>
734
+ <div class="swatch" onclick="copyColor('#FFFEFA')">
735
+ <div class="swatch-color" style="background: #FFFEFA"></div>
736
+ <div class="swatch-info">
737
+ <div class="swatch-name">Warning Light Active</div>
738
+ <code class="swatch-value">#FFFEFA</code>
739
+ </div>
740
+ </div>
741
+ <div class="swatch" onclick="copyColor('#FFFEFC')">
742
+ <div class="swatch-color" style="background: #FFFEFC"></div>
743
+ <div class="swatch-info">
744
+ <div class="swatch-name">Warning Light Default</div>
745
+ <code class="swatch-value">#FFFEFC</code>
746
+ </div>
747
+ </div>
748
+ <div class="swatch" onclick="copyColor('#FFFEFB')">
749
+ <div class="swatch-color" style="background: #FFFEFB"></div>
750
+ <div class="swatch-info">
751
+ <div class="swatch-name">Warning Light Hover</div>
752
+ <code class="swatch-value">#FFFEFB</code>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ <h3 class="subsection-title">Surface Colors</h3>
757
+ <div class="swatch-grid">
758
+ <div class="swatch" onclick="copyColor('50%')">
759
+ <div class="swatch-color" style="background: 50%"></div>
760
+ <div class="swatch-info">
761
+ <div class="swatch-name"> Semi Border Radius Circle</div>
762
+ <code class="swatch-value">50%</code>
763
+ </div>
764
+ </div>
765
+ <div class="swatch" onclick="copyColor('3px')">
766
+ <div class="swatch-color" style="background: 3px"></div>
767
+ <div class="swatch-info">
768
+ <div class="swatch-name"> Semi Border Radius Extra Small</div>
769
+ <code class="swatch-value">3px</code>
770
+ </div>
771
+ </div>
772
+ <div class="swatch" onclick="copyColor('9999px')">
773
+ <div class="swatch-color" style="background: 9999px"></div>
774
+ <div class="swatch-info">
775
+ <div class="swatch-name"> Semi Border Radius Full</div>
776
+ <code class="swatch-value">9999px</code>
777
+ </div>
778
+ </div>
779
+ <div class="swatch" onclick="copyColor('16px')">
780
+ <div class="swatch-color" style="background: 16px"></div>
781
+ <div class="swatch-info">
782
+ <div class="swatch-name"> Semi Border Radius Large</div>
783
+ <code class="swatch-value">16px</code>
784
+ </div>
785
+ </div>
786
+ <div class="swatch" onclick="copyColor('8px')">
787
+ <div class="swatch-color" style="background: 8px"></div>
788
+ <div class="swatch-info">
789
+ <div class="swatch-name"> Semi Border Radius Medium</div>
790
+ <code class="swatch-value">8px</code>
791
+ </div>
792
+ </div>
793
+ <div class="swatch" onclick="copyColor('4px')">
794
+ <div class="swatch-color" style="background: 4px"></div>
795
+ <div class="swatch-info">
796
+ <div class="swatch-name"> Semi Border Radius Small</div>
797
+ <code class="swatch-value">4px</code>
798
+ </div>
799
+ </div>
800
+ <div class="swatch" onclick="copyColor('0')">
801
+ <div class="swatch-color" style="background: 0"></div>
802
+ <div class="swatch-info">
803
+ <div class="swatch-name"> Semi Border Thickness</div>
804
+ <code class="swatch-value">0</code>
805
+ </div>
806
+ </div>
807
+ <div class="swatch" onclick="copyColor('1px')">
808
+ <div class="swatch-color" style="background: 1px"></div>
809
+ <div class="swatch-info">
810
+ <div class="swatch-name"> Semi Border Thickness Control</div>
811
+ <code class="swatch-value">1px</code>
812
+ </div>
813
+ </div>
814
+ <div class="swatch" onclick="copyColor('1px')">
815
+ <div class="swatch-color" style="background: 1px"></div>
816
+ <div class="swatch-info">
817
+ <div class="swatch-name"> Semi Border Thickness Control Focus</div>
818
+ <code class="swatch-value">1px</code>
819
+ </div>
820
+ </div>
821
+ <div class="swatch" onclick="copyColor('#F3F4F6')">
822
+ <div class="swatch-color" style="background: #F3F4F6"></div>
823
+ <div class="swatch-info">
824
+ <div class="swatch-name">Bg 0</div>
825
+ <code class="swatch-value">#F3F4F6</code>
826
+ </div>
827
+ </div>
828
+ <div class="swatch" onclick="copyColor('#FFFFFF')">
829
+ <div class="swatch-color" style="background: #FFFFFF"></div>
830
+ <div class="swatch-info">
831
+ <div class="swatch-name">Bg 1</div>
832
+ <code class="swatch-value">#FFFFFF</code>
833
+ </div>
834
+ </div>
835
+ <div class="swatch" onclick="copyColor('#FFFFFF')">
836
+ <div class="swatch-color" style="background: #FFFFFF"></div>
837
+ <div class="swatch-info">
838
+ <div class="swatch-name">Bg 3</div>
839
+ <code class="swatch-value">#FFFFFF</code>
840
+ </div>
841
+ </div>
842
+ <div class="swatch" onclick="copyColor('#E5E7EB')">
843
+ <div class="swatch-color" style="background: #E5E7EB"></div>
844
+ <div class="swatch-info">
845
+ <div class="swatch-name">Border</div>
846
+ <code class="swatch-value">#E5E7EB</code>
847
+ </div>
848
+ </div>
849
+ <div class="swatch" onclick="copyColor('#E6E8EA')">
850
+ <div class="swatch-color" style="background: #E6E8EA"></div>
851
+ <div class="swatch-info">
852
+ <div class="swatch-name">Disabled Border</div>
853
+ <code class="swatch-value">#E6E8EA</code>
854
+ </div>
855
+ </div>
856
+ <div class="swatch" onclick="copyColor('#2463EB')">
857
+ <div class="swatch-color" style="background: #2463EB"></div>
858
+ <div class="swatch-info">
859
+ <div class="swatch-name">Focus Border</div>
860
+ <code class="swatch-value">#2463EB</code>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ <h3 class="subsection-title">Text Colors</h3>
865
+ <div class="swatch-grid">
866
+ <div class="swatch" onclick="copyColor('#111827')">
867
+ <div class="swatch-color" style="background: #111827"></div>
868
+ <div class="swatch-info">
869
+ <div class="swatch-name">Text 1</div>
870
+ <code class="swatch-value">#111827</code>
871
+ </div>
872
+ </div>
873
+ <div class="swatch" onclick="copyColor('#4B5563')">
874
+ <div class="swatch-color" style="background: #4B5563"></div>
875
+ <div class="swatch-info">
876
+ <div class="swatch-name">Text 2</div>
877
+ <code class="swatch-value">#4B5563</code>
878
+ </div>
879
+ </div>
880
+ </div>
881
+
882
+ <h3 class="subsection-title">Neutral Scale</h3>
883
+ <div class="neutral-grid">
884
+ <div class="neutral-swatch" onclick="copyColor('#ffffff')">
885
+ <div class="neutral-color" style="background: #ffffff"></div>
886
+ <div class="neutral-label">50</div>
887
+ <code class="neutral-hex">#ffffff</code>
888
+ </div>
889
+ <div class="neutral-swatch" onclick="copyColor('#f0f6ff')">
890
+ <div class="neutral-color" style="background: #f0f6ff"></div>
891
+ <div class="neutral-label">100</div>
892
+ <code class="neutral-hex">#f0f6ff</code>
893
+ </div>
894
+ <div class="neutral-swatch" onclick="copyColor('#e5e7eb')">
895
+ <div class="neutral-color" style="background: #e5e7eb"></div>
896
+ <div class="neutral-label">200</div>
897
+ <code class="neutral-hex">#e5e7eb</code>
898
+ </div>
899
+ <div class="neutral-swatch" onclick="copyColor('#e5e7eb')">
900
+ <div class="neutral-color" style="background: #e5e7eb"></div>
901
+ <div class="neutral-label">300</div>
902
+ <code class="neutral-hex">#e5e7eb</code>
903
+ </div>
904
+ <div class="neutral-swatch" onclick="copyColor('#d1d5db')">
905
+ <div class="neutral-color" style="background: #d1d5db"></div>
906
+ <div class="neutral-label">400</div>
907
+ <code class="neutral-hex">#d1d5db</code>
908
+ </div>
909
+ <div class="neutral-swatch" onclick="copyColor('#9ca3b0')">
910
+ <div class="neutral-color" style="background: #9ca3b0"></div>
911
+ <div class="neutral-label">500</div>
912
+ <code class="neutral-hex">#9ca3b0</code>
913
+ </div>
914
+ <div class="neutral-swatch" onclick="copyColor('#4b5563')">
915
+ <div class="neutral-color" style="background: #4b5563"></div>
916
+ <div class="neutral-label">600</div>
917
+ <code class="neutral-hex">#4b5563</code>
918
+ </div>
919
+ <div class="neutral-swatch" onclick="copyColor('#4b5563')">
920
+ <div class="neutral-color" style="background: #4b5563"></div>
921
+ <div class="neutral-label">700</div>
922
+ <code class="neutral-hex">#4b5563</code>
923
+ </div>
924
+ <div class="neutral-swatch" onclick="copyColor('#111827')">
925
+ <div class="neutral-color" style="background: #111827"></div>
926
+ <div class="neutral-label">800</div>
927
+ <code class="neutral-hex">#111827</code>
928
+ </div>
929
+ <div class="neutral-swatch" onclick="copyColor('#000000')">
930
+ <div class="neutral-color" style="background: #000000"></div>
931
+ <div class="neutral-label">900</div>
932
+ <code class="neutral-hex">#000000</code>
933
+ </div>
934
+ </div>
935
+ </section>
936
+
937
+ <!-- Section 3: Typography -->
938
+ <section class="section" id="typography">
939
+ <h2 class="section-title">🔤 Typography</h2>
940
+
941
+ <div class="type-specimens">
942
+ <div class="type-specimen">
943
+ <div class="type-label">Font Family</div>
944
+ <div class="type-sample" style="font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Inter, sans-serif">-apple-system</div>
945
+ <code>-apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Inter, sans-serif</code>
946
+ </div>
947
+ <div class="type-specimen">
948
+ <div class="type-label">Heading</div>
949
+ <div class="type-heading-sample" style="font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Inter, sans-serif">The quick brown fox jumps over the lazy dog</div>
950
+ </div>
951
+ <div class="type-specimen">
952
+ <div class="type-label">Body (12px)</div>
953
+ <div class="type-body-sample" style="font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Inter, sans-serif; font-size: 12px">
954
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
955
+ </div>
956
+ </div>
957
+ <div class="type-specimen">
958
+ <div class="type-label">Muted</div>
959
+ <div class="type-muted-sample" style="font-family: -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Inter, sans-serif; font-size: 12px">
960
+ Secondary text, captions, and supplementary information.
961
+ </div>
962
+ </div>
963
+ </div>
964
+ </section>
965
+
966
+ <!-- Section 4: Spacing -->
967
+ <section class="section" id="spacing">
968
+ <h2 class="section-title">📏 Spacing Scale</h2>
969
+
970
+ <div class="spacing-scale">
971
+ <div class="spacing-item">
972
+ <code class="spacing-value">4px</code>
973
+ <div class="spacing-bar" style="width: 4px; min-width: 4px"></div>
974
+ <span class="spacing-px">4</span>
975
+ </div>
976
+ <div class="spacing-item">
977
+ <code class="spacing-value">6px</code>
978
+ <div class="spacing-bar" style="width: 6px; min-width: 4px"></div>
979
+ <span class="spacing-px">6</span>
980
+ </div>
981
+ <div class="spacing-item">
982
+ <code class="spacing-value">8px</code>
983
+ <div class="spacing-bar" style="width: 8px; min-width: 4px"></div>
984
+ <span class="spacing-px">8</span>
985
+ </div>
986
+ <div class="spacing-item">
987
+ <code class="spacing-value">12px</code>
988
+ <div class="spacing-bar" style="width: 12px; min-width: 4px"></div>
989
+ <span class="spacing-px">12</span>
990
+ </div>
991
+ <div class="spacing-item">
992
+ <code class="spacing-value">15px</code>
993
+ <div class="spacing-bar" style="width: 15px; min-width: 4px"></div>
994
+ <span class="spacing-px">15</span>
995
+ </div>
996
+ <div class="spacing-item">
997
+ <code class="spacing-value">18px</code>
998
+ <div class="spacing-bar" style="width: 18px; min-width: 4px"></div>
999
+ <span class="spacing-px">18</span>
1000
+ </div>
1001
+ <div class="spacing-item">
1002
+ <code class="spacing-value">24px</code>
1003
+ <div class="spacing-bar" style="width: 24px; min-width: 4px"></div>
1004
+ <span class="spacing-px">24</span>
1005
+ </div>
1006
+ </div>
1007
+ </section>
1008
+
1009
+ <!-- Section 5: Geometry -->
1010
+ <section class="section" id="geometry">
1011
+ <h2 class="section-title">📐 Geometry</h2>
1012
+
1013
+ <div class="geo-grid">
1014
+ <div class="geo-item">
1015
+ <div class="geo-preview" style="border-radius: #000000"></div>
1016
+ <div class="geo-info">
1017
+ <div class="geo-label">Color Black</div>
1018
+ <code>#000000</code>
1019
+ </div>
1020
+ </div>
1021
+ <div class="geo-item">
1022
+ <div class="geo-preview" style="border-radius: #3566D1"></div>
1023
+ <div class="geo-info">
1024
+ <div class="geo-label">Color Data 0</div>
1025
+ <code>#3566D1</code>
1026
+ </div>
1027
+ </div>
1028
+ <div class="geo-item">
1029
+ <div class="geo-preview" style="border-radius: #2225DE"></div>
1030
+ <div class="geo-info">
1031
+ <div class="geo-label">Color Data 1</div>
1032
+ <code>#2225DE</code>
1033
+ </div>
1034
+ </div>
1035
+ <div class="geo-item">
1036
+ <div class="geo-preview" style="border-radius: #EBAB24"></div>
1037
+ <div class="geo-info">
1038
+ <div class="geo-label">Color Data 10</div>
1039
+ <code>#EBAB24</code>
1040
+ </div>
1041
+ </div>
1042
+ <div class="geo-item">
1043
+ <div class="geo-preview" style="border-radius: #F7F30D"></div>
1044
+ <div class="geo-info">
1045
+ <div class="geo-label">Color Data 11</div>
1046
+ <code>#F7F30D</code>
1047
+ </div>
1048
+ </div>
1049
+ <div class="geo-item">
1050
+ <div class="geo-preview" style="border-radius: #A5D135"></div>
1051
+ <div class="geo-info">
1052
+ <div class="geo-label">Color Data 12</div>
1053
+ <code>#A5D135</code>
1054
+ </div>
1055
+ </div>
1056
+ <div class="geo-item">
1057
+ <div class="geo-preview" style="border-radius: #70DE22"></div>
1058
+ <div class="geo-info">
1059
+ <div class="geo-label">Color Data 13</div>
1060
+ <code>#70DE22</code>
1061
+ </div>
1062
+ </div>
1063
+ <div class="geo-item">
1064
+ <div class="geo-preview" style="border-radius: #26EB0C"></div>
1065
+ <div class="geo-info">
1066
+ <div class="geo-label">Color Data 14</div>
1067
+ <code>#26EB0C</code>
1068
+ </div>
1069
+ </div>
1070
+ <div class="geo-item">
1071
+ <div class="geo-preview" style="border-radius: #3EF760"></div>
1072
+ <div class="geo-info">
1073
+ <div class="geo-label">Color Data 15</div>
1074
+ <code>#3EF760</code>
1075
+ </div>
1076
+ </div>
1077
+ <div class="geo-item">
1078
+ <div class="geo-preview" style="border-radius: #20D175"></div>
1079
+ <div class="geo-info">
1080
+ <div class="geo-label">Color Data 16</div>
1081
+ <code>#20D175</code>
1082
+ </div>
1083
+ </div>
1084
+ <div class="geo-item">
1085
+ <div class="geo-preview" style="border-radius: #0BDEB0"></div>
1086
+ <div class="geo-info">
1087
+ <div class="geo-label">Color Data 17</div>
1088
+ <code>#0BDEB0</code>
1089
+ </div>
1090
+ </div>
1091
+ <div class="geo-item">
1092
+ <div class="geo-preview" style="border-radius: #3BDCEB"></div>
1093
+ <div class="geo-info">
1094
+ <div class="geo-label">Color Data 18</div>
1095
+ <code>#3BDCEB</code>
1096
+ </div>
1097
+ </div>
1098
+ <div class="geo-item">
1099
+ <div class="geo-preview" style="border-radius: #25A7F7"></div>
1100
+ <div class="geo-info">
1101
+ <div class="geo-label">Color Data 19</div>
1102
+ <code>#25A7F7</code>
1103
+ </div>
1104
+ </div>
1105
+ <div class="geo-item">
1106
+ <div class="geo-preview" style="border-radius: #4B0CEB"></div>
1107
+ <div class="geo-info">
1108
+ <div class="geo-label">Color Data 2</div>
1109
+ <code>#4B0CEB</code>
1110
+ </div>
1111
+ </div>
1112
+ <div class="geo-item">
1113
+ <div class="geo-preview" style="border-radius: #AA3EF7"></div>
1114
+ <div class="geo-info">
1115
+ <div class="geo-label">Color Data 3</div>
1116
+ <code>#AA3EF7</code>
1117
+ </div>
1118
+ </div>
1119
+ <div class="geo-item">
1120
+ <div class="geo-preview" style="border-radius: #BC20D1"></div>
1121
+ <div class="geo-info">
1122
+ <div class="geo-label">Color Data 4</div>
1123
+ <code>#BC20D1</code>
1124
+ </div>
1125
+ </div>
1126
+ <div class="geo-item">
1127
+ <div class="geo-preview" style="border-radius: #DE0BB7"></div>
1128
+ <div class="geo-info">
1129
+ <div class="geo-label">Color Data 5</div>
1130
+ <code>#DE0BB7</code>
1131
+ </div>
1132
+ </div>
1133
+ <div class="geo-item">
1134
+ <div class="geo-preview" style="border-radius: #EB3B96"></div>
1135
+ <div class="geo-info">
1136
+ <div class="geo-label">Color Data 6</div>
1137
+ <code>#EB3B96</code>
1138
+ </div>
1139
+ </div>
1140
+ <div class="geo-item">
1141
+ <div class="geo-preview" style="border-radius: #F72553"></div>
1142
+ <div class="geo-info">
1143
+ <div class="geo-label">Color Data 7</div>
1144
+ <code>#F72553</code>
1145
+ </div>
1146
+ </div>
1147
+ <div class="geo-item">
1148
+ <div class="geo-preview" style="border-radius: #D11B0B"></div>
1149
+ <div class="geo-info">
1150
+ <div class="geo-label">Color Data 8</div>
1151
+ <code>#D11B0B</code>
1152
+ </div>
1153
+ </div>
1154
+ <div class="geo-item">
1155
+ <div class="geo-preview" style="border-radius: #DE7738"></div>
1156
+ <div class="geo-info">
1157
+ <div class="geo-label">Color Data 9</div>
1158
+ <code>#DE7738</code>
1159
+ </div>
1160
+ </div>
1161
+ <div class="geo-item">
1162
+ <div class="geo-preview" style="border-radius: #F9F9F9"></div>
1163
+ <div class="geo-info">
1164
+ <div class="geo-label">Color Default</div>
1165
+ <code>#F9F9F9</code>
1166
+ </div>
1167
+ </div>
1168
+ <div class="geo-item">
1169
+ <div class="geo-preview" style="border-radius: #EAEAEA"></div>
1170
+ <div class="geo-info">
1171
+ <div class="geo-label">Color Default Active</div>
1172
+ <code>#EAEAEA</code>
1173
+ </div>
1174
+ </div>
1175
+ <div class="geo-item">
1176
+ <div class="geo-preview" style="border-radius: #F1F1F1"></div>
1177
+ <div class="geo-info">
1178
+ <div class="geo-label">Color Default Hover</div>
1179
+ <code>#F1F1F1</code>
1180
+ </div>
1181
+ </div>
1182
+ <div class="geo-item">
1183
+ <div class="geo-preview" style="border-radius: #E6E8EA"></div>
1184
+ <div class="geo-info">
1185
+ <div class="geo-label">Color Disabled Bg</div>
1186
+ <code>#E6E8EA</code>
1187
+ </div>
1188
+ </div>
1189
+ <div class="geo-item">
1190
+ <div class="geo-preview" style="border-radius: rgba(46, 50, 56, 0.04)"></div>
1191
+ <div class="geo-info">
1192
+ <div class="geo-label">Color Disabled Fill</div>
1193
+ <code>rgba(46, 50, 56, 0.04)</code>
1194
+ </div>
1195
+ </div>
1196
+ <div class="geo-item">
1197
+ <div class="geo-preview" style="border-radius: rgba(28, 31, 35, 0.35)"></div>
1198
+ <div class="geo-info">
1199
+ <div class="geo-label">Color Disabled Text</div>
1200
+ <code>rgba(28, 31, 35, 0.35)</code>
1201
+ </div>
1202
+ </div>
1203
+ <div class="geo-item">
1204
+ <div class="geo-preview" style="border-radius: #F3F4F6"></div>
1205
+ <div class="geo-info">
1206
+ <div class="geo-label">Color Fill 1</div>
1207
+ <code>#F3F4F6</code>
1208
+ </div>
1209
+ </div>
1210
+ <div class="geo-item">
1211
+ <div class="geo-preview" style="border-radius: #FFFFFF"></div>
1212
+ <div class="geo-info">
1213
+ <div class="geo-label">Color Fill 2</div>
1214
+ <code>#FFFFFF</code>
1215
+ </div>
1216
+ </div>
1217
+ <div class="geo-item">
1218
+ <div class="geo-preview" style="border-radius: #000000"></div>
1219
+ <div class="geo-info">
1220
+ <div class="geo-label">Color Highlight</div>
1221
+ <code>#000000</code>
1222
+ </div>
1223
+ </div>
1224
+ <div class="geo-item">
1225
+ <div class="geo-preview" style="border-radius: #F0C000"></div>
1226
+ <div class="geo-info">
1227
+ <div class="geo-label">Color Highlight Bg</div>
1228
+ <code>#F0C000</code>
1229
+ </div>
1230
+ </div>
1231
+ <div class="geo-item">
1232
+ <div class="geo-preview" style="border-radius: #000000"></div>
1233
+ <div class="geo-info">
1234
+ <div class="geo-label">Color Info</div>
1235
+ <code>#000000</code>
1236
+ </div>
1237
+ </div>
1238
+ <div class="geo-item">
1239
+ <div class="geo-preview" style="border-radius: #000000"></div>
1240
+ <div class="geo-info">
1241
+ <div class="geo-label">Color Info Active</div>
1242
+ <code>#000000</code>
1243
+ </div>
1244
+ </div>
1245
+ <div class="geo-item">
1246
+ <div class="geo-preview" style="border-radius: #999999"></div>
1247
+ <div class="geo-info">
1248
+ <div class="geo-label">Color Info Disabled</div>
1249
+ <code>#999999</code>
1250
+ </div>
1251
+ </div>
1252
+ <div class="geo-item">
1253
+ <div class="geo-preview" style="border-radius: #000000"></div>
1254
+ <div class="geo-info">
1255
+ <div class="geo-label">Color Info Hover</div>
1256
+ <code>#000000</code>
1257
+ </div>
1258
+ </div>
1259
+ <div class="geo-item">
1260
+ <div class="geo-preview" style="border-radius: #BFBFBF"></div>
1261
+ <div class="geo-info">
1262
+ <div class="geo-label">Color Info Light Active</div>
1263
+ <code>#BFBFBF</code>
1264
+ </div>
1265
+ </div>
1266
+ <div class="geo-item">
1267
+ <div class="geo-preview" style="border-radius: #E0E0E0"></div>
1268
+ <div class="geo-info">
1269
+ <div class="geo-label">Color Info Light Default</div>
1270
+ <code>#E0E0E0</code>
1271
+ </div>
1272
+ </div>
1273
+ <div class="geo-item">
1274
+ <div class="geo-preview" style="border-radius: #D1D1D1"></div>
1275
+ <div class="geo-info">
1276
+ <div class="geo-label">Color Info Light Hover</div>
1277
+ <code>#D1D1D1</code>
1278
+ </div>
1279
+ </div>
1280
+ <div class="geo-item">
1281
+ <div class="geo-preview" style="border-radius: #2463EB"></div>
1282
+ <div class="geo-info">
1283
+ <div class="geo-label">Color Link</div>
1284
+ <code>#2463EB</code>
1285
+ </div>
1286
+ </div>
1287
+ <div class="geo-item">
1288
+ <div class="geo-preview" style="border-radius: #1C4FBC"></div>
1289
+ <div class="geo-info">
1290
+ <div class="geo-label">Color Link Active</div>
1291
+ <code>#1C4FBC</code>
1292
+ </div>
1293
+ </div>
1294
+ <div class="geo-item">
1295
+ <div class="geo-preview" style="border-radius: #2059D3"></div>
1296
+ <div class="geo-info">
1297
+ <div class="geo-label">Color Link Hover</div>
1298
+ <code>#2059D3</code>
1299
+ </div>
1300
+ </div>
1301
+ <div class="geo-item">
1302
+ <div class="geo-preview" style="border-radius: #2463EB"></div>
1303
+ <div class="geo-info">
1304
+ <div class="geo-label">Color Link Visited</div>
1305
+ <code>#2463EB</code>
1306
+ </div>
1307
+ </div>
1308
+ <div class="geo-item">
1309
+ <div class="geo-preview" style="border-radius: #FFFFFF"></div>
1310
+ <div class="geo-info">
1311
+ <div class="geo-label">Color Nav Bg</div>
1312
+ <code>#FFFFFF</code>
1313
+ </div>
1314
+ </div>
1315
+ <div class="geo-item">
1316
+ <div class="geo-preview" style="border-radius: #F0F6FF"></div>
1317
+ <div class="geo-info">
1318
+ <div class="geo-label">Color Neutral 100</div>
1319
+ <code>#F0F6FF</code>
1320
+ </div>
1321
+ </div>
1322
+ <div class="geo-item">
1323
+ <div class="geo-preview" style="border-radius: #E5E7EB"></div>
1324
+ <div class="geo-info">
1325
+ <div class="geo-label">Color Neutral 200</div>
1326
+ <code>#E5E7EB</code>
1327
+ </div>
1328
+ </div>
1329
+ <div class="geo-item">
1330
+ <div class="geo-preview" style="border-radius: #E5E7EB"></div>
1331
+ <div class="geo-info">
1332
+ <div class="geo-label">Color Neutral 300</div>
1333
+ <code>#E5E7EB</code>
1334
+ </div>
1335
+ </div>
1336
+ <div class="geo-item">
1337
+ <div class="geo-preview" style="border-radius: #D1D5DB"></div>
1338
+ <div class="geo-info">
1339
+ <div class="geo-label">Color Neutral 400</div>
1340
+ <code>#D1D5DB</code>
1341
+ </div>
1342
+ </div>
1343
+ <div class="geo-item">
1344
+ <div class="geo-preview" style="border-radius: #FFFFFF"></div>
1345
+ <div class="geo-info">
1346
+ <div class="geo-label">Color Neutral 50</div>
1347
+ <code>#FFFFFF</code>
1348
+ </div>
1349
+ </div>
1350
+ <div class="geo-item">
1351
+ <div class="geo-preview" style="border-radius: #9CA3B0"></div>
1352
+ <div class="geo-info">
1353
+ <div class="geo-label">Color Neutral 500</div>
1354
+ <code>#9CA3B0</code>
1355
+ </div>
1356
+ </div>
1357
+ <div class="geo-item">
1358
+ <div class="geo-preview" style="border-radius: #4B5563"></div>
1359
+ <div class="geo-info">
1360
+ <div class="geo-label">Color Neutral 600</div>
1361
+ <code>#4B5563</code>
1362
+ </div>
1363
+ </div>
1364
+ <div class="geo-item">
1365
+ <div class="geo-preview" style="border-radius: #4B5563"></div>
1366
+ <div class="geo-info">
1367
+ <div class="geo-label">Color Neutral 700</div>
1368
+ <code>#4B5563</code>
1369
+ </div>
1370
+ </div>
1371
+ <div class="geo-item">
1372
+ <div class="geo-preview" style="border-radius: #111827"></div>
1373
+ <div class="geo-info">
1374
+ <div class="geo-label">Color Neutral 800</div>
1375
+ <code>#111827</code>
1376
+ </div>
1377
+ </div>
1378
+ <div class="geo-item">
1379
+ <div class="geo-preview" style="border-radius: #000000"></div>
1380
+ <div class="geo-info">
1381
+ <div class="geo-label">Color Neutral 900</div>
1382
+ <code>#000000</code>
1383
+ </div>
1384
+ </div>
1385
+ <div class="geo-item">
1386
+ <div class="geo-preview" style="border-radius: rgba(22, 22, 26, 0.6)"></div>
1387
+ <div class="geo-info">
1388
+ <div class="geo-label">Color Overlay Bg</div>
1389
+ <code>rgba(22, 22, 26, 0.6)</code>
1390
+ </div>
1391
+ </div>
1392
+ <div class="geo-item">
1393
+ <div class="geo-preview" style="border-radius: #447AEE"></div>
1394
+ <div class="geo-info">
1395
+ <div class="geo-label">Color Secondary</div>
1396
+ <code>#447AEE</code>
1397
+ </div>
1398
+ </div>
1399
+ <div class="geo-item">
1400
+ <div class="geo-preview" style="border-radius: #3661BE"></div>
1401
+ <div class="geo-info">
1402
+ <div class="geo-label">Color Secondary Active</div>
1403
+ <code>#3661BE</code>
1404
+ </div>
1405
+ </div>
1406
+ <div class="geo-item">
1407
+ <div class="geo-preview" style="border-radius: #B4C9F8"></div>
1408
+ <div class="geo-info">
1409
+ <div class="geo-label">Color Secondary Disabled</div>
1410
+ <code>#B4C9F8</code>
1411
+ </div>
1412
+ </div>
1413
+ <div class="geo-item">
1414
+ <div class="geo-preview" style="border-radius: #3D6DD6"></div>
1415
+ <div class="geo-info">
1416
+ <div class="geo-label">Color Secondary Hover</div>
1417
+ <code>#3D6DD6</code>
1418
+ </div>
1419
+ </div>
1420
+ <div class="geo-item">
1421
+ <div class="geo-preview" style="border-radius: #D0DDFA"></div>
1422
+ <div class="geo-info">
1423
+ <div class="geo-label">Color Secondary Light Active</div>
1424
+ <code>#D0DDFA</code>
1425
+ </div>
1426
+ </div>
1427
+ <div class="geo-item">
1428
+ <div class="geo-preview" style="border-radius: #E8EFFC"></div>
1429
+ <div class="geo-info">
1430
+ <div class="geo-label">Color Secondary Light Default</div>
1431
+ <code>#E8EFFC</code>
1432
+ </div>
1433
+ </div>
1434
+ <div class="geo-item">
1435
+ <div class="geo-preview" style="border-radius: #DDE7FB"></div>
1436
+ <div class="geo-info">
1437
+ <div class="geo-label">Color Secondary Light Hover</div>
1438
+ <code>#DDE7FB</code>
1439
+ </div>
1440
+ </div>
1441
+ <div class="geo-item">
1442
+ <div class="geo-preview" style="border-radius: #6B7075"></div>
1443
+ <div class="geo-info">
1444
+ <div class="geo-label">Color Tertiary</div>
1445
+ <code>#6B7075</code>
1446
+ </div>
1447
+ </div>
1448
+ <div class="geo-item">
1449
+ <div class="geo-preview" style="border-radius: #55595D"></div>
1450
+ <div class="geo-info">
1451
+ <div class="geo-label">Color Tertiary Active</div>
1452
+ <code>#55595D</code>
1453
+ </div>
1454
+ </div>
1455
+ <div class="geo-item">
1456
+ <div class="geo-preview" style="border-radius: #C3C5C7"></div>
1457
+ <div class="geo-info">
1458
+ <div class="geo-label">Color Tertiary Disabled</div>
1459
+ <code>#C3C5C7</code>
1460
+ </div>
1461
+ </div>
1462
+ <div class="geo-item">
1463
+ <div class="geo-preview" style="border-radius: #606469"></div>
1464
+ <div class="geo-info">
1465
+ <div class="geo-label">Color Tertiary Hover</div>
1466
+ <code>#606469</code>
1467
+ </div>
1468
+ </div>
1469
+ <div class="geo-item">
1470
+ <div class="geo-preview" style="border-radius: #DADBDC"></div>
1471
+ <div class="geo-info">
1472
+ <div class="geo-label">Color Tertiary Light Active</div>
1473
+ <code>#DADBDC</code>
1474
+ </div>
1475
+ </div>
1476
+ <div class="geo-item">
1477
+ <div class="geo-preview" style="border-radius: #EDEDEE"></div>
1478
+ <div class="geo-info">
1479
+ <div class="geo-label">Color Tertiary Light Default</div>
1480
+ <code>#EDEDEE</code>
1481
+ </div>
1482
+ </div>
1483
+ <div class="geo-item">
1484
+ <div class="geo-preview" style="border-radius: #E4E5E6"></div>
1485
+ <div class="geo-info">
1486
+ <div class="geo-label">Color Tertiary Light Hover</div>
1487
+ <code>#E4E5E6</code>
1488
+ </div>
1489
+ </div>
1490
+ <div class="geo-item">
1491
+ <div class="geo-preview" style="border-radius: #FFFFFF"></div>
1492
+ <div class="geo-info">
1493
+ <div class="geo-label">Color White</div>
1494
+ <code>#FFFFFF</code>
1495
+ </div>
1496
+ </div>
1497
+ <div class="geo-item">
1498
+ <div class="geo-preview" style="border-radius: 255,255,255"></div>
1499
+ <div class="geo-info">
1500
+ <div class="geo-label">Grey 0</div>
1501
+ <code>255,255,255</code>
1502
+ </div>
1503
+ </div>
1504
+ <div class="geo-item">
1505
+ <div class="geo-preview" style="border-radius: 240,246,255"></div>
1506
+ <div class="geo-info">
1507
+ <div class="geo-label">Grey 1</div>
1508
+ <code>240,246,255</code>
1509
+ </div>
1510
+ </div>
1511
+ <div class="geo-item">
1512
+ <div class="geo-preview" style="border-radius: 229,231,235"></div>
1513
+ <div class="geo-info">
1514
+ <div class="geo-label">Grey 2</div>
1515
+ <code>229,231,235</code>
1516
+ </div>
1517
+ </div>
1518
+ <div class="geo-item">
1519
+ <div class="geo-preview" style="border-radius: 229,231,235"></div>
1520
+ <div class="geo-info">
1521
+ <div class="geo-label">Grey 3</div>
1522
+ <code>229,231,235</code>
1523
+ </div>
1524
+ </div>
1525
+ <div class="geo-item">
1526
+ <div class="geo-preview" style="border-radius: 209,213,219"></div>
1527
+ <div class="geo-info">
1528
+ <div class="geo-label">Grey 4</div>
1529
+ <code>209,213,219</code>
1530
+ </div>
1531
+ </div>
1532
+ <div class="geo-item">
1533
+ <div class="geo-preview" style="border-radius: 156,163,176"></div>
1534
+ <div class="geo-info">
1535
+ <div class="geo-label">Grey 5</div>
1536
+ <code>156,163,176</code>
1537
+ </div>
1538
+ </div>
1539
+ <div class="geo-item">
1540
+ <div class="geo-preview" style="border-radius: 75,85,99"></div>
1541
+ <div class="geo-info">
1542
+ <div class="geo-label">Grey 6</div>
1543
+ <code>75,85,99</code>
1544
+ </div>
1545
+ </div>
1546
+ <div class="geo-item">
1547
+ <div class="geo-preview" style="border-radius: 75,85,99"></div>
1548
+ <div class="geo-info">
1549
+ <div class="geo-label">Grey 7</div>
1550
+ <code>75,85,99</code>
1551
+ </div>
1552
+ </div>
1553
+ <div class="geo-item">
1554
+ <div class="geo-preview" style="border-radius: 17,24,39"></div>
1555
+ <div class="geo-info">
1556
+ <div class="geo-label">Grey 8</div>
1557
+ <code>17,24,39</code>
1558
+ </div>
1559
+ </div>
1560
+ <div class="geo-item">
1561
+ <div class="geo-preview" style="border-radius: 0,0,0"></div>
1562
+ <div class="geo-info">
1563
+ <div class="geo-label">Grey 9</div>
1564
+ <code>0,0,0</code>
1565
+ </div>
1566
+ </div>
1567
+ <div class="geo-item">
1568
+ <div class="geo-preview" style="border-radius: 32px"></div>
1569
+ <div class="geo-info">
1570
+ <div class="geo-label">Height Control Default</div>
1571
+ <code>32px</code>
1572
+ </div>
1573
+ </div>
1574
+ <div class="geo-item">
1575
+ <div class="geo-preview" style="border-radius: 40px"></div>
1576
+ <div class="geo-info">
1577
+ <div class="geo-label">Height Control Large</div>
1578
+ <code>40px</code>
1579
+ </div>
1580
+ </div>
1581
+ <div class="geo-item">
1582
+ <div class="geo-preview" style="border-radius: 24px"></div>
1583
+ <div class="geo-info">
1584
+ <div class="geo-label">Height Control Small</div>
1585
+ <code>24px</code>
1586
+ </div>
1587
+ </div>
1588
+ <div class="geo-item">
1589
+ <div class="geo-preview" style="border-radius: none"></div>
1590
+ <div class="geo-info">
1591
+ <div class="geo-label">Layout Content Max Width</div>
1592
+ <code>none</code>
1593
+ </div>
1594
+ </div>
1595
+ <div class="geo-item">
1596
+ <div class="geo-preview" style="border-radius: 24px"></div>
1597
+ <div class="geo-info">
1598
+ <div class="geo-label">Layout Content Padding</div>
1599
+ <code>24px</code>
1600
+ </div>
1601
+ </div>
1602
+ <div class="geo-item">
1603
+ <div class="geo-preview" style="border-radius: 56px"></div>
1604
+ <div class="geo-info">
1605
+ <div class="geo-label">Layout Header Height</div>
1606
+ <code>56px</code>
1607
+ </div>
1608
+ </div>
1609
+ <div class="geo-item">
1610
+ <div class="geo-preview" style="border-radius: 18px"></div>
1611
+ <div class="geo-info">
1612
+ <div class="geo-label">Line Height Regular</div>
1613
+ <code>18px</code>
1614
+ </div>
1615
+ </div>
1616
+ <div class="geo-item">
1617
+ <div class="geo-preview" style="border-radius: 15px"></div>
1618
+ <div class="geo-info">
1619
+ <div class="geo-label">Spacing Base</div>
1620
+ <code>15px</code>
1621
+ </div>
1622
+ </div>
1623
+ <div class="geo-item">
1624
+ <div class="geo-preview" style="border-radius: 18px"></div>
1625
+ <div class="geo-info">
1626
+ <div class="geo-label">Spacing Base Loose</div>
1627
+ <code>18px</code>
1628
+ </div>
1629
+ </div>
1630
+ <div class="geo-item">
1631
+ <div class="geo-preview" style="border-radius: 12px"></div>
1632
+ <div class="geo-info">
1633
+ <div class="geo-label">Spacing Base Tight</div>
1634
+ <code>12px</code>
1635
+ </div>
1636
+ </div>
1637
+ <div class="geo-item">
1638
+ <div class="geo-preview" style="border-radius: 24px"></div>
1639
+ <div class="geo-info">
1640
+ <div class="geo-label">Spacing Extra Loose</div>
1641
+ <code>24px</code>
1642
+ </div>
1643
+ </div>
1644
+ <div class="geo-item">
1645
+ <div class="geo-preview" style="border-radius: 4px"></div>
1646
+ <div class="geo-info">
1647
+ <div class="geo-label">Spacing Extra Tight</div>
1648
+ <code>4px</code>
1649
+ </div>
1650
+ </div>
1651
+ <div class="geo-item">
1652
+ <div class="geo-preview" style="border-radius: 24px"></div>
1653
+ <div class="geo-info">
1654
+ <div class="geo-label">Spacing Loose</div>
1655
+ <code>24px</code>
1656
+ </div>
1657
+ </div>
1658
+ <div class="geo-item">
1659
+ <div class="geo-preview" style="border-radius: 4px"></div>
1660
+ <div class="geo-info">
1661
+ <div class="geo-label">Spacing None</div>
1662
+ <code>4px</code>
1663
+ </div>
1664
+ </div>
1665
+ <div class="geo-item">
1666
+ <div class="geo-preview" style="border-radius: 40px"></div>
1667
+ <div class="geo-info">
1668
+ <div class="geo-label">Spacing Super Loose</div>
1669
+ <code>40px</code>
1670
+ </div>
1671
+ </div>
1672
+ <div class="geo-item">
1673
+ <div class="geo-preview" style="border-radius: 4px"></div>
1674
+ <div class="geo-info">
1675
+ <div class="geo-label">Spacing Super Tight</div>
1676
+ <code>4px</code>
1677
+ </div>
1678
+ </div>
1679
+ <div class="geo-item">
1680
+ <div class="geo-preview" style="border-radius: 8px"></div>
1681
+ <div class="geo-info">
1682
+ <div class="geo-label">Spacing Tight</div>
1683
+ <code>8px</code>
1684
+ </div>
1685
+ </div>
1686
+ <div class="geo-item">
1687
+ <div class="geo-preview" style="border-radius: 24px"></div>
1688
+ <div class="geo-info">
1689
+ <div class="geo-label">Width Icon Extra Large</div>
1690
+ <code>24px</code>
1691
+ </div>
1692
+ </div>
1693
+ <div class="geo-item">
1694
+ <div class="geo-preview" style="border-radius: 8px"></div>
1695
+ <div class="geo-info">
1696
+ <div class="geo-label">Width Icon Extra Small</div>
1697
+ <code>8px</code>
1698
+ </div>
1699
+ </div>
1700
+ <div class="geo-item">
1701
+ <div class="geo-preview" style="border-radius: 20px"></div>
1702
+ <div class="geo-info">
1703
+ <div class="geo-label">Width Icon Large</div>
1704
+ <code>20px</code>
1705
+ </div>
1706
+ </div>
1707
+ <div class="geo-item">
1708
+ <div class="geo-preview" style="border-radius: 16px"></div>
1709
+ <div class="geo-info">
1710
+ <div class="geo-label">Width Icon Medium</div>
1711
+ <code>16px</code>
1712
+ </div>
1713
+ </div>
1714
+ <div class="geo-item">
1715
+ <div class="geo-preview" style="border-radius: 12px"></div>
1716
+ <div class="geo-info">
1717
+ <div class="geo-label">Width Icon Small</div>
1718
+ <code>12px</code>
1719
+ </div>
1720
+ </div>
1721
+ <div class="geo-item">
1722
+ <div class="geo-preview geo-shadow" style="box-shadow: rgba(0, 0, 0, 0.04)"></div>
1723
+ <div class="geo-info">
1724
+ <div class="geo-label">Color Shadow</div>
1725
+ <code>rgba(0, 0, 0, 0.04)</code>
1726
+ </div>
1727
+ </div>
1728
+ <div class="geo-item">
1729
+ <div class="geo-preview geo-shadow" style="box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 0px 0px"></div>
1730
+ <div class="geo-info">
1731
+ <div class="geo-label">Shadow Elevated</div>
1732
+ <code>rgba(0, 0, 0, 0.12) 0px 1px 0px 0px</code>
1733
+ </div>
1734
+ </div>
1735
+ <div class="geo-item">
1736
+ <div class="geo-preview geo-shadow" style="box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px"></div>
1737
+ <div class="geo-info">
1738
+ <div class="geo-label">Shadow Sm</div>
1739
+ <code>rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px</code>
1740
+ </div>
1741
+ </div>
1742
+ </div>
1743
+ </section>
1744
+
1745
+ <!-- Section 6: Layout -->
1746
+ <section class="section" id="layout">
1747
+ <h2 class="section-title">📱 Layout Blueprint</h2>
1748
+
1749
+ <div class="layout-blueprint">
1750
+ <div class="layout-diagram">
1751
+ <div class="layout-sidebar" style="width: 120px">
1752
+ <div class="layout-metric-label">Sidebar</div>
1753
+ <code>256px</code>
1754
+ </div>
1755
+ <div class="layout-main-area">
1756
+ <div class="layout-header" style="height: 40px">
1757
+ <div class="layout-metric-label">Header</div>
1758
+ <code>56px</code>
1759
+ </div>
1760
+ <div class="layout-content">
1761
+ <div class="layout-metric-label">Content</div>
1762
+ <code>max-width: none</code>
1763
+ <code>padding: 24px</code>
1764
+ <code>gap: 16px</code>
1765
+ </div>
1766
+ </div>
1767
+ </div>
1768
+ </div>
1769
+ <div class="layout-tokens">
1770
+ <div class="geo-grid">
1771
+ <div class="geo-item"><div class="geo-info"><div class="geo-label">Sidebar Width</div><code>256px</code></div></div>
1772
+ <div class="geo-item"><div class="geo-info"><div class="geo-label">Header Height</div><code>56px</code></div></div>
1773
+ <div class="geo-item"><div class="geo-info"><div class="geo-label">Content Max Width</div><code>none</code></div></div>
1774
+ <div class="geo-item"><div class="geo-info"><div class="geo-label">Content Padding</div><code>24px</code></div></div>
1775
+ <div class="geo-item"><div class="geo-info"><div class="geo-label">Grid Gap</div><code>16px</code></div></div>
1776
+ </div>
1777
+ </div>
1778
+ </section>
1779
+
1780
+ <!-- Section 7: Components Preview -->
1781
+ <section class="section" id="components">
1782
+ <h2 class="section-title">🧱 Components Preview</h2>
1783
+
1784
+ <div class="component-grid">
1785
+ <!-- Buttons -->
1786
+ <div class="component-card">
1787
+ <h4>Buttons</h4>
1788
+ <div class="component-row">
1789
+ <button class="comp-btn comp-btn-primary" style="background:rgb(36, 99, 235); border-radius:8px; color:rgb(255, 255, 255); padding:8px 16px">Primary</button>
1790
+ <button class="comp-btn comp-btn-outline" style="border: 1px solid #E5E7EB; border-radius:8px; color:rgb(75, 85, 99); background:rgb(255, 255, 255)">Secondary</button>
1791
+ <button class="comp-btn comp-btn-danger" style="background:#EF4444; border-radius:8px; color:#fff">Danger</button>
1792
+ </div>
1793
+ <div class="component-row" style="margin-top:8px">
1794
+ <button class="comp-btn" style="background:#10B981; border-radius:8px; color:#fff; padding:6px 12px; font-size:12px">Small</button>
1795
+ <button class="comp-btn" style="background:#2463EB; border-radius:8px; color:#fff; padding:8px 16px">Medium</button>
1796
+ <button class="comp-btn" style="background:#2463EB; border-radius:8px; color:#fff; padding:12px 24px; font-size:16px">Large</button>
1797
+ </div>
1798
+ </div>
1799
+
1800
+ <!-- Card -->
1801
+ <div class="component-card">
1802
+ <h4>Card</h4>
1803
+ <div class="comp-card-preview" style="background:#FFFFFF; border-radius:16px; box-shadow:rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px; border:1px solid #E5E7EB; padding:20px">
1804
+ <div class="comp-card-title" style="color:#111827">Card Title</div>
1805
+ <div class="comp-card-body" style="color:#111827">Card content with extracted design tokens applied.</div>
1806
+ </div>
1807
+ </div>
1808
+
1809
+ <!-- Input + Forms -->
1810
+ <div class="component-card">
1811
+ <h4>Form Elements</h4>
1812
+ <input type="text" class="comp-input" placeholder="Text input..." style="border: 1px solid #E5E7EB; border-radius:8px; color:#111827; padding:8px 12px; margin-bottom:8px">
1813
+ <div class="component-row">
1814
+ <select style="border:1px solid #E5E7EB; border-radius:8px; padding:8px 12px; background:#FFFFFF; color:#111827; font-size:14px; flex:1">
1815
+ <option>Select option</option>
1816
+ </select>
1817
+ </div>
1818
+ </div>
1819
+
1820
+ <!-- Table -->
1821
+ <div class="component-card" style="grid-column: span 2">
1822
+ <h4>Table</h4>
1823
+ <div style="overflow-x:auto; border:1px solid #E5E7EB; border-radius:8px">
1824
+ <table style="width:100%; border-collapse:collapse; font-size:14px">
1825
+ <thead>
1826
+ <tr style="background:rgb(249, 250, 251)">
1827
+ <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#111827; border-bottom:1px solid #E5E7EB">Name</th>
1828
+ <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#111827; border-bottom:1px solid #E5E7EB">Status</th>
1829
+ <th style="padding:12px 16px; text-align:left; font-weight:600; font-size:12px; color:#111827; border-bottom:1px solid #E5E7EB">Amount</th>
1830
+ </tr>
1831
+ </thead>
1832
+ <tbody>
1833
+ <tr style="border-bottom:1px solid #E5E7EB">
1834
+ <td style="padding:12px 16px; color:#111827">Order #1024</td>
1835
+ <td style="padding:12px 16px"><span class="comp-tag" style="background:#10B98120; color:#10B981; border-radius:6px">Completed</span></td>
1836
+ <td style="padding:12px 16px; color:#111827">$1,250.00</td>
1837
+ </tr>
1838
+ <tr style="border-bottom:1px solid #E5E7EB">
1839
+ <td style="padding:12px 16px; color:#111827">Order #1025</td>
1840
+ <td style="padding:12px 16px"><span class="comp-tag" style="background:#FFFBEB20; color:#FFFBEB; border-radius:6px">Pending</span></td>
1841
+ <td style="padding:12px 16px; color:#111827">$430.50</td>
1842
+ </tr>
1843
+ <tr>
1844
+ <td style="padding:12px 16px; color:#111827">Order #1026</td>
1845
+ <td style="padding:12px 16px"><span class="comp-tag" style="background:#EF444420; color:#EF4444; border-radius:6px">Cancelled</span></td>
1846
+ <td style="padding:12px 16px; color:#111827">$89.00</td>
1847
+ </tr>
1848
+ </tbody>
1849
+ </table>
1850
+ </div>
1851
+ </div>
1852
+
1853
+ <!-- Tags -->
1854
+ <div class="component-card">
1855
+ <h4>Tags / Badges</h4>
1856
+ <div class="component-row">
1857
+ <span class="comp-tag" style="background:#2463EB20; color:#2463EB; border-radius:8px">Primary</span>
1858
+ <span class="comp-tag" style="background:#10B98120; color:#10B981; border-radius:8px">Success</span>
1859
+ <span class="comp-tag" style="background:#FFFBEB20; color:#FFFBEB; border-radius:8px">Warning</span>
1860
+ <span class="comp-tag" style="background:#EF444420; color:#EF4444; border-radius:8px">Danger</span>
1861
+ <span class="comp-tag" style="background:#00000020; color:#000000; border-radius:8px">Info</span>
1862
+ </div>
1863
+ </div>
1864
+
1865
+ <!-- Nav Items -->
1866
+ <div class="component-card">
1867
+ <h4>Navigation</h4>
1868
+ <div style="background:#1F2937; border-radius:16px; padding:12px">
1869
+ <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:8px; cursor:pointer; margin-bottom:4px">📊 Dashboard</div>
1870
+ <div style="padding:8px 12px; color:#fff; background:rgba(255,255,255,0.1); font-size:14px; border-radius:8px; cursor:pointer; margin-bottom:4px">📦 Orders</div>
1871
+ <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:8px; cursor:pointer; margin-bottom:4px">⚙️ Settings</div>
1872
+ <div style="padding:8px 12px; color:rgba(255,255,255,0.5); font-size:14px; border-radius:8px; cursor:pointer">📈 Reports</div>
1873
+ </div>
1874
+ </div>
1875
+ </div>
1876
+ </section>
1877
+
1878
+ <!-- Section 8: Token Reference -->
1879
+ <section class="section" id="tokens">
1880
+ <h2 class="section-title">📋 Token Reference</h2>
1881
+
1882
+ <div class="table-wrapper">
1883
+ <table class="token-table">
1884
+ <thead>
1885
+ <tr>
1886
+ <th>Variable</th>
1887
+ <th>Value</th>
1888
+ <th>Category</th>
1889
+ </tr>
1890
+ </thead>
1891
+ <tbody>
1892
+ <tr>
1893
+ <td><code>--semi-border-radius-circle</code></td>
1894
+ <td> 50%</td>
1895
+ <td>Border</td>
1896
+ </tr>
1897
+ <tr>
1898
+ <td><code>--semi-border-radius-extra-small</code></td>
1899
+ <td> 3px</td>
1900
+ <td>Border</td>
1901
+ </tr>
1902
+ <tr>
1903
+ <td><code>--semi-border-radius-full</code></td>
1904
+ <td> 9999px</td>
1905
+ <td>Border</td>
1906
+ </tr>
1907
+ <tr>
1908
+ <td><code>--semi-border-radius-large</code></td>
1909
+ <td> 16px</td>
1910
+ <td>Border</td>
1911
+ </tr>
1912
+ <tr>
1913
+ <td><code>--semi-border-radius-medium</code></td>
1914
+ <td> 8px</td>
1915
+ <td>Border</td>
1916
+ </tr>
1917
+ <tr>
1918
+ <td><code>--semi-border-radius-small</code></td>
1919
+ <td> 4px</td>
1920
+ <td>Border</td>
1921
+ </tr>
1922
+ <tr>
1923
+ <td><code>--semi-border-thickness</code></td>
1924
+ <td> 0</td>
1925
+ <td>Border</td>
1926
+ </tr>
1927
+ <tr>
1928
+ <td><code>--semi-border-thickness-control</code></td>
1929
+ <td> 1px</td>
1930
+ <td>Border</td>
1931
+ </tr>
1932
+ <tr>
1933
+ <td><code>--semi-border-thickness-control-focus</code></td>
1934
+ <td> 1px</td>
1935
+ <td>Border</td>
1936
+ </tr>
1937
+ <tr>
1938
+ <td><code>--semi-color-bg-0</code></td>
1939
+ <td><span class="token-color-preview" style="background:#F3F4F6"></span> #F3F4F6</td>
1940
+ <td>Color</td>
1941
+ </tr>
1942
+ <tr>
1943
+ <td><code>--semi-color-bg-1</code></td>
1944
+ <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
1945
+ <td>Color</td>
1946
+ </tr>
1947
+ <tr>
1948
+ <td><code>--semi-color-bg-3</code></td>
1949
+ <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
1950
+ <td>Color</td>
1951
+ </tr>
1952
+ <tr>
1953
+ <td><code>--semi-color-black</code></td>
1954
+ <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
1955
+ <td>Color</td>
1956
+ </tr>
1957
+ <tr>
1958
+ <td><code>--semi-color-border</code></td>
1959
+ <td><span class="token-color-preview" style="background:#E5E7EB"></span> #E5E7EB</td>
1960
+ <td>Color</td>
1961
+ </tr>
1962
+ <tr>
1963
+ <td><code>--semi-color-data-0</code></td>
1964
+ <td><span class="token-color-preview" style="background:#3566D1"></span> #3566D1</td>
1965
+ <td>Chart</td>
1966
+ </tr>
1967
+ <tr>
1968
+ <td><code>--semi-color-data-1</code></td>
1969
+ <td><span class="token-color-preview" style="background:#2225DE"></span> #2225DE</td>
1970
+ <td>Chart</td>
1971
+ </tr>
1972
+ <tr>
1973
+ <td><code>--semi-color-data-10</code></td>
1974
+ <td><span class="token-color-preview" style="background:#EBAB24"></span> #EBAB24</td>
1975
+ <td>Chart</td>
1976
+ </tr>
1977
+ <tr>
1978
+ <td><code>--semi-color-data-11</code></td>
1979
+ <td><span class="token-color-preview" style="background:#F7F30D"></span> #F7F30D</td>
1980
+ <td>Chart</td>
1981
+ </tr>
1982
+ <tr>
1983
+ <td><code>--semi-color-data-12</code></td>
1984
+ <td><span class="token-color-preview" style="background:#A5D135"></span> #A5D135</td>
1985
+ <td>Chart</td>
1986
+ </tr>
1987
+ <tr>
1988
+ <td><code>--semi-color-data-13</code></td>
1989
+ <td><span class="token-color-preview" style="background:#70DE22"></span> #70DE22</td>
1990
+ <td>Chart</td>
1991
+ </tr>
1992
+ <tr>
1993
+ <td><code>--semi-color-data-14</code></td>
1994
+ <td><span class="token-color-preview" style="background:#26EB0C"></span> #26EB0C</td>
1995
+ <td>Chart</td>
1996
+ </tr>
1997
+ <tr>
1998
+ <td><code>--semi-color-data-15</code></td>
1999
+ <td><span class="token-color-preview" style="background:#3EF760"></span> #3EF760</td>
2000
+ <td>Chart</td>
2001
+ </tr>
2002
+ <tr>
2003
+ <td><code>--semi-color-data-16</code></td>
2004
+ <td><span class="token-color-preview" style="background:#20D175"></span> #20D175</td>
2005
+ <td>Chart</td>
2006
+ </tr>
2007
+ <tr>
2008
+ <td><code>--semi-color-data-17</code></td>
2009
+ <td><span class="token-color-preview" style="background:#0BDEB0"></span> #0BDEB0</td>
2010
+ <td>Chart</td>
2011
+ </tr>
2012
+ <tr>
2013
+ <td><code>--semi-color-data-18</code></td>
2014
+ <td><span class="token-color-preview" style="background:#3BDCEB"></span> #3BDCEB</td>
2015
+ <td>Chart</td>
2016
+ </tr>
2017
+ <tr>
2018
+ <td><code>--semi-color-data-19</code></td>
2019
+ <td><span class="token-color-preview" style="background:#25A7F7"></span> #25A7F7</td>
2020
+ <td>Chart</td>
2021
+ </tr>
2022
+ <tr>
2023
+ <td><code>--semi-color-data-2</code></td>
2024
+ <td><span class="token-color-preview" style="background:#4B0CEB"></span> #4B0CEB</td>
2025
+ <td>Chart</td>
2026
+ </tr>
2027
+ <tr>
2028
+ <td><code>--semi-color-data-3</code></td>
2029
+ <td><span class="token-color-preview" style="background:#AA3EF7"></span> #AA3EF7</td>
2030
+ <td>Chart</td>
2031
+ </tr>
2032
+ <tr>
2033
+ <td><code>--semi-color-data-4</code></td>
2034
+ <td><span class="token-color-preview" style="background:#BC20D1"></span> #BC20D1</td>
2035
+ <td>Chart</td>
2036
+ </tr>
2037
+ <tr>
2038
+ <td><code>--semi-color-data-5</code></td>
2039
+ <td><span class="token-color-preview" style="background:#DE0BB7"></span> #DE0BB7</td>
2040
+ <td>Chart</td>
2041
+ </tr>
2042
+ <tr>
2043
+ <td><code>--semi-color-data-6</code></td>
2044
+ <td><span class="token-color-preview" style="background:#EB3B96"></span> #EB3B96</td>
2045
+ <td>Chart</td>
2046
+ </tr>
2047
+ <tr>
2048
+ <td><code>--semi-color-data-7</code></td>
2049
+ <td><span class="token-color-preview" style="background:#F72553"></span> #F72553</td>
2050
+ <td>Chart</td>
2051
+ </tr>
2052
+ <tr>
2053
+ <td><code>--semi-color-data-8</code></td>
2054
+ <td><span class="token-color-preview" style="background:#D11B0B"></span> #D11B0B</td>
2055
+ <td>Chart</td>
2056
+ </tr>
2057
+ <tr>
2058
+ <td><code>--semi-color-data-9</code></td>
2059
+ <td><span class="token-color-preview" style="background:#DE7738"></span> #DE7738</td>
2060
+ <td>Chart</td>
2061
+ </tr>
2062
+ <tr>
2063
+ <td><code>--semi-color-default</code></td>
2064
+ <td><span class="token-color-preview" style="background:#F9F9F9"></span> #F9F9F9</td>
2065
+ <td>Color</td>
2066
+ </tr>
2067
+ <tr>
2068
+ <td><code>--semi-color-default-active</code></td>
2069
+ <td><span class="token-color-preview" style="background:#EAEAEA"></span> #EAEAEA</td>
2070
+ <td>Color</td>
2071
+ </tr>
2072
+ <tr>
2073
+ <td><code>--semi-color-default-hover</code></td>
2074
+ <td><span class="token-color-preview" style="background:#F1F1F1"></span> #F1F1F1</td>
2075
+ <td>Color</td>
2076
+ </tr>
2077
+ <tr>
2078
+ <td><code>--semi-color-disabled-bg</code></td>
2079
+ <td><span class="token-color-preview" style="background:#E6E8EA"></span> #E6E8EA</td>
2080
+ <td>Color</td>
2081
+ </tr>
2082
+ <tr>
2083
+ <td><code>--semi-color-disabled-border</code></td>
2084
+ <td><span class="token-color-preview" style="background:#E6E8EA"></span> #E6E8EA</td>
2085
+ <td>Color</td>
2086
+ </tr>
2087
+ <tr>
2088
+ <td><code>--semi-color-disabled-fill</code></td>
2089
+ <td><span class="token-color-preview" style="background:rgba(46, 50, 56, 0.04)"></span> rgba(46, 50, 56, 0.04)</td>
2090
+ <td>Color</td>
2091
+ </tr>
2092
+ <tr>
2093
+ <td><code>--semi-color-disabled-text</code></td>
2094
+ <td><span class="token-color-preview" style="background:rgba(28, 31, 35, 0.35)"></span> rgba(28, 31, 35, 0.35)</td>
2095
+ <td>Color</td>
2096
+ </tr>
2097
+ <tr>
2098
+ <td><code>--semi-color-fill-1</code></td>
2099
+ <td><span class="token-color-preview" style="background:#F3F4F6"></span> #F3F4F6</td>
2100
+ <td>Color</td>
2101
+ </tr>
2102
+ <tr>
2103
+ <td><code>--semi-color-fill-2</code></td>
2104
+ <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
2105
+ <td>Color</td>
2106
+ </tr>
2107
+ <tr>
2108
+ <td><code>--semi-color-focus-border</code></td>
2109
+ <td><span class="token-color-preview" style="background:#2463EB"></span> #2463EB</td>
2110
+ <td>Color</td>
2111
+ </tr>
2112
+ <tr>
2113
+ <td><code>--semi-color-highlight</code></td>
2114
+ <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
2115
+ <td>Color</td>
2116
+ </tr>
2117
+ <tr>
2118
+ <td><code>--semi-color-highlight-bg</code></td>
2119
+ <td><span class="token-color-preview" style="background:#F0C000"></span> #F0C000</td>
2120
+ <td>Color</td>
2121
+ </tr>
2122
+ <tr>
2123
+ <td><code>--semi-color-info</code></td>
2124
+ <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
2125
+ <td>Color</td>
2126
+ </tr>
2127
+ <tr>
2128
+ <td><code>--semi-color-info-active</code></td>
2129
+ <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
2130
+ <td>Color</td>
2131
+ </tr>
2132
+ <tr>
2133
+ <td><code>--semi-color-info-disabled</code></td>
2134
+ <td><span class="token-color-preview" style="background:#999999"></span> #999999</td>
2135
+ <td>Color</td>
2136
+ </tr>
2137
+ <tr>
2138
+ <td><code>--semi-color-info-hover</code></td>
2139
+ <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
2140
+ <td>Color</td>
2141
+ </tr>
2142
+ <tr>
2143
+ <td><code>--semi-color-info-light-active</code></td>
2144
+ <td><span class="token-color-preview" style="background:#BFBFBF"></span> #BFBFBF</td>
2145
+ <td>Color</td>
2146
+ </tr>
2147
+ <tr>
2148
+ <td><code>--semi-color-info-light-default</code></td>
2149
+ <td><span class="token-color-preview" style="background:#E0E0E0"></span> #E0E0E0</td>
2150
+ <td>Color</td>
2151
+ </tr>
2152
+ <tr>
2153
+ <td><code>--semi-color-info-light-hover</code></td>
2154
+ <td><span class="token-color-preview" style="background:#D1D1D1"></span> #D1D1D1</td>
2155
+ <td>Color</td>
2156
+ </tr>
2157
+ <tr>
2158
+ <td><code>--semi-color-link</code></td>
2159
+ <td><span class="token-color-preview" style="background:#2463EB"></span> #2463EB</td>
2160
+ <td>Color</td>
2161
+ </tr>
2162
+ <tr>
2163
+ <td><code>--semi-color-link-active</code></td>
2164
+ <td><span class="token-color-preview" style="background:#1C4FBC"></span> #1C4FBC</td>
2165
+ <td>Color</td>
2166
+ </tr>
2167
+ <tr>
2168
+ <td><code>--semi-color-link-hover</code></td>
2169
+ <td><span class="token-color-preview" style="background:#2059D3"></span> #2059D3</td>
2170
+ <td>Color</td>
2171
+ </tr>
2172
+ <tr>
2173
+ <td><code>--semi-color-link-visited</code></td>
2174
+ <td><span class="token-color-preview" style="background:#2463EB"></span> #2463EB</td>
2175
+ <td>Color</td>
2176
+ </tr>
2177
+ <tr>
2178
+ <td><code>--semi-color-nav-bg</code></td>
2179
+ <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
2180
+ <td>Color</td>
2181
+ </tr>
2182
+ <tr>
2183
+ <td><code>--semi-color-neutral-100</code></td>
2184
+ <td><span class="token-color-preview" style="background:#F0F6FF"></span> #F0F6FF</td>
2185
+ <td>Neutral</td>
2186
+ </tr>
2187
+ <tr>
2188
+ <td><code>--semi-color-neutral-200</code></td>
2189
+ <td><span class="token-color-preview" style="background:#E5E7EB"></span> #E5E7EB</td>
2190
+ <td>Neutral</td>
2191
+ </tr>
2192
+ <tr>
2193
+ <td><code>--semi-color-neutral-300</code></td>
2194
+ <td><span class="token-color-preview" style="background:#E5E7EB"></span> #E5E7EB</td>
2195
+ <td>Neutral</td>
2196
+ </tr>
2197
+ <tr>
2198
+ <td><code>--semi-color-neutral-400</code></td>
2199
+ <td><span class="token-color-preview" style="background:#D1D5DB"></span> #D1D5DB</td>
2200
+ <td>Neutral</td>
2201
+ </tr>
2202
+ <tr>
2203
+ <td><code>--semi-color-neutral-50</code></td>
2204
+ <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
2205
+ <td>Neutral</td>
2206
+ </tr>
2207
+ <tr>
2208
+ <td><code>--semi-color-neutral-500</code></td>
2209
+ <td><span class="token-color-preview" style="background:#9CA3B0"></span> #9CA3B0</td>
2210
+ <td>Neutral</td>
2211
+ </tr>
2212
+ <tr>
2213
+ <td><code>--semi-color-neutral-600</code></td>
2214
+ <td><span class="token-color-preview" style="background:#4B5563"></span> #4B5563</td>
2215
+ <td>Neutral</td>
2216
+ </tr>
2217
+ <tr>
2218
+ <td><code>--semi-color-neutral-700</code></td>
2219
+ <td><span class="token-color-preview" style="background:#4B5563"></span> #4B5563</td>
2220
+ <td>Neutral</td>
2221
+ </tr>
2222
+ <tr>
2223
+ <td><code>--semi-color-neutral-800</code></td>
2224
+ <td><span class="token-color-preview" style="background:#111827"></span> #111827</td>
2225
+ <td>Neutral</td>
2226
+ </tr>
2227
+ <tr>
2228
+ <td><code>--semi-color-neutral-900</code></td>
2229
+ <td><span class="token-color-preview" style="background:#000000"></span> #000000</td>
2230
+ <td>Neutral</td>
2231
+ </tr>
2232
+ <tr>
2233
+ <td><code>--semi-color-overlay-bg</code></td>
2234
+ <td><span class="token-color-preview" style="background:rgba(22, 22, 26, 0.6)"></span> rgba(22, 22, 26, 0.6)</td>
2235
+ <td>Color</td>
2236
+ </tr>
2237
+ <tr>
2238
+ <td><code>--semi-color-primary</code></td>
2239
+ <td><span class="token-color-preview" style="background:#2463EB"></span> #2463EB</td>
2240
+ <td>Color</td>
2241
+ </tr>
2242
+ <tr>
2243
+ <td><code>--semi-color-primary-active</code></td>
2244
+ <td><span class="token-color-preview" style="background:#1C4FBC"></span> #1C4FBC</td>
2245
+ <td>Color</td>
2246
+ </tr>
2247
+ <tr>
2248
+ <td><code>--semi-color-primary-disabled</code></td>
2249
+ <td><span class="token-color-preview" style="background:#A7C0F7"></span> #A7C0F7</td>
2250
+ <td>Color</td>
2251
+ </tr>
2252
+ <tr>
2253
+ <td><code>--semi-color-primary-hover</code></td>
2254
+ <td><span class="token-color-preview" style="background:#2059D3"></span> #2059D3</td>
2255
+ <td>Color</td>
2256
+ </tr>
2257
+ <tr>
2258
+ <td><code>--semi-color-primary-light-active</code></td>
2259
+ <td><span class="token-color-preview" style="background:#C8D8FA"></span> #C8D8FA</td>
2260
+ <td>Color</td>
2261
+ </tr>
2262
+ <tr>
2263
+ <td><code>--semi-color-primary-light-default</code></td>
2264
+ <td><span class="token-color-preview" style="background:#E4ECFC"></span> #E4ECFC</td>
2265
+ <td>Color</td>
2266
+ </tr>
2267
+ <tr>
2268
+ <td><code>--semi-color-primary-light-hover</code></td>
2269
+ <td><span class="token-color-preview" style="background:#D7E2FB"></span> #D7E2FB</td>
2270
+ <td>Color</td>
2271
+ </tr>
2272
+ <tr>
2273
+ <td><code>--semi-color-secondary</code></td>
2274
+ <td><span class="token-color-preview" style="background:#447AEE"></span> #447AEE</td>
2275
+ <td>Color</td>
2276
+ </tr>
2277
+ <tr>
2278
+ <td><code>--semi-color-secondary-active</code></td>
2279
+ <td><span class="token-color-preview" style="background:#3661BE"></span> #3661BE</td>
2280
+ <td>Color</td>
2281
+ </tr>
2282
+ <tr>
2283
+ <td><code>--semi-color-secondary-disabled</code></td>
2284
+ <td><span class="token-color-preview" style="background:#B4C9F8"></span> #B4C9F8</td>
2285
+ <td>Color</td>
2286
+ </tr>
2287
+ <tr>
2288
+ <td><code>--semi-color-secondary-hover</code></td>
2289
+ <td><span class="token-color-preview" style="background:#3D6DD6"></span> #3D6DD6</td>
2290
+ <td>Color</td>
2291
+ </tr>
2292
+ <tr>
2293
+ <td><code>--semi-color-secondary-light-active</code></td>
2294
+ <td><span class="token-color-preview" style="background:#D0DDFA"></span> #D0DDFA</td>
2295
+ <td>Color</td>
2296
+ </tr>
2297
+ <tr>
2298
+ <td><code>--semi-color-secondary-light-default</code></td>
2299
+ <td><span class="token-color-preview" style="background:#E8EFFC"></span> #E8EFFC</td>
2300
+ <td>Color</td>
2301
+ </tr>
2302
+ <tr>
2303
+ <td><code>--semi-color-secondary-light-hover</code></td>
2304
+ <td><span class="token-color-preview" style="background:#DDE7FB"></span> #DDE7FB</td>
2305
+ <td>Color</td>
2306
+ </tr>
2307
+ <tr>
2308
+ <td><code>--semi-color-shadow</code></td>
2309
+ <td> rgba(0, 0, 0, 0.04)</td>
2310
+ <td>Shadow</td>
2311
+ </tr>
2312
+ <tr>
2313
+ <td><code>--semi-color-tertiary</code></td>
2314
+ <td><span class="token-color-preview" style="background:#6B7075"></span> #6B7075</td>
2315
+ <td>Color</td>
2316
+ </tr>
2317
+ <tr>
2318
+ <td><code>--semi-color-tertiary-active</code></td>
2319
+ <td><span class="token-color-preview" style="background:#55595D"></span> #55595D</td>
2320
+ <td>Color</td>
2321
+ </tr>
2322
+ <tr>
2323
+ <td><code>--semi-color-tertiary-disabled</code></td>
2324
+ <td><span class="token-color-preview" style="background:#C3C5C7"></span> #C3C5C7</td>
2325
+ <td>Color</td>
2326
+ </tr>
2327
+ <tr>
2328
+ <td><code>--semi-color-tertiary-hover</code></td>
2329
+ <td><span class="token-color-preview" style="background:#606469"></span> #606469</td>
2330
+ <td>Color</td>
2331
+ </tr>
2332
+ <tr>
2333
+ <td><code>--semi-color-tertiary-light-active</code></td>
2334
+ <td><span class="token-color-preview" style="background:#DADBDC"></span> #DADBDC</td>
2335
+ <td>Color</td>
2336
+ </tr>
2337
+ <tr>
2338
+ <td><code>--semi-color-tertiary-light-default</code></td>
2339
+ <td><span class="token-color-preview" style="background:#EDEDEE"></span> #EDEDEE</td>
2340
+ <td>Color</td>
2341
+ </tr>
2342
+ <tr>
2343
+ <td><code>--semi-color-tertiary-light-hover</code></td>
2344
+ <td><span class="token-color-preview" style="background:#E4E5E6"></span> #E4E5E6</td>
2345
+ <td>Color</td>
2346
+ </tr>
2347
+ <tr>
2348
+ <td><code>--semi-color-text-1</code></td>
2349
+ <td><span class="token-color-preview" style="background:#111827"></span> #111827</td>
2350
+ <td>Color</td>
2351
+ </tr>
2352
+ <tr>
2353
+ <td><code>--semi-color-text-2</code></td>
2354
+ <td><span class="token-color-preview" style="background:#4B5563"></span> #4B5563</td>
2355
+ <td>Color</td>
2356
+ </tr>
2357
+ <tr>
2358
+ <td><code>--semi-color-warning</code></td>
2359
+ <td><span class="token-color-preview" style="background:#FFFBEB"></span> #FFFBEB</td>
2360
+ <td>Color</td>
2361
+ </tr>
2362
+ <tr>
2363
+ <td><code>--semi-color-warning-active</code></td>
2364
+ <td><span class="token-color-preview" style="background:#CCC8BC"></span> #CCC8BC</td>
2365
+ <td>Color</td>
2366
+ </tr>
2367
+ <tr>
2368
+ <td><code>--semi-color-warning-disabled</code></td>
2369
+ <td><span class="token-color-preview" style="background:#FFFDF7"></span> #FFFDF7</td>
2370
+ <td>Color</td>
2371
+ </tr>
2372
+ <tr>
2373
+ <td><code>--semi-color-warning-hover</code></td>
2374
+ <td><span class="token-color-preview" style="background:#E5E1D3"></span> #E5E1D3</td>
2375
+ <td>Color</td>
2376
+ </tr>
2377
+ <tr>
2378
+ <td><code>--semi-color-warning-light-active</code></td>
2379
+ <td><span class="token-color-preview" style="background:#FFFEFA"></span> #FFFEFA</td>
2380
+ <td>Color</td>
2381
+ </tr>
2382
+ <tr>
2383
+ <td><code>--semi-color-warning-light-default</code></td>
2384
+ <td><span class="token-color-preview" style="background:#FFFEFC"></span> #FFFEFC</td>
2385
+ <td>Color</td>
2386
+ </tr>
2387
+ <tr>
2388
+ <td><code>--semi-color-warning-light-hover</code></td>
2389
+ <td><span class="token-color-preview" style="background:#FFFEFB"></span> #FFFEFB</td>
2390
+ <td>Color</td>
2391
+ </tr>
2392
+ <tr>
2393
+ <td><code>--semi-color-white</code></td>
2394
+ <td><span class="token-color-preview" style="background:#FFFFFF"></span> #FFFFFF</td>
2395
+ <td>Color</td>
2396
+ </tr>
2397
+ <tr>
2398
+ <td><code>--semi-font-family-regular</code></td>
2399
+ <td> -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, Inter, sans-serif</td>
2400
+ <td>Typography</td>
2401
+ </tr>
2402
+ <tr>
2403
+ <td><code>--semi-font-size-extra-small</code></td>
2404
+ <td> 10px</td>
2405
+ <td>Typography</td>
2406
+ </tr>
2407
+ <tr>
2408
+ <td><code>--semi-font-size-header-1</code></td>
2409
+ <td> 32px</td>
2410
+ <td>Typography</td>
2411
+ </tr>
2412
+ <tr>
2413
+ <td><code>--semi-font-size-header-2</code></td>
2414
+ <td> 28px</td>
2415
+ <td>Typography</td>
2416
+ </tr>
2417
+ <tr>
2418
+ <td><code>--semi-font-size-header-3</code></td>
2419
+ <td> 24px</td>
2420
+ <td>Typography</td>
2421
+ </tr>
2422
+ <tr>
2423
+ <td><code>--semi-font-size-header-4</code></td>
2424
+ <td> 20px</td>
2425
+ <td>Typography</td>
2426
+ </tr>
2427
+ <tr>
2428
+ <td><code>--semi-font-size-header-5</code></td>
2429
+ <td> 18px</td>
2430
+ <td>Typography</td>
2431
+ </tr>
2432
+ <tr>
2433
+ <td><code>--semi-font-size-header-6</code></td>
2434
+ <td> 16px</td>
2435
+ <td>Typography</td>
2436
+ </tr>
2437
+ <tr>
2438
+ <td><code>--semi-font-size-regular</code></td>
2439
+ <td> 14px</td>
2440
+ <td>Typography</td>
2441
+ </tr>
2442
+ <tr>
2443
+ <td><code>--semi-font-size-small</code></td>
2444
+ <td> 12px</td>
2445
+ <td>Typography</td>
2446
+ </tr>
2447
+ <tr>
2448
+ <td><code>--semi-font-weight-bold</code></td>
2449
+ <td> 700</td>
2450
+ <td>Typography</td>
2451
+ </tr>
2452
+ <tr>
2453
+ <td><code>--semi-font-weight-light</code></td>
2454
+ <td> 200</td>
2455
+ <td>Typography</td>
2456
+ </tr>
2457
+ <tr>
2458
+ <td><code>--semi-font-weight-medium</code></td>
2459
+ <td> 500</td>
2460
+ <td>Typography</td>
2461
+ </tr>
2462
+ <tr>
2463
+ <td><code>--semi-font-weight-regular</code></td>
2464
+ <td> 400</td>
2465
+ <td>Typography</td>
2466
+ </tr>
2467
+ <tr>
2468
+ <td><code>--semi-font-weight-semibold</code></td>
2469
+ <td> 600</td>
2470
+ <td>Typography</td>
2471
+ </tr>
2472
+ <tr>
2473
+ <td><code>--semi-grey-0</code></td>
2474
+ <td> 255,255,255</td>
2475
+ <td>Neutral</td>
2476
+ </tr>
2477
+ <tr>
2478
+ <td><code>--semi-grey-1</code></td>
2479
+ <td> 240,246,255</td>
2480
+ <td>Neutral</td>
2481
+ </tr>
2482
+ <tr>
2483
+ <td><code>--semi-grey-2</code></td>
2484
+ <td> 229,231,235</td>
2485
+ <td>Neutral</td>
2486
+ </tr>
2487
+ <tr>
2488
+ <td><code>--semi-grey-3</code></td>
2489
+ <td> 229,231,235</td>
2490
+ <td>Neutral</td>
2491
+ </tr>
2492
+ <tr>
2493
+ <td><code>--semi-grey-4</code></td>
2494
+ <td> 209,213,219</td>
2495
+ <td>Neutral</td>
2496
+ </tr>
2497
+ <tr>
2498
+ <td><code>--semi-grey-5</code></td>
2499
+ <td> 156,163,176</td>
2500
+ <td>Neutral</td>
2501
+ </tr>
2502
+ <tr>
2503
+ <td><code>--semi-grey-6</code></td>
2504
+ <td> 75,85,99</td>
2505
+ <td>Neutral</td>
2506
+ </tr>
2507
+ <tr>
2508
+ <td><code>--semi-grey-7</code></td>
2509
+ <td> 75,85,99</td>
2510
+ <td>Neutral</td>
2511
+ </tr>
2512
+ <tr>
2513
+ <td><code>--semi-grey-8</code></td>
2514
+ <td> 17,24,39</td>
2515
+ <td>Neutral</td>
2516
+ </tr>
2517
+ <tr>
2518
+ <td><code>--semi-grey-9</code></td>
2519
+ <td> 0,0,0</td>
2520
+ <td>Neutral</td>
2521
+ </tr>
2522
+ <tr>
2523
+ <td><code>--semi-height-control-default</code></td>
2524
+ <td> 32px</td>
2525
+ <td>Sizing</td>
2526
+ </tr>
2527
+ <tr>
2528
+ <td><code>--semi-height-control-large</code></td>
2529
+ <td> 40px</td>
2530
+ <td>Sizing</td>
2531
+ </tr>
2532
+ <tr>
2533
+ <td><code>--semi-height-control-small</code></td>
2534
+ <td> 24px</td>
2535
+ <td>Sizing</td>
2536
+ </tr>
2537
+ <tr>
2538
+ <td><code>--semi-layout-content-max-width</code></td>
2539
+ <td> none</td>
2540
+ <td>Layout</td>
2541
+ </tr>
2542
+ <tr>
2543
+ <td><code>--semi-layout-content-padding</code></td>
2544
+ <td> 24px</td>
2545
+ <td>Layout</td>
2546
+ </tr>
2547
+ <tr>
2548
+ <td><code>--semi-layout-header-height</code></td>
2549
+ <td> 56px</td>
2550
+ <td>Sizing</td>
2551
+ </tr>
2552
+ <tr>
2553
+ <td><code>--semi-line-height-regular</code></td>
2554
+ <td> 18px</td>
2555
+ <td>Typography</td>
2556
+ </tr>
2557
+ <tr>
2558
+ <td><code>--semi-shadow-elevated</code></td>
2559
+ <td> rgba(0, 0, 0, 0.12) 0px 1px 0px 0px</td>
2560
+ <td>Shadow</td>
2561
+ </tr>
2562
+ <tr>
2563
+ <td><code>--semi-shadow-sm</code></td>
2564
+ <td> rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px</td>
2565
+ <td>Shadow</td>
2566
+ </tr>
2567
+ <tr>
2568
+ <td><code>--semi-spacing-base</code></td>
2569
+ <td> 15px</td>
2570
+ <td>Spacing</td>
2571
+ </tr>
2572
+ <tr>
2573
+ <td><code>--semi-spacing-base-loose</code></td>
2574
+ <td> 18px</td>
2575
+ <td>Spacing</td>
2576
+ </tr>
2577
+ <tr>
2578
+ <td><code>--semi-spacing-base-tight</code></td>
2579
+ <td> 12px</td>
2580
+ <td>Spacing</td>
2581
+ </tr>
2582
+ <tr>
2583
+ <td><code>--semi-spacing-extra-loose</code></td>
2584
+ <td> 24px</td>
2585
+ <td>Spacing</td>
2586
+ </tr>
2587
+ <tr>
2588
+ <td><code>--semi-spacing-extra-tight</code></td>
2589
+ <td> 4px</td>
2590
+ <td>Spacing</td>
2591
+ </tr>
2592
+ <tr>
2593
+ <td><code>--semi-spacing-loose</code></td>
2594
+ <td> 24px</td>
2595
+ <td>Spacing</td>
2596
+ </tr>
2597
+ <tr>
2598
+ <td><code>--semi-spacing-none</code></td>
2599
+ <td> 4px</td>
2600
+ <td>Spacing</td>
2601
+ </tr>
2602
+ <tr>
2603
+ <td><code>--semi-spacing-super-loose</code></td>
2604
+ <td> 40px</td>
2605
+ <td>Spacing</td>
2606
+ </tr>
2607
+ <tr>
2608
+ <td><code>--semi-spacing-super-tight</code></td>
2609
+ <td> 4px</td>
2610
+ <td>Spacing</td>
2611
+ </tr>
2612
+ <tr>
2613
+ <td><code>--semi-spacing-tight</code></td>
2614
+ <td> 8px</td>
2615
+ <td>Spacing</td>
2616
+ </tr>
2617
+ <tr>
2618
+ <td><code>--semi-width-icon-extra-large</code></td>
2619
+ <td> 24px</td>
2620
+ <td>Sizing</td>
2621
+ </tr>
2622
+ <tr>
2623
+ <td><code>--semi-width-icon-extra-small</code></td>
2624
+ <td> 8px</td>
2625
+ <td>Sizing</td>
2626
+ </tr>
2627
+ <tr>
2628
+ <td><code>--semi-width-icon-large</code></td>
2629
+ <td> 20px</td>
2630
+ <td>Sizing</td>
2631
+ </tr>
2632
+ <tr>
2633
+ <td><code>--semi-width-icon-medium</code></td>
2634
+ <td> 16px</td>
2635
+ <td>Sizing</td>
2636
+ </tr>
2637
+ <tr>
2638
+ <td><code>--semi-width-icon-small</code></td>
2639
+ <td> 12px</td>
2640
+ <td>Sizing</td>
2641
+ </tr>
2642
+ </tbody>
2643
+ </table>
2644
+ </div>
2645
+ </section>
2646
+
2647
+ <!-- Section 9: Usage -->
2648
+ <section class="section" id="usage">
2649
+ <h2 class="section-title">⚙️ Usage</h2>
2650
+
2651
+ <div class="usage-blocks">
2652
+ <div class="usage-block">
2653
+ <h4>1. CSS Import</h4>
2654
+ <pre><code>/* Import the theme override in your main CSS/entry */
2655
+ @import './semi-theme-override.css';
2656
+
2657
+ /* Or in HTML */
2658
+ &lt;link rel="stylesheet" href="semi-theme-override.css"&gt;</code></pre>
2659
+ </div>
2660
+ <div class="usage-block">
2661
+ <h4>2. React Setup (Semi Design)</h4>
2662
+ <pre><code>// Install Semi UI
2663
+ npm install @douyinfe/semi-ui
2664
+
2665
+ // Import theme override AFTER Semi default styles
2666
+ import '@douyinfe/semi-ui/dist/css/semi.min.css';
2667
+ import './semi-theme-override.css';</code></pre>
2668
+ </div>
2669
+ <div class="usage-block">
2670
+ <h4>3. Figma Tokens</h4>
2671
+ <pre><code>// Import figma-tokens.json into Tokens Studio plugin
2672
+ // File → Import → Select figma-tokens.json
2673
+ // Apply Haravan Dashboard theme set</code></pre>
2674
+ </div>
2675
+ </div>
2676
+ </section>
2677
+ </main>
2678
+
2679
+ <footer class="footer">
2680
+ <p>Generated by <strong>MasterDesign Agent — Semi-Sync Harvester</strong></p>
2681
+ </footer>
2682
+
2683
+ <div class="toast" id="toast">Copied!</div>
2684
+
2685
+ <script>
2686
+
2687
+ function toggleTheme() {
2688
+ const html = document.documentElement;
2689
+ const current = html.getAttribute('data-theme');
2690
+ const next = current === 'dark' ? 'light' : 'dark';
2691
+ html.setAttribute('data-theme', next);
2692
+ document.getElementById('themeIcon').textContent = next === 'dark' ? '🌙' : '☀️';
2693
+ localStorage.setItem('theme', next);
2694
+ }
2695
+
2696
+ function copyColor(value) {
2697
+ navigator.clipboard.writeText(value).then(() => {
2698
+ const toast = document.getElementById('toast');
2699
+ toast.textContent = 'Copied: ' + value;
2700
+ toast.classList.add('show');
2701
+ setTimeout(() => toast.classList.remove('show'), 2000);
2702
+ });
2703
+ }
2704
+
2705
+ // Restore saved theme
2706
+ (function() {
2707
+ const saved = localStorage.getItem('theme');
2708
+ if (saved) {
2709
+ document.documentElement.setAttribute('data-theme', saved);
2710
+ document.getElementById('themeIcon').textContent = saved === 'dark' ? '🌙' : '☀️';
2711
+ }
2712
+ })();
2713
+
2714
+ </script>
2715
+ </body>
2716
+ </html>