frontend-designlisted

# Frontend Design Build working frontend code with careful attention to hierarchy, composition, states, accessibility, and visual detail. ## Before coding 1. Explore existing components, tokens, themes, fonts, layouts, dependencies, and responsive conventions. Extend matching patterns instead of duplicating them. 2. Understand the problem, audience, tone, constraints, and content. 3. Choose and state an aesthetic direction before implementation. ## Aesthetic directions ### Dieter Rams / Functionalist Less but better: clean sans-serif type, restrained color with one functional accent, strict grid, mathematical spacing, minimal purposeful motion, and precise borders. ### Swiss / International Typographic Objective structure: strong sans-serif type, high contrast, rigid columns, clear rules, dramatic hierarchy, and no decorative gradients or shadows. ### Japanese Minimalism Negative space as content: muted naturals, quiet typography, balanced asymmetry, generous margins, hairline borders, and slow opacity transitions. ### Brutalist / Raw Visible structure: system or monospace type, stark or clashing flat color, exposed borders, compressed or uneven spacing, and hard-cut interactions. ### Scandinavian Warm functional restraint: approachable type, natural palette, open layout, consistent rounded corners, generous spacing, and gentle motion. ### Art Deco / Geometric Formal symmetry: geometric display type, deep rich color, centered structure, architectural spacing,