Visual design principles covering typography, color, layout, spacing, motion, and AI anti-patterns. Applies when building UI components, designing pages, or reviewing visual quality of interfaces.
Modular type scale with 5 sizes: xs (caption), sm (secondary), base (body), lg (subheading), xl+ (headline). Pick a ratio (1.25, 1.333, 1.5) and commit
Pair fonts by contrast: serif + sans, geometric + humanist, condensed display + wide body. Never pair similar-but-not-identical fonts
One font family in multiple weights often beats two competing typefaces
Vertical rhythm: line-height is the base unit for all vertical spacing
Fluid type (clamp()) for headings on content pages. Fixed rem scales for app UI and body text
max-width: 65ch for readable measure. Increase line-height for light-on-dark text (+0.05-0.1)
Avoid: Inter, Roboto, Arial, Open Sans as defaults. Monospace as shorthand for "technical"
Color
Use OKLCH for perceptually uniform palettes. Reduce chroma as lightness approaches extremes
Tint all neutrals toward brand hue (chroma ~0.01). Pure gray looks dead
相关技能
60-30-10 rule by visual weight: 60% neutral, 30% secondary, 10% accent. Accent works because it's rare
Consistent shadow scale (sm → lg). Shadows should be subtle
Dark mode: use surface lightness for elevation, not shadows
Anti-Patterns (AI Slop Detection)
If someone would say "AI made this" at first glance, that's the problem
Tells: cyan-on-dark palette, purple-to-blue gradients, gradient text on headings, glassmorphism everywhere, hero metric layout (big number + small label + stats), identical card grids, rounded rectangles with generic drop shadows, glowing accents on dark backgrounds, large icons with rounded corners above every heading
Test: does this look like every other AI-generated interface from 2024-2025?