frontend-designlisted

# Frontend Design — Front of House > "Build front-end UIs" ## When to use - It is time to write real interface code — "build the landing page", "code this dashboard UI". - An existing front-end looks generic — "this screams AI-generated, give it a point of view". - A design system exists and needs its first consumer — pairs with `ui-ux-pro-max` tokens. - The user wants craft, not scaffolding — "make it feel expensive", "no template energy". ## Workflow 1. **Commit to one art direction before writing a line.** Editorial (serif display, generous whitespace, hairline rules), brutalist (raw borders, mono, hard shadows), soft-depth (layered surfaces, tinted shadows), retro-terminal (phosphor palette, restraint with the scanlines), industrial (dense, technical, visible grid) — or argue for another. Write the direction as one sentence; every later decision must serve it. 2. **Set the typographic reality.** Two families max; display size at least 3x body — no 14/16/18 mush. Tighten letter-spacing on large sizes, widen it on small caps and labels. Load one hosted family at most; fall back to a deliberate system stack. 3. **Structure in semantic HTML first.** Landmarks (header/nav/main/section/footer), heading order without skips, buttons are `<button>`, links are `<a>`, inputs have labels. No div soup. 4. **Style with intent.** Spacing on one scale, color through role variables, and exactly one signature move executed hard — an oversized numeral, an asymme