# Web Design

> WHEN refining UI layout, typography, color, or polish; NOT code implementation; provides concise principles for intentional, legible design. Use when this capability is needed.

- Skill: `tomevault-io/web-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/web-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/web-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/web-design

---


# Web Design

Focus on clear hierarchy, generous spacing, and restrained styling to make interfaces feel intentional.

## Visual Hierarchy & Focus

- Group related elements by proximity and aligned edges; avoid scattered, evenly-spaced elements that compete for attention.
- Add hierarchy with weight before color: `font-weight: 600` and size changes beat random accent colors.
- Reduce noise: fewer borders; use spacing, background tints, or subtle dividers instead of heavy outlines.

## Layout & Spacing

- Use a consistent scale (4px or 8px).
- Make vertical rhythm obvious: larger gaps between sections than between labels/inputs.
- Set max widths for readability (e.g. `max-width: 1280px` for pages, `68-70ch` for text blocks).
- Pad clickable areas generously (12–16px vertical, 16–24px horizontal) so touch targets feel confident.

## Typography

- Pick one font family; use weight/size/letter-spacing for contrast instead of juggling many fonts.
- Define a small scale of text styles (e.g., `32/40`, `24/32`, `18/28`, `16/24`, `14/20`) and reuse them.
- Use letter-spacing for uppercase labels; use color to de-emphasize metadata instead of shrinking excessively.

```css
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: #6c7280;
}
```

## Color & Contrast

- Start with neutrals; let a single accent color carry primary actions. Avoid pure black/white—use softened grays for warmth.
- Build palettes by lightening/darkening the same hue; use low-saturation tints for surfaces and bolder shades for actions.
- Ensure contrast for text on tints; add a subtle border when a tinted panel touches a white background.
- Use color for meaning (success/info/warn/danger) plus an icon or text so color-blind users are covered.

## Depth, Shape & Elevation

- Prefer soft, diffuse shadows for elevation; combine slight offset with low opacity blur. Avoid harsh, opaque drop shadows.
- Keep radii consistent (e.g., 8–12px across inputs, cards, modals). Match inner elements to the parent radius.
- Separate stacked surfaces with either a light border or a faint shadow but not both.

## Components That Feel Designed

- Buttons: one clear primary, a low-emphasis secondary (ghost/text), and a destructive variant. Use consistent padding and radius.
- Forms: pair clear labels with inputs; avoid placeholder-as-label; show inline validation close to the field; use generous vertical spacing.
- Lists/tables: increase row height, soften alternating backgrounds, and highlight the primary cell with weight/color.
- Icons: keep stroke weight consistent; pair icons with labels unless the meaning is universal. Balance visual weight with padding.

## States, Feedback & Empty Space

- Design hover, active, focus, loading, error, and success states. A primary button should have at least hover + active + disabled styles.
- Use skeletons or subtle shimmer for loading instead of spinners alone; provide friendly empty states with a short “what to do next.”
- Clarify errors with color, icon, and text; reserve red for errors and use calmer hues for neutral info.
- Give content room to breathe—whitespace is a design tool, not wasted space.

## Compositional Polish

- Use consistent gaps, radii, shadows, and border colors across the entire UI to create harmony.
- Replace visual clutter (dividers, lines, boxes) with spacing and alignment; let one strong anchor (title or primary action) lead.
- When stacking elements on images, add a dark or light overlay to keep text legible.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/mintuz) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->