Skill 02
Surface Design
The design-ui skill: tokens first, one accent, no generic AI chrome.
Doctrine
- Define the system once in CSS tokens, then compose. Never sprinkle one-off values.
- ≤5 colors, ≤2 type families. One accent, used sparingly for primary action and focus.
- Nested radii are concentric: outer radius equals inner radius plus padding.
- Motion is short and interruptible. Respect reduced motion.
Must
- Override foreground whenever you override background.
- Mobile-first at ~390px. Tap targets at least 44px. No horizontal overflow.
- Empty, loading, and error states are designed — not leftover blanks.
Never
- Emoji as icons or in chrome.
- Purple / violet / magenta / gold as the brand accent.
- Gradient-blob heroes, rainbow borders, or glassmorphism soup.