Design Tokens

All design decisions are expressed as tokens — named values that map intent to implementation across Web, iOS, and macOS. Changes to tokens propagate everywhere.

Export Tokens

Download the full token set as JSON or a Swift extension.

Color

Brand
brand.50
#f0faf4
brand.100
#dcf5e7
brand.200
#b9eace
brand.300
#84d4a8
brand.400
#4dba82
brand.500
#34a865
brand.600
#289452
brand.700
#1f7341
brand.800
#165733
brand.900
#0f3d24
brand.950
#071f12
brand.cyan
#00C0E8
Neutral
neutral.0
#ffffff
neutral.50
#fafafa
neutral.100
#f5f5f5
neutral.200
#e5e5e5
neutral.300
#d4d4d4
neutral.400
#a7a7ac
neutral.500
#747474
neutral.600
#525252
neutral.700
#404040
neutral.800
#282828
neutral.900
#171717
neutral.950
#0a0a0a
neutral.1000
#000000
Semantic
success
#22c55e
warning
#f59e0b
error
#ef4444
info
#3b82f6

Spacing

Spacing Scale
0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

Typography

Font Size
micro
Aa
10px
nano
Aa
9px
xs
Aa
11px
sm
Aa
13px
base
Aa
15px
lg
Aa
17px
xl
Aa
20px
2xl
Aa
24px
3xl
Aa
28px
4xl
Aa
34px
display
Aa
48px
Font Weight
Regular
400
Medium
500
Semibold
600
Bold
700

Motion

Duration
instant
80ms
fast
150ms
normal
250ms
slow
400ms
slower
600ms
typewriter
30ms
Easing
linear
linear
easeIn
cubic-bezier(0.4, 0, 1, 1)
easeOut
cubic-bezier(0, 0, 0.2, 1)
easeInOut
cubic-bezier(0.4, 0, 0.2, 1)
spring
cubic-bezier(0.16, 1, 0.3, 1)
springBouncy
cubic-bezier(0.34, 1.56, 0.64, 1)