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). Mat