Philosophy and principles

Twelve principles. A principle here is a rule that is already enforced in the work, which is the only kind that survives contact with it.

Principles come before components: a system that opens with its token architecture is describing its plumbing. This is what the system believes.

1. One thing per view

A slide, a screen or a page makes one point. Hierarchy is not styling applied at the end; it is the decision about what is read first, second, and not at all. When it does not fit, cut content — never compress the frame.

Rules out: three arguments on one slide · two primary actions on a screen · shrinking type or padding to fit more in · a caption kept at the cost of the rhythm.

2. Clarity is not negotiable

A reader must never have to work out what they are looking at. Every mark states its own scale, its own bounds and its own number. If an element needs explaining, it is not finished.

Rules out: an axis with labels and no gridlines · a value with no baseline to read it against · a chart so reduced it reads as a placeholder · a number floating without a container · a legend the reader must decode.

3. Light, but finished

Air is a decision. Lightness is not emptiness and completeness is not fullness — a design is done when nothing more can be removed, not when the space is used up.

Rules out: whitespace standing in for an unresolved layout · filling a gap because it looks empty · a decorative element carrying no information · calling something minimal when it is merely unfinished.

4. Consistent in the parts, varied in the composition

This is the one that looks like a contradiction and is not. A component is identical everywhere, to the pixel — and two screens built from those components must not look alike. Sameness belongs to the parts; difference belongs to what you build with them.

Rules out: rescaling a component to an arbitrary size · four identical sparklines under four different numbers · slide 2 being slide 1 with new numbers · a whole dashboard in one tint · a “better” variant of a component that exists on one screen only.

5. Nothing from outside the system — and nothing patched on top of it

Colours come from the ramps, type from the roles, components from the library. And when an instance looks wrong, the fix is the component, never an override on the instance. Painting over an instance is the same sin as typing a hex.

Rules out: a hand-typed hex · a font chosen from a reference · a one-off component built beside an existing one · a fill painted on an instance to hide a scaling mistake · a shadow stacked by hand.

6. Density is information

A dashboard is legitimately denser than a slide, and that is not a licence for noise. The limit is not how many elements there are — it is whether each one carries information. An element that repeats what its neighbour already said is ink with no data, and it goes.

Rules out: four identical tracks under four numbers · a decorative sparkline that shows nothing · rows crammed 3 px apart · a big chart carrying one line · adding elements to make a pale block look full, instead of adding a different kind of content.

7. Believable, and recognisably ours

The work has to be trustworthy on two counts: someone who knows us recognises it without seeing the logo, and nothing on it is a lie. Brand lives in the ramps, the type and the rhythm — not in a mark in the corner. Credibility lives in the numbers agreeing and in the bad ones being shown.

Rules out: work that could belong to any company in our space · per-product identities that drift (the MAFO DS fork is the standing example) · a screen where the header total and the table disagree · a real partner’s name on invented data · four green deltas in a row.

8. The numbers must agree, everywhere they appear

A figure shown twice must be the same figure. A total must be the sum of its parts. A headline number must match the chart underneath it. Data is never softened to look better.

Rules out: a KPI that disagrees with its own chart · a breakdown that does not sum to its total · the same metric differing between two screens of one product · blurring a number to hide that it is weak · a rounded figure that changes the conclusion.

9. The machine places, the person writes

Automation decides where content goes. It never decides what it says.

Rules out: generated copy presented as the user’s own · a tool that rewrites or “improves” text someone typed · filler words invented to make a layout balance · any automation that produces a sentence a person did not write.

10. The user’s content is precious, and state is honest

Nothing the user made is silently dropped, and the interface never reports a state that is not true.

Rules out: content quietly discarded because it did not fit the layout · a delete that only hides · a saved state shown before the save completed · truncation with no way to see the rest.

11. Nothing reaches production until it is promoted

Status is enforced by the build, not displayed as decoration. A draft cannot leak into a production path because it looks finished.

Rules out: a beta component used in a client deliverable · a status badge nothing checks · a “temporary” exception that ships · promotion by habit rather than by decision.

12. Accessibility

The system must be usable by someone who cannot see a colour, cannot use a mouse, or cannot read small text — and that is checked, not assumed.

The floors it is held to, and what measures them, are on the Accessibility page.