The interface standard for everything we build.
Not a component gallery and not documentation. This is the reasoning, the measurements and the working code behind every surface in our products — enough that a developer who has never designed anything can ship an interface indistinguishable from one we designed on purpose.
Inspector Mode
Turn it on and hover anything in this app — a button, a table row, this paragraph. You get its box model, typography, contrast ratio, the exact tokens behind it, and a sentence on why that value was chosen. Click to freeze the readout, Esc to leave.
Six rules that produced everything else
Nothing is arbitrary
Every number on every page traces back to a token, and every token traces back to a reason. If a value cannot be justified, it does not ship.
Hierarchy before decoration
Size, weight, spacing and position do the work. Colour is the last tool reached for, not the first — it is the one that fails in greyscale, in sunlight, and for 300 million people.
Accessible by construction
Contrast, focus order, keyboard paths and semantics are inputs to the design, not an audit performed on it afterwards.
Fast is a feature
Under 100ms feels instant. Over 400ms feels broken. Motion exists to explain what changed, never to prove that we can animate.
Consistency over cleverness
A predictable interface is learned once. A delightful-but-novel one is re-learned on every screen, and the bill is paid by the user.
One way to do each thing
Three button heights, not seven. Six elevation levels, not a shadow per component. Constraint is what makes a system a system.
One job each. One name each.
The industry ships four names for the same box — modal, dialog, popup, lightbox — and a developer choosing between them is doing archaeology instead of work. So every component in here does exactly one job no other component does, under exactly one name. Every other name is recorded as an alias: it is searchable, and it tells you what we call it instead.
The big sections index themselves
Foundations, Components and Color each open with an Overview — the first row of the section in the sidebar, and its full contents. Everything else is short enough to list here.
Patterns
6Whole screens and whole states, assembled from the components above.
Principles
3The psychology underneath every rule in this Bible.
Three rules for contributors
- 1
Take the closest thing that already exists.
If a page here covers 80% of your case, use it and accept the other 20%. A near-match that everyone recognises beats a perfect one nobody has seen before.
- 2
If you must extend, extend the token, not the component.
A new colour goes in the semantic tier and gets a name that says what it means. Hard-coding a hex into a component is how a system quietly dies.
- 3
Bring the reasoning with the change.
Every page here answers “why is it this value?”. A contribution that cannot answer that question is a preference, and preferences do not belong in a standard.