#design tokens

UI/UX Design System Creator: Components & Design Tokens

Build a complete UI/UX design system with reusable components, design tokens, spacing rules, and accessibility standards for web or mobile apps.

Act as a senior UI/UX designer and design systems architect. Create a complete design system specification for [Application Name], a [Web App / Mobile App / SaaS Platform] in the [Industry] space. Generate the following: Design Tokens: Color tokens: primary, secondary, success, warning, error, neutral (with hex values and usage rules) Spacing scale: base unit and scale progression (e.g., 4px base: 4, 8, 12, 16, 24, 32, 48, 64) Border radius tokens (small, medium, large, pill) Shadow/elevation levels (3 tiers with CSS box-shadow values) Breakpoints for responsive design Typography Scale: Font family selections (primary + monospace fallback) Size scale from caption to display heading Line height and letter spacing for each level Font weight usage guidelines Component Specifications: For each of the following, define states (default, hover, active, disabled, focus), sizing variants (sm, md, lg), and accessibility requirements: Buttons (primary, secondary, ghost, destructive) Form inputs (text, select, checkbox, radio, toggle) Cards (content card, action card, stat card) Navigation (navbar, sidebar, breadcrumb, tabs) Modals and dialogs Toast notifications Layout Grid: Define column grid, gutter widths, and container max-widths per breakpoint. Accessibility Checklist: WCAG 2.1 AA requirements for each component. Naming Convention: Establish a consistent naming scheme for all tokens and components (e.g., BEM, atomic). Constraints: All components must meet WCAG 2.1 AA contrast ratios. Provide CSS custom properties (variables) for all tokens. Tone: Technical, precise, and implementation-ready.