web-designlisted

# 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; u