Design system
Every component below is themed by the same token set the portal uses. Switch tenants in the brand studio and this page repaints with them, which is the only honest way to prove a design system is actually white-label.
Colour
Two seed hexes generate three ramps and the semantic layer.
Primary ramp: generated in OKLCH
Semantic tokens
- --canvas
- Page background behind every surface
- --surface
- Cards, tables, menus: the default plane
- --surface-2
- Recessed areas: table headers, footers, wells
- --border
- Hairline separators at rest
- --text
- Primary copy
- --text-secondary
- Body copy inside components
- --text-muted
- Labels, metadata, axis text
- --primary
- The one interactive colour
- --primary-subtle
- Selected rows, active nav, quiet emphasis
- --ring
- Focus ring: always visible, never removed
Status colours are fixed: a tenant cannot rebrand “overdue”
Each ships with an icon and a word, so state never depends on colour alone. Primary at 5.5:1 on white.
Typography
geometric: display face for headings, UI sans for everything else.
Display 1 · 36/1.05
The quick brown fox jumps over the lazy dog
Display 2 · 28/1.15
The quick brown fox jumps over the lazy dog
Heading · 18/1.4
The quick brown fox jumps over the lazy dog
Body · 14/1.7
The quick brown fox jumps over the lazy dog
Small · 13/1.6
The quick brown fox jumps over the lazy dog
Caption · 12/1.5
The quick brown fox jumps over the lazy dog
Buttons
Six variants, four sizes, loading and disabled states.
Forms
Labels, hints, errors, and every control on the same 40px rhythm.
We only use this for portal notifications.
That reference doesn't match any open invoice.
Read-only fields keep their label.
Data display
Cards, tables, avatars, meters, and the loading state for each.
Card with a header
Description sits under the title
Loading state
Skeletons match the shape of what’s coming
Charts
One series wears the brand hue. Multi-series charts use a fixed, colour-blind-validated palette.
Outstanding
$65,700
12.4%vs last month
Hours this month
619
8.9%vs last month
Sparkline on its own
Billed value
Single series, so it takes the brand colour: no adjacent pair to confuse.
Show the numbers
| Month | Billed |
|---|---|
| Sep | $38,400 |
| Oct | $41,200 |
| Nov | $44,900 |
| Dec | $29,800 |
| Jan | $33,600 |
| Feb | $47,100 |
| Mar | $52,400 |
| Apr | $49,800 |
| May | $58,200 |
| Jun | $61,700 |
| Jul | $57,300 |
| Aug | $64,900 |
Hours by discipline
Four series, so identity comes from the legend as well as the colour.
- Design
- Research
- Production
- Account
Show the numbers
| Month | Design | Research | Production | Account |
|---|---|---|---|---|
| Sep | 186 | 62 | 94 | 38 |
| Oct | 201 | 48 | 110 | 42 |
| Nov | 214 | 71 | 121 | 40 |
| Dec | 142 | 34 | 78 | 28 |
| Jan | 168 | 52 | 88 | 34 |
| Feb | 222 | 84 | 131 | 46 |
| Mar | 241 | 76 | 148 | 51 |
| Apr | 228 | 69 | 139 | 48 |
| May | 254 | 92 | 162 | 55 |
| Jun | 268 | 88 | 171 | 58 |
| Jul | 246 | 74 | 154 | 52 |
| Aug | 279 | 96 | 183 | 61 |
Ranked magnitude
- Atlas rebrand$96,400of 148k
- Harbour app redesign$118,900of 210k
- Kea packaging system$71,200of 76k
- Orchard campaign$52,300of 54k