Typography
→ Consult [typography reference](reference/typography.md) for scales, pairing, and loading strategies.
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
DO: Use a modular type scale with fluid sizing (clamp)
DO: Vary font weights and sizes to create clear visual hierarchy
DON'T: Use overused fonts—Inter, Roboto, Arial, Open Sans, system defaults
DON'T: Use monospace typography as lazy shorthand for "technical/developer" vibes
DON'T: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated
Color & Theme
→ Consult [color reference](reference/color-and-contrast.md) for OKLCH, palettes, and dark mode.
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
DO: Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes
DO: Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion
DON'T: Use gray text on colored backgrounds—it looks washed out; use a shade of the background color instead
DON'T: Use pure black (#000) or pure white (#fff)—always tint; pure black/white never appears in nature
DON'T: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
DON'T: Use gradient text for "impact"—especially on metrics or headings; it's decorative rather than meaningful
DON'T: Default to dark mode with glowing accents—it looks "cool" without requiring actual design decisions
Layout & Space
→ Consult [spatial reference](reference/spatial-design.md) for grids, rhythm, and container queries.
Create visual rhythm through varied spacing—not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis.
DO: Create visual rhythm through varied spacing—tight groupings, generous separations
DO: Use fluid spacing with clamp() that breathes on larger screens
DO: Use asymmetry and unexpected compositions; break the grid intentionally for emphasis
DON'T: Wrap everything in cards—not everything needs a container
DON'T: Nest cards inside cards—visual noise, flatten the hierarchy
DON'T: Use identical card grids—same-sized cards with icon + heading + text, repeated endlessly
DON'T: Use the hero metric layout template—big number, small label, supporting stats, gradient accent
DON'T: Center everything—left-aligned text with asymmetric layouts feels more designed
DON'T: Use the same spacing everywhere—without rhythm, layouts feel monotonous
Visual Details
DO: Use intentional, purposeful decorative elements that reinforce brand
DON'T: Use glassmorphism everywhere—blur effects, glass cards, glow borders used decoratively rather than purposefully
DON'T: Use rounded elements with thick colored border on one side—a lazy accent that almost never looks intentional
DON'T: Use sparklines as decoration—tiny charts that look sophisticated but convey nothing meaningful
DON'T: Use rounded rectangles with generic drop shadows—safe, forgettable, could be any AI output
DON'T: Use modals unless there's truly no better alternative—modals are lazy
Motion
→ Consult [motion reference](reference/motion-design.md) for timing, easing, and reduced motion.
Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
DO: Use motion to convey state changes—entrances, exits, feedback
DO: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration
DO: For height animations, use grid-template-rows transitions instead of animating height directly
DON'T: Animate layout properties (width, height, padding, margin)—use transform and opacity only
DON'T: Use bounce or elastic easing—they feel dated and tacky; real objects decelerate smoothly
Interaction
→ Consult [interaction reference](reference/interaction-design.md) for forms, focus, and loading patterns.
Make interactions feel fast. Use optimistic UI—update immediately, sync later.
DO: Use progressive disclosure—start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions)
DO: Design empty states that teach the interface, not just say "nothing here"
DO: Make every interactive surface feel intentional and responsive
DON'T: Repeat the same information—redundant headers, intros that restate the heading
DON'T: Make every button primary—use ghost buttons, text links, secondary styles; hierarchy matters
Responsive
→ Consult [responsive reference](reference/responsive-design.md) for mobile-first, fluid design, and container queries.
DO: Use container queries (@container) for component-level responsiveness
DO: Adapt the interface for different contexts—don't just shrink it
DON'T: Hide critical functionality on mobile—adapt the interface, don't amputate it
UX Writing
→ Consult [ux-writing reference](reference/ux-writing.md) for labels, errors, and empty states.
DO: Make every word earn its place
DON'T: Repeat information users can already see
---
|