design-elevationlisted

# Design Elevation System This skill transforms functional visual outputs into polished, professional designs by applying systematic design thinking and refinement protocols. ## Design Philosophy Follow Alla Kholmatova's design systems framework: every design decision is either a **functional pattern** (what users interact with — structure, layout, components) or a **perceptual pattern** (how it feels — color, typography, spacing, motion). Both layers must be intentional. ### Canonical Design Tokens: Tailwind CSS All design decisions should map to **Tailwind CSS** as the shared design language. This means: - Colors from Tailwind's palette (gray, blue, emerald, amber, rose, violet, etc.) - Spacing from Tailwind's scale (1 = 0.25rem/4px, 2 = 0.5rem/8px, 4 = 1rem/16px, etc.) - Typography from Tailwind's type scale (text-xs through text-9xl) - Border radius from Tailwind's system (rounded-sm through rounded-2xl) - Shadows from Tailwind's elevation (shadow-sm through shadow-2xl) When writing CSS or HTML, use Tailwind utility classes. When defining design tokens for other formats (presentations, documents), translate Tailwind values into the target medium. ## Activation Protocol When creating ANY visual output: 1. **Start with function** — Create a working version first 2. **Define functional patterns** — What does the user interact with? What's the structure? Use `references/grid-systems.md` 3. **Define perceptual patterns** — How should it feel? What's the personality? U