Clear by default
Every decision has a purpose.
Every element works together.
00 / LIVE PREVIEW
A BETTER FOUNDATION
Everything you need.
Nothing you don't.
Build clear, confident products with a system
made for real work and lasting growth.
Built to scale
Every decision has a purpose.
Every element works together.
Ready for teams
Every decision has a purpose.
Every element works together.
Essential
$18Per user, per month
Studio
$42Per user, per month
Enterprise
$88Per user, per month
01 / TYPOGRAPHY
The quick brown fox
display / Instrument Serif / 72px / 400 / 0.95 / 0
The quick brown fox
h1 / Instrument Serif / 48px / 400 / 1 / 0
The quick brown fox
h2 / Instrument Serif / 32px / 400 / 1.1 / 0
The quick brown fox
h3 / Instrument Serif / 22px / 500 / 1.2 / 0
The quick brown fox
body / Work Sans / 16px / 400 / 1.6 / 0
The quick brown fox
small / Work Sans / 13px / 400 / 1.45 / 0
The quick brown fox
micro / Work Sans / 10px / 500 / 1.3 / 0.12em
Good design makes complex ideas feel inevitable. It creates rhythm, establishes trust and gives every element a clear role without asking for attention.
0 1 2 3 4 5 6 7 8 9
02 / COLOUR
SURFACES
TEXT
BORDERS
ACCENT
03 / BUTTONS
primary
secondary
ghost
destructive
SIZES
04 / FORMS
05 / CARDS
Build with intention
Use fewer elements and give each one a clear job.
6 MIN READA stronger foundation
Tokens keep decisions consistent across every surface.
SEPTEMBER 1006 / NAVIGATION
07 / FEEDBACK
A concise explanation appears here.
Nothing here yet
Create your first item to get started.
08 / DATA
ProjectMembersStatus
Atlas24Active
Beacon18Draft
Cedar42Active
Delta7Paused
Atlas24 membersActive
Beacon18 membersDraft
Cedar42 membersActive
Delta7 membersPaused
09 / OVERLAY
10 / SPACING & SHAPE
space-1 / 4px
space-2 / 8px
space-3 / 12px
space-4 / 16px
space-5 / 24px
space-6 / 32px
space-7 / 48px
space-8 / 64px
space-9 / 96px
radius-none
0px
0px
radius-control
4px
4px
radius-panel
calc(4px * 2)
calc(4px * 2)
border / 1px
border / 2px
border / 4px