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