Skip to content
Brightboard · Design system
The system behind the screens
Brightboard 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
Aa
Fraunces
Display and figures
Lexend
Interface text
Who needs help this week
Section title · 14 / 600
Body text for tables and forms · 14 / 400
Caption and data · 12, tabular numbers
Components
On trackBehindAt riskSubmitted
Average progress
72%
Up 6.0 percent, favourablevs last period
Helper text sits under the field.
Progress
Complete82%
Halfway54%
Starting23%
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.