Foundations
The primitives — colour, typography, spacing, shape, and motion. Everything else composes from these.
This documentation is rendered by the design system it describes. Every colour chip, type row, and code block on this site is produced from the same tokens the pages document.
| If you want to… | Read |
|---|---|
| Use the palette correctly, including dark mode | Colour |
| Set text in the brand’s voice | Typography |
| Place the logo without breaking it | Logo usage |
| Build an interface | Interface |
| Produce a deck, signature, or social card | Collateral |
| Know what you are allowed to reuse | Governance |
| Pull the raw values into a project | Tokens |
Foundations are the primitives — colour, type, spacing, shape, motion. Everything else composes from them.
Logo covers the mark, the four lockups, and the rules that keep them legible.
Interface applies the foundations to screens: components, code surfaces, dark mode, icons, and forms.
Collateral covers the artefacts that leave the product — decks, cards, signatures, social imagery.
Governance covers licensing, trademark, the pre-launch legal assessment, and asset provenance.
The canonical design documents live in brand/
in the repository — the HTML design-system documents, logo files, document
templates, and the token exports. This site is the readable presentation of
those sources, not a replacement for them.
The primitives — colour, typography, spacing, shape, and motion. Everything else composes from these.
The mark, the four lockups, and the rules that keep them legible.
The foundations applied to screens — components, code surfaces, dark mode, icons, and forms.
Truthful status, social-preview, diagram, and demo patterns.
Motion, audio, video, photography, and presentation guidance.
Artefacts that leave the product — cards, signatures, and social imagery.
Licensing, trademark, the pre-launch legal assessment, and per-asset provenance.
Machine-readable exports of the design values, and how to consume them.