design-excellence

Production-grade frontend design requires a structured approach: establish a typography system with 2–3 font families, define 5+ color tones with tokens, enforce 4.5:1 text contrast for readability, and organize spacing, radii, and shadows consistently. This Skill guides you through design decisions, implementation, and validation across web components and full applications.

Accessibility standards include 4.5:1 text contrast and 3:1 UI element contrast, support for prefers-reduced-motion to respect user preferences, and colorblind testing to verify palette legibility. These requirements ensure your interface remains usable for all users regardless of ability.

Build a cohesive design system by defining a consistent typography hierarchy, establishing color tokens with multiple tones, implementing grid-based layouts with 3+ background layers, and applying uniform spacing and shadow rules. This approach yields polished, recognizable interfaces across different contexts.

No. This approach prohibits Inter and Roboto to encourage distinctive, custom typography choices. Select 2–3 alternative font families that align with your brand identity and support your visual hierarchy without relying on widely-used defaults.

Production-grade frontend design enforces technical rigor: deliberate typography systems, accessible color contrast ratios, motion constraints, and multi-phase validation. This avoids generic, AI-generated aesthetics by requiring intentional design decisions and measurable accessibility compliance.