---
name: design-principles
description: Shape clear, consistent, adaptable product experiences. Use when designing, implementing, reviewing, or refining interfaces, interaction flows, visual systems, responsive or adaptive layouts, feedback states, and motion.
---

# Design principles

## Work from intent

Identify the user task, information hierarchy, important states, and constraints before choosing visual treatment. Prefer the platform's established conventions unless a project has a documented reason to depart from them.

Make important actions, content, status, and error recovery easy to recognise. Do not rely on decoration, colour, or hover-only affordances to communicate essential meaning.

## Build a coherent system

Use shared tokens or reusable components for recurring colour, type, spacing, shape, elevation, and state rules. Prefer a small, deliberate system over one-off adjustments. Preserve exact requirements from an approved design and centralize durable rules rather than scattering overrides.

Design for the smallest practical context first, then adapt intentionally for available space, input method, and platform. Avoid fixed assumptions about screen size, pointer precision, orientation, network quality, or motion tolerance.

## Verify the rendered experience

Compare real rendered geometry and states with the agreed reference. Check loading, empty, error, success, focus, and reduced-motion states—not only the ideal static view.