flat

Define tokens first (colors, typography, spacing), then specify component anatomy, states, and variants. This Skill enforces that workflow, producing rules anchored to tokens like primary #F2673C and the 4/8/12/16/24/32 spacing scale.

The Flat palette uses primary #F2673C, secondary #8B5CF6, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Inter for body and display text, JetBrains Mono for labels, on a 12/14/16/20/24/32 scale.

Yes, it embeds WCAG 2.2 AA compliance, keyboard-first interactions, and visible focus states into every guideline. Each accessibility statement must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

Guidelines must define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They also cover keyboard, pointer, and touch interactions plus edge cases like long labels, empty states, and overflow.

Flat design removes shadows, gradients, and textures, so it suits fast-loading minimalist interfaces. Products needing strong depth cues, rich visual hierarchy through elevation, or skeuomorphic affordances should consider alternative visual styles.