Principles

These are the values beneath the system. Not the rules of one screen, but what we lean on when a rule doesn’t exist yet. When two options both look fine, the principles break the tie. New here? Read this page first: it explains why the rest of the site is shaped the way it is.

Seeded from Figma → Principles. These values live on the Figma board; this page is where we write them out in full, each with the decision it protects. One of them (tokens describe roles, never colours) is really a token rule, not a screen principle, so it now lives in Tokens.

The six principles

1. Colour is signage, not decoration. Every colour earns its place by meaning something, never for looks alone. See Color as signage.
2. One primary action per screen. The eye should never have to choose between two “main” things. See Action hierarchy.
3. Ride Material 3. Document the delta, not Material. We don’t re-explain the framework; we write down only where, and why, we diverge from it.
4. Nothing owns its width. Components flow to fit their container. Fluid by default, never a hard-coded size.
5. Honest before clever. The brand is warm, but limits and errors are always stated plainly.
6. As lean as the team, architected to scale. Complexity is a cost. We only pay it when it buys something real.

Why these come first

Principles open the Foundations because they cut across everything: colour, type, spacing and every component answer to them. Read them before the raw materials. Each one then links out to the concrete rule or Decision Log entry where it becomes actionable, so you can always trace a rule back to the value it came from.