Pocketwise · Design system
The system behind the screens
Pocketwise runs on the same component kit as the other designs. Only the tokens below change, and they carry the whole product: colour, type, shape and the components built from them.
Colour
Primary
--primary
Accent
--highlight
Ink
--foreground
Muted
--muted-foreground
Surface
--card
Canvas
--background
Status
Data
Type
Plus Jakarta Sans
Display and figures
Plus Jakarta Sans
Interface text
Your week, at a glance
Section title · 14 / 600
Body text for tables and forms · 14 / 400
Caption and data · 12, tabular numbers
Components
Spent this week
€350.60
More than your balance on this card.
Progress
Shape and spacing
radius-sm
radius-md
radius-lg
radius-xl
4
8
12
16
24
32
Every colour is a token, so light and dark mode come from one source. Spacing runs on a 4px grid.