Design Token + Design.md
Token 解决机器可复用的视觉变量；Design.md 解决 AI 能否理解品牌、布局、组件和反模式。
# Design.md ## Brand Personality - Calm, precise, useful. Avoid decorative marketing layout. - Copy should name the user task before the visual metaphor. ## Layout Principles - Use 8px spacing rhythm: 8 / 16 / 24 / 32 / 48. - Tool pages favor dense scanning over oversized hero blocks. - Cards show one object only; lists/tables handle comparison. ## Color Tokens - text.primary: #141821 - text.secondary: #405064 - surface.page: #fbfdff - action.primary: #151a24 - focus: 0 0 0 3px rgba(79, 124, 255, .45) ## Typography Tokens - body: 14px / 1.5 - section title: 18px / 1.2 - card title: 22px / 1.2 - helper text: 12px / 1.5 ## Component Rules - Buttons need visible focus, hover, disabled and loading states. - Form errors stay near the field and explain the recovery path. - Feedback must distinguish blocking alerts from transient toasts. ## Interaction Rules - Keep keyboard order identical to visual order. - Avoid layout shift when filters, tags or async data update. ## Accessibility Rules - All icon-only controls need accessible names. - Text contrast must pass WCAG AA for normal text. - Do not rely on color alone for status. ## AI Generation Rules - Reuse existing tokens before adding new CSS values. - Keep generated UI within the product density and component rules. - Run the acceptance checklist before claiming the screen is done.