design-system-specification

## Purpose Produce a design system specification (`design.md` or `design-system.md`) that details the exact visual language of a web project. This specification serves as the single source of truth for styles, ensuring designers, developers, and AI agents build consistent, professional interfaces. ## Input **Works best with:** The name or concept of the app/website, along with core branding goals. **Also valuable:** Existing logo files, target audience, primary brand colors, component needs (e.g. data tables, alerts, checkout forms). **Example invocation:** `Create a design system for a B2B payment gateway admin portal. Needs to look highly professional, secure, and developer-friendly. Dark mode is first-class. Colors should revolve around navy and tech-blue. Needs style rules for tables, dashboard cards, status badges, and transaction grids.` ## Key Concepts ### 1. Atomic Design Divide the interface into modular units to ensure reuse and scalability: - **Atoms**: Raw design tokens (colors, typography, spacing) and base elements (buttons, inputs, icons). - **Molecules**: Groups of atoms functioning together (a form input group with label and error status). - **Organisms**: Complex layout components composed of molecules (a data table, navigation header, or sidebar). - **Templates / Pages**: High-level wireframes demonstrating token combinations in action. ### 2. Spacing Rhythm (8px Grid) All spacing, padding, margins, and sizing should align to a standard 8px grid (8px...