# UI style

## Foundation

Use the Ink & Signal system: near-black blue surfaces, warm Paper sections,
white and blue-tinted text, and a single Signal-blue interaction colour.

## Layout

- Prioritize content hierarchy and generous but controlled negative space.
- Use a consistent 4px spacing base and responsive content widths.
- Keep primary actions visible without repeating them in every section.
- Use borders and surface changes for depth; avoid heavy black shadows.
- Design mobile-first and verify at 320, 768, 1024, and 1440px.

## Components

- Buttons: clear labels, minimum 44px target, visible focus state.
- Cards: restrained radius, subtle border, no decorative card grids by default.
- Forms: persistent labels, helpful errors, keyboard access, no placeholder-only labels.
- Motion: 150-300ms for interface feedback; respect reduced-motion settings.

## Accessibility

- WCAG AA contrast: 4.5:1 normal text, 3:1 large text and controls.
- Never use colour alone to convey state.
- Preserve semantic heading order and meaningful link labels.
- Provide alt text for informative images; decorative images use empty alt text.

## Avoid

Purple UI gradients, glassmorphism everywhere, oversized rounded cards,
excessive glow, invisible focus states, layout-shifting hover effects, emoji
icons, and generic AI dashboard styling.