The language of visual design.
The concepts and tokens that hold an interface together. Learn these and you'll be able to prompt for exactly what you're picturing.
Glassmorphism
A frosted-glass effect created with background blur (backdrop-filter), semi-transparent fills, and a subtle white border. Makes elements feel layered and modern.
Neumorphism
Elements that look pushed into or extruded from the background. Achieved with two-sided box shadows - one light, one dark. Very tactile, best used sparingly.
Design Tokens
The variables that define your visual language - colors, spacing, font sizes, border radii. In CSS: --color-primary, --space-md. Tokens make systems scalable and consistent.
Typography Scale
A set of font sizes based on a mathematical ratio (e.g., 1.25). Defines h1 through body text so your hierarchy always feels proportional, not arbitrary.
Negative Space
The empty space between and around elements. More whitespace = higher perceived quality. Never fill every pixel - breathing room is a design decision.
Dark Mode
An alternate theme using light text on a dark background. Build it using CSS variables from day one so you don't have to rewrite everything later.
Spacing System
A set of consistent spacing values (e.g., 4px, 8px, 16px, 24px, 32px). Padding, margins, and gaps should always come from this scale - never random px values.
Micro-animations
Tiny, intentional transitions - button hover states, fade-ins, slide-ups. They make an interface feel alive without being distracting. 150–300ms is the sweet spot.
Responsive Design
A layout that adapts cleanly to all screen sizes using relative units, flexbox, grid, and media queries. Mobile-first is the standard - design small, then scale up.