Foundations
Colour, type, spacing, motion, icons and layout. The values every component is made of.
Color
Every colour is a role with a semantic token name. Pick the role, never the hex. Brand green is for action, links, selection and focus only.
Data visualisation
Charts in Reports and in Flo replies use one palette. Every mark passes 3:1 on white, brand green leads, and every chart has a table behind it.
Grid and border
Blocks in the main area sit on a 12-column grid. Space separates first; a 1px hairline groups when space isn't enough; 2px marks focus and selection.
Iconography
One set, one weight, two sizes. Phosphor bold, 16px with a 1.5px line, coloured like the text beside it.
Illustrations
Small, quiet art for empty states and onboarding. Built from the product sequences on Brand, simple cards, lines and the parallel-line pattern, in the C2 Celadon and stone palette.
Layout and scaffold
The layer between tokens and components. Tailwind with a spacing lint for primitives, and one app shell every page sits in.
Motion
Short and functional, copied from the app's code. Six durations, three curves, ten shared patterns that every component names, and a few signature motions on their own component pages.
Spacing, radius, elevation
The shape of every surface. Eight spacing steps, one radius per role, and shadows only for things that float.
Tokens
Every visual decision has a name. Screens use the name, never the value, so a change made once reaches every screen.
Typography
One family, three weights, four sizes. Every text style is a token with its size, line height, weight and tracking baked in.