For the designer
Change anything here and the demo beside you updates instantly. Nothing can be broken — "Reset to defaults" puts everything back exactly as it started.
- Colours — tap a square to pick, or type a hex code like
#faf9f7.
- Palettes — one tap re-themes the whole app. A good starting point.
- Text size — moves every size together, keeping headings larger than body text.
- Corners — how rounded cards, buttons and option chips are.
- Density — how much breathing room, and how tall the tap targets get.
- Save & share — your work saves itself. "Copy design link" gives you a link that reopens this exact design.
Starting palettes
One tap re-themes everything. You can keep editing afterwards.
Colours
The three status colours are used as a left border, an icon, or a light tint behind text — never as a big block of colour.
Type
These are fonts already on the reader's device, so the demo works with no internet connection. The real app ships Inter.
Corners
Option chips
Density
Spacing and how tall each tappable row is.
Button style
Save & share
Your design saves itself in this browser. The link below carries the whole design inside it.
Hand off to the developer
The second box below is the real file from the app. Paste it over frontend/src/lib/tokens.ts and the whole product picks up this design.
1. Theme as JSON
2. tokens.ts — paste-ready