frontend-design

name	frontend-design
license	MIT
description	Guide for creating distinctive, production-grade frontend interfaces. Covers visual design systems, typography, color, motion, spatial composition, and web interface standards. Use when designing UI, establishing design systems, or reviewing visual quality of frontend code.

Frontend Design

Create interfaces with intentional aesthetics and professional execution. Avoid generic "template" looks.

Design Process

Before writing code, answer these questions:

1. Purpose — What problem does this interface solve? Who uses it?
2. Tone — What aesthetic direction? (brutalist, luxury, playful, editorial, retro-futuristic, etc.)
3. Constraints — Device targets, accessibility requirements, performance budget
4. Signature — What single element makes this memorable?

Commit to a direction. Timid design is worse than bold design with flaws.

Typography

Font Selection

Avoid overused defaults. Choose typefaces that reinforce the interface's personality.

/* BAD: Generic, seen everywhere */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* GOOD: Distinctive and paired intentionally */
--font-display: 'Instrument Serif', serif;      /* headings */
: , sans-serif;              
: , monospace;