Inbox
Design system
66 tokens · 11 type styles · 6 elevations, generated from the Figma file.
Colour
Semantic tokens only. Every one carries a light and a dark value, so a component never needs to know which mode it is in.
text
bg
border
status
heat
tag
Type
Inter throughout, with JetBrains Mono reserved for identifiers, timestamps and anything the eye needs to compare column-wise.
Elevation
A card needs exactly one separation mechanism. On bg/canvas that is a hairline outline; on bg/subtle it is tone plus a shadow. Never both.
Radius
xs · 4
sm · 6
md · 8
lg · 12
xl · 16
2xl · 20
full · 999
Buttons
Overlays and feedback
Toast reports, Banner persists, Tooltip explains, Modal asks, Insight Card summarises. Each one is a place to put something that must not displace the thing it is about — the reason the swap card no longer turns into its own receipt.
Toast
Stacks bottom-right, capped at three, auto-dismisses. An action gets an Undo rather than a confirmation dialog wherever the work is reversible.
Tooltip
Opens on hover and on focus. It describes the trigger; it never becomes the trigger’s name, so an icon button still needs its own label.
Banner
Two vendors renew this month
Three requests have waited five days or more
Sync with the finance ledger failed
SOC 2 evidence accepted
Page-level and persistent — it belongs to the thing it is about. A Toast is the opposite: transient and global. The left edge repeats what the tint says, for anyone who cannot separate the tints.
Insight card
The sparkline is deliberately unlabelled: it carries shape, not values. If a reader needs the values, this is the wrong component and it wants a chart.
Modal
Escape, the scrim and the close button all dismiss — except on the destructive one, where the scrim is disabled so a stray click cannot answer the question.
Tags
Tag is semantic — good, bad, pending. Category Tag's hue is an identity: it separates one category from its neighbours and means nothing on its own.
Status and priority
Both encode their value by shape as well as hue, so they survive greyscale. Priority doubles up: filled-bar count and colour.
Fields
A control keeps its border and Shadow/Input. That is not a rule-16 violation — on a field the border is an affordance signalling editability, not a separation mechanism.
We use this to match existing conversations.
Enter a full number including country code.
pick any
pick one
toggle
Segmented
The track is a recess — tone only, never an outline — and the active segment is lifted. An outlined pill inside an outlined track draws the same edge three times and reads as a wireframe.
Data
Delta separates direction from sentiment, because a falling number can be good news — a shorter sales cycle is a win.
Avatars
Cards
The same component, told what it is sitting on. Getting this wrong is what makes a screen look like a wireframe.
on bg/canvas — outline
Hairline outline at radius/lg, no shadow.
on bg/subtle — lift
Shadow at radius/xl, no outline.