Foundations
Foundations are the values every screen is built from. They live in tokens/
as CSS variables and JSON, and are the same in the web app, the sibling apps and the native apps. Use a token,
never a typed-in value: that is what keeps light and dark, tenant colours and reduced motion working.
Colour and theming
Section titled “Colour and theming”Design tokensEvery colour token in light and dark, side by side, generated from tokens.json.
Token values and contrastWhere every value comes from, and the computed contrast of each text token on every surface.
Paste-ready CSSThe complete token block for index.css, light and dark.
ThemingLight, dark and system: the token layer, the switch, the pre-paint script and a live demo.
Type, shape and icons
Section titled “Type, shape and icons”Type in the productFaces and roles, the self-hosted CSS, the type-scale tokens and the mono decision.
Shape, spacing and elevationRadii, borders, shadows, the spacing scale and the motion values.
IconographyThe icon set, sizes and the rules for using it.
MotionDurations, easings and distances, and every animation built from them.
Related
Section titled “Related”- The brand these values come from: Colour and Typography.
- Why the dark palette looks the way it does: Lessons learned.
- How components use the foundations: Components and patterns.
Portable tokens and accessibility
Section titled “Portable tokens and accessibility”Token architecture · Search roles and usage · Complete usage table · Contrast matrix · Platform exports and checksums · Accessibility