---
name: frontend-design
description: "Design clean, usable interfaces with restraint. Use when building UI, choosing layout, spacing, type, and color, designing component states, or improving the look and feel of a frontend."
---

# Frontend Design Skill

Use this skill whenever the task involves how an interface looks and feels: layout, spacing, typography, color, component design, states, and interaction.

The goal is interfaces that feel considered and quiet. Clear hierarchy, generous space, and restraint. Good defaults beat decoration.

## Principles

- Restraint first. Remove before you add. Most screens improve by deleting elements, not styling them.
- Hierarchy is the job. Make the most important thing obviously the most important and let everything else recede.
- Be consistent. Reuse the same spacing, type, and color tokens instead of inventing new ones per screen.
- Design the states, not just the happy path: loading, empty, error, and long-content each need a deliberate look.
- Content leads. Design around real text and real data, never lorem ipsum and three perfect items.

## Spacing and layout

- Use one spacing scale (for example 4 / 8 / 12 / 16 / 24 / 32) and stick to it. No arbitrary pixel values.
- Use whitespace to group related things and separate unrelated ones. Proximity is grouping.
- Align to a grid. Things that line up read as intentional.
- Give text a comfortable measure, roughly 60 to 75 characters per line.
- Prefer a clear single column on small screens over a cramped multi-column layout.

## Type

- Limit type sizes and weights. A small, fixed scale carries hierarchy better than many sizes.
- Set a readable body size (16px or up) and a relaxed line-height (around 1.5 to 1.7) for long text.
- Reach for weight and size to create emphasis before reaching for color.

## Color

- Keep a small, intentional palette: a background, a foreground, one or two accents, and muted and border tones.
- Lead with neutrals. Use accent color sparingly to mean something (an action, a state), not for decoration.
- Meet contrast minimums (WCAG AA is 4.5:1 for body text). Never communicate state with color alone.
- Support light and dark with the same tokens, not a separate hand-tuned theme.

## Components and states

- Design a component as a small set of explicit states, not one default mockup.
- Always show a focus state for keyboard users. Never remove the outline without replacing it.
- Make interactive elements look interactive and give immediate feedback on action.
- Keep affordances honest: buttons look like buttons, links look like links.

## Motion

- Motion should explain a change, not perform. Keep it short (around 150 to 250ms) and purposeful.
- Animate transforms and opacity, not layout, to stay smooth.
- Respect `prefers-reduced-motion` and provide a calm, motion-free path.

## Accessibility

- Start from semantic HTML; it gives you behavior and accessibility for free.
- Maintain visible focus, a logical tab order, and labels for icon-only controls.
- Check the design at 200% zoom and on a narrow viewport before calling it done.

## Review checklist

- Is the hierarchy obvious at a glance, even squinting?
- Is spacing on the scale and consistent across the screen?
- Are the loading, empty, and error states designed?
- Does it pass contrast, focus, and keyboard checks?
- Could anything be removed without losing meaning?