Design principles
Ten ideas that run through every hub. Not rules for any one discipline — ideas that hold whether you are working on type, colour, layout, motion, or copy.
-
Structure before style
Solve the structural problem first. Style applied to unsound structure produces work that looks good in tools but fails in use. The hubs return to this repeatedly: form before typeface, grid before colour, semantic HTML before visual polish. Structure is the problem. Style is how you finish solving it.
-
Function determines form
Every visual choice should have a functional justification. If you cannot explain why a design decision exists in terms of what it accomplishes for the user, it is at best decorative and at worst confusing. This applies to spacing, colour, motion, copy length, and interaction state — every element either earns its place or clutters the signal.
-
Hierarchy is the primary communication tool
Elements that look alike read as equally important. Visual hierarchy — in type, spacing, colour, layout, and motion — is how a designer communicates what matters and in what order. When everything is bold, nothing reads as bold. When every section has the same weight, the interface has not been structured; it has been assembled. Hierarchy is not a style choice. It is a structural decision about the order in which information reaches the user.
-
Constraints accelerate decisions
A design system — type scale, spacing scale, colour tokens, motion tokens — makes every decision faster because most decisions are already made. Unconstrained design is slower, less consistent, and harder for teams to build from. Constraints are not limitations. They are infrastructure.
-
Systems over instances
Designing a single button is less valuable than designing the rules that govern all buttons. Choosing a single colour is less valuable than defining the semantic token that applies that colour to every element that serves the same purpose. Systems scale; instances don't. Every hub addresses the system level: the scale, not the size; the token, not the value; the pattern, not the screen.
-
Accessibility is structural, not supplemental
Contrast ratios, keyboard operation, semantic markup, readable copy, and reduced-motion alternatives are not features added after the design is done. They are properties of a structurally sound design. A layout that only works for users with perfect vision, full motor control, and no assistive technology is not a finished design — it is a design that has not yet accounted for the majority of its eventual users.
-
Users are not homogeneous
Ability, device, context, and prior knowledge vary across your audience and within a single user's sessions. Design for the realistic range — permanent, temporary, and situational differences in ability; fast and slow connections; touch screens and keyboards; expert users and first-time visitors. The user in ideal conditions is not the user. They are the best-case scenario.
-
Language is a design material
Button labels, error messages, empty states, headings, and microcopy are part of the interface — not the content team's job to fill in once the layout is done. Poor copy undermines good visual design. Good copy can rescue mediocre visual design. The words a designer chooses to place in an interface are as consequential as the layout they choose to place them in.
-
Motion communicates cause and effect
Animation is not decoration. It communicates what caused something to appear, where an element came from, and what happened as a result of an action. Motion that communicates nothing is noise that slows users down. Motion that communicates incorrectly teaches users the wrong mental model. The threshold for adding animation is not "can we?" — it is "does this communicate something that could not be communicated without it?"
-
Context determines correctness
There is no universally correct line height, spacing value, animation duration, or colour palette. The right answer depends on content type, user context, task, and purpose. These hubs provide frameworks for making those judgements — starting points and constraints, not universal rules. "It depends" is not an evasion. It is the correct structure of the answer, followed by an explanation of what it depends on.