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.