Design system
One set of tokens and components for every Nutcake app. Everything here is a Server Component unless noted.
Colour
Tokens live in packages/ui and switch automatically in dark mode. Status colours only ever mean status.
- background
- card
- muted
- primary
- accent
- success
- warning
- destructive
- foreground
Type
Hanken Grotesk, with tabular figures on every number.
- Page title
- Capacity headroom 1,284.5
- Section title
- Capacity headroom 1,284.5
- Body
- Capacity headroom 1,284.5
- Secondary
- Capacity headroom 1,284.5
- Caption
- Capacity headroom 1,284.5
Buttons and badges
Actions use the button; state uses a badge or status badge.
Capacity bar
One track shows what is in use, what is requested (hatched), the limit (tick) and the total (the end of the track). It turns amber at 70% and red at 90%.
- In use
- Requested
- Limit
Metric
A label, a value and an optional hint. Use inside a definition list.
- Nodes
- 4
- 1 staging, 3 prod
- Memory in use
- 5.4 GiB
- of 14 GiB
- Pods
- 23
- Requests
- 2.1 cores
- 54% of allocatable
Table
Quiet rows, tabular numbers, right-aligned figures.
| Workload | Namespace | Memory |
|---|---|---|
| server-6fb787c964-72wbv | staging | 142 MiB |
| postgres-0 | staging | 118 MiB |
Empty and loading
Say what is missing and what to do next. Skeletons keep the layout still while data loads.
No workloads yet
Deploy an app and it appears here within a minute.