design

Apply 5 professional typography rules - scale, weight, measure (line length), paragraph spacing, contrast - with WCAG AA/AAA compliance. Use when reviewing or designing UI text, building a type system, picking font sizes, or fixing readability issues. Triggers on "improve typography", "fix the type", "what font sizes", "type scale", "text contrast", "line spacing", "is this readable".

Apply 5 professional color rules - palette systems, WCAG contrast, semantic meaning, visual hierarchy via color, surface layering. Use when designing/reviewing color usage, building a design system, or auditing accessibility. Triggers on "color palette", "improve contrast", "color system", "dark mode", "is the color choice OK", "color hierarchy", "background colors".

Apply 5 professional layout rules - grid systems, spacing scales, alignment, proximity (related-element grouping), visual weight balance. Use when reviewing or designing layout, fixing inconsistent spacing, deciding alignment, or balancing emphasis. Triggers on "fix the layout", "improve spacing", "alignment issue", "grid system", "spacing scale", "visual hierarchy".

Apply 5 professional component-design rules covering buttons, forms, cards, icons, and motion. Use when designing/reviewing UI components, building a component library, or auditing interaction states. Triggers on "design this button", "form layout", "card component", "icon usage", "add motion", "animation timing", "component states", "design system component".