---
name: web-design
description: Use when building any web page, HTML artifact, landing page, dashboard, slide deck, report, email, or UI component the user will look at. A taste-first design system that makes generated pages look intentional and crafted instead of generic "AI-made". Provides an aesthetic-direction process, design tokens, a starter CSS baseline, component patterns, and an anti-AI-slop checklist.
---
# Web design
Your default web output regresses to the mean of the training set — and the mean
is ugly: system fonts, a centered hero over a purple gradient, three identical
cards, emoji headers. That look reads instantly as "AI-made". This skill exists to
pull every page off that mean and onto something that looks **deliberately
designed**. Follow the process; don't free-style from scratch.
## Process (do these in order)
1. **Commit to one aesthetic direction.** Before any markup, pick a single point
of view that fits the content and name it in a comment. Examples:
- *Editorial* — serif display, wide measure, strong hierarchy, ink-on-paper.
- *Technical / precise* — mono or grotesk, tight grid, hairlines, data-dense.
- *Warm / organic* — humanist sans, soft neutrals, generous radius, gentle.
- *Brutalist* — flat, high-contrast, oversized type, raw structure.
- *Refined product* — neutral grotesk, restrained accent, soft depth.
Pick ONE and carry it through everything. Mixing directions = slop.
2. **Set tokens first.** Define type, color, space, radius as CSS custom
properties at the top (see baseline below). Build from tokens, never hardcode
one-off values. Consistency is most of what "designed" means.
3. **Layout with a real grid + asymmetry.** Use CSS grid. Constrain text measure
to ~60–72ch. Do NOT center everything — anchor content, use deliberate
asymmetry, let whitespace do work. Generous, *uneven* spacing reads as
intentional; uniform padding reads as a template.
4. **Compose components** from the patterns below, restyled to your direction.
5. **Self-review against the checklist**, then — when it matters — open the page
in the browser, look at it, and fix whatever reads as cheap before sending.
## Typography (80% of the result)
- **Load a real typeface from a CDN.** Never ship the system default. Good,
free, characterful pairings:
- Editorial: `Fraunces` or `Libre Caslon Text` display + `Inter` / `Newsreader` body.
- Technical: `Space Grotesk` + `IBM Plex Mono`, or `Geist` + `Geist Mono`.
- Warm: `Bricolage Grotesque` + `Instrument Sans`.
- Refined: `General Sans` / `Satoshi` (Fontshare) for both.
Use at most two families.
- **Type scale with real contrast.** Display should be dramatically larger than
body (use `clamp()` for fluid display). A flat scale where h1≈h2≈body is the
#1 tell of an undesigned page.
- **Body:** line-height 1.5–1.7, measure ≤72ch, weight 400, generous paragraph
spacing. **Headings:** tighter line-height (1.05–1.2), often a heavier or
contrasting weight, slightly negative letter-spacing on large display sizes.
## Color
- Build on a **consistent lightness scale**, not random hexes. Prefer
`oklch()` / `hsl()` so steps are perceptually even.
- One near-neutral background (an *off*-white like `#fafaf7` or a true dark like
`#0e0e10` — **never** pure `#fff` / `#000` for large areas) + a small set of
ink shades + **one or two** accents max.
- **Avoid the AI-slop palette:** purple→indigo→blue gradients, oversaturated
neon, rainbow gradients, glassmorphism everywhere. A flat or barely-there
gradient in one considered place beats gradients on every surface.
- Hit **WCAG AA** contrast for text (4.5:1 body, 3:1 large).
## Space, depth, detail
- One spacing scale, 4px base: `4 8 12 16 24 32 48 64 96 128`. Use it everywhere.
- Whitespace is a feature — be generous, especially around headings and between
sections. Cramped = cheap.
- **Subtle depth:** hairline (1px) borders in a low-contrast ink, restrained
shadows (layered, low-opacity — not the default `0 4px 6px rgba(0,0,0,.1)`),
ONE consistent corner radius reused everywhere (or 0 for brutalist/editorial).
- Motion: subtle and purposeful (150–250ms ease), and **always** wrap in
`@media (prefers-reduced-motion: reduce)`.
## Starter CSS baseline
Paste this in, then override the tokens to match your chosen direction. It's a
floor, not a finish — push the type scale and accent further per direction.
```html
```
## Component patterns (restyle to direction)
- **Hero:** asymmetric, not dead-center. A large display line (use the full type
scale), a short ink-soft subhead capped at the measure, one primary action.
Anchor left or split into a 2-col grid; avoid the centered-text-on-blob cliché.
- **Cards:** vary them — different sizes/spans in a grid (bento), not three
identical boxes. Hairline border OR soft surface fill, not both + shadow.
- **Sections:** lead with a real heading and let whitespace separate them; don't
prefix headings with emoji. Alternate rhythm (full-bleed vs. constrained).
- **Buttons:** solid accent for primary, quiet bordered/ghost for secondary.
Comfortable padding, the shared radius, a real hover/active/focus state.
- **Data / tables:** align numbers right, use tabular figures
(`font-variant-numeric: tabular-nums`), hairline row separators, generous cell
padding. No zebra-stripe-plus-borders-plus-shadow pileup.
## Anti-slop checklist (reject the page if any are true)
- [ ] Still using a system/default font → load a real one.
- [ ] Type scale is flat (heading barely bigger than body) → increase contrast.
- [ ] Everything centered → introduce a grid and asymmetry.
- [ ] Purple/indigo→blue or neon gradient present → replace with restrained palette.
- [ ] Three identical feature cards → vary sizes/content or use a bento layout.
- [ ] Emoji as section-heading bullets → remove.
- [ ] Pure #fff background + pure #000 text → use off-white / near-black.
- [ ] Gradients/shadows/glass on every surface → keep depth subtle and sparse.
- [ ] Cramped, uniform padding → add generous, uneven whitespace.
- [ ] No focus states, sub-AA contrast, or not responsive → fix the basics.
## Deliverable
Prefer a single self-contained `.html` file (fonts via CDN, CSS inline or in one
`