Visual Design Language Skill

Counters "generic AI-generated UI" by applying deliberate typographic, depth, and motion choices instead of defaults.

Typography hierarchy

Establish a clear scale mapped to real semantic levels, not arbitrary sizes: Display (hero) → H1 → H2 → H3 → Body → Caption. Each level should have an obvious, consistent size/weight jump from its neighbors.
Pair a distinctive display/heading font with a highly legible body font rather than one font for everything — even a single well-chosen font family with varied weights (400/500/600/700) can carry hierarchy if a second family isn't warranted.
Line length: cap body text at ~60-75 characters (max-w-prose) for readability.
Line height: tighter for large headings (1.1-1.2), roomier for body text (1.5-1.65).

Glassmorphism: backdrop-blur + semi-transparent background + subtle border (border-white/10) — effective for floating nav bars, overlays, and cards over rich backgrounds; overusing it on every card flattens its impact and hurts text contrast/readability. Always verify text contrast still passes on top of a blurred/translucent surface.
Layered elevation: use a consistent shadow scale (sm/md/lg/xl tokens, not ad hoc box-shadow values) to communicate stacking order — modals > dropdowns > cards > base.
Gradients & accent color: use sparingly as an intentional signature (a hero background, a CTA button, a brand accent line) rather than saturating the whole interface.

Hover/focus states on every interactive element, even subtle ones (slight scale, color shift, underline) — their absence is what makes an interface feel unfinished.
State transitions (loading → success, item added, form submitted) get a brief, purposeful animation (see motion-design-toolkit skill) rather than an instant jarring swap.
Keep micro-interaction durations short (100-300ms) — anything longer feels sluggish for frequent interactions.