frontend-design

Front-of-house design is one discipline. A screen earns its keep only when the visual system, the usability, the taste, and the site structure hold at once: tidy pixels over an invisible empty state still fail the user, and a polished component on the wrong page leaks every visitor it wins. Treat each rule below as a default to follow unless a stated reason overrides it.

The default aesthetic this skill reaches for is Swiss/International editorial design crossed with brutalism: a strong grid, generous whitespace, a restrained palette, bold typographic hierarchy, raw and honest structure, and high contrast (reference site: misostack.com). WCAG AA is a floor that holds even in the brutalist direction (4.5:1 normal text, 3:1 large text). For brand-level positioning, voice, and tokens that span every surface, see ../brandkit/SKILL.md.

The depth lives in five references; load the ones a task touches before judging or building:

• references/visual-rules.md: spacing, type, color, hierarchy, layout, depth, motion, and the visual accessibility floor.
• references/ux-and-states.md: Nielsen heuristics, affordances, forms, the five system states, feedback, navigation, and interaction-level accessibility.
• references/taste-and-anti-slop.md: the intentional-vs-generic test and the markers of taste, plus the visual and prose tells of AI slop with the moves that defeat them.
• references/aesthetic-swiss-brutalist.md: the default house style, its fit and its limits, plus an accessible worked example.
• references/information-architecture.md: page taxonomy, the conversion path, landing-page message hierarchy, and SEO structure.

Steps

1. Frame the surface, the user, and the one goal. State the surface under design (landing page, dashboard, form, component, or whole site), the primary user, and the single job the surface exists to complete, then load the references the task touches. For a multi-page site, name the one primary conversion per references/information-architecture.md. Done when the surface, its user, and its single primary action (or site-level conversion) are each written in one sentence, and no two actions both claim "primary."

2. Lock the visual system. Adopt one 8pt spacing scale, one modular type scale capped at two typefaces, and a restrained palette (one neutral ramp, one accent, semantic hues), per references/visual-rules.md; then choose the aesthetic, defaulting to the Swiss-brutalist house style in references/aesthetic-swiss-brutalist.md unless the brief or a trust-sensitive audience calls for a calmer treatment. Done when every margin, padding, gap, and font-size maps to a named scale step with zero off-scale values, the palette sits within budget, and the chosen aesthetic is named.

3. Build hierarchy and verify contrast. Rank elements by importance and express that rank through size, weight, color, and whitespace, giving the surface exactly one primary action; then run every text-on-background pair, including text on an accent, through a contrast checker: brandkit's tokens.py contrast <fg> <bg> is the deciding gate, with axe or Lighthouse as advisory second opinions. Done when the primary action is the most prominent element, no separation relies on a border that whitespace or a tint could carry (outside a stated brutalist system), and the checker reports every pair at WCAG AA or higher (4.5:1 body, 3:1 large).