design-system-rules

Define semantic token roles such as surface, ink, and elevation, then map each role to light and dark values instead of hardcoding hex colors in components. The Skill's checklist covers naming conventions, contrast pairs, and implementation-ready formats like CSS variables or JSON.

Common tells include violet/cyan palettes, gradient-clipped text, nested cards, hero eyebrow chips, oversized headlines, hairline borders with wide shadows, and decorative grid backgrounds. The Skill catalogs these with measurable thresholds and remediation guidance for each.

Use the audit checklist in references/source.md covering principles, tokens, visual language, composition grammar, component contracts, motion, and responsive behavior. Validate findings with screenshots, computed styles, and accessibility checks, then record decisions in a Before/After table.

Do not use it as the primary guide for backend architecture, threat modeling, release operations, or framework-specific implementation tasks. It is scoped to design-system definition, UX architecture, visual hierarchy, and screenshot-based visual QA.

Provide an identity sentence, asset taxonomy with approved sources, illustration and composition grammar, responsive art direction rules, and a failure-mode table with acceptance checks. Include a prompt-ready handoff block with negative constraints, not just positive adjectives.