Tokens
The design-system primitives every component resolves to — values from kits/arc/tokens/* mirrored to Tailwind @theme in app/globals.css.
Color
surface
#fafafa
surfaceRaised
#ffffff
surfaceMuted
#f4f4f5
onSurface
#3f3f46
onSurfaceMuted
#71717b
primary
#1734a1
onPrimary
#ffffff
error
#c10007
onError
#ffffff
errorContainer
#fef2f2
errorBorder
#ffc9c9
success
#00c950
successStrong
#008236
successContainer
#f0fdf4
successBorder
#b9f8cf
warning
#f0b100
warningStrong
#a65f00
warningContainer
#fefce8
warningBorder
#fff085
infoContainer
#edf0fc
infoBorder
#c9d3f7
accent
#ca3500
accentContainer
#ffedd4
borderDefault
#9f9fa9
borderMuted
#e4e4e7
brand50
#edf0fc
brand100
#e0e5fb
brand200
#c9d3f7
brand300
#a6b6f2
brand400
#94a7f0
brand500
#5574e7
brand700
#1f45d6
brand900
#1734a1
brand950
#041662
Spacing
4xs
2px
3xs
4px
2xs
6px
xs
8px
sm
10px
md
12px
lg
16px
xl
20px
2xl
24px
3xl
32px
4xl
40px
Radius
sm
4px
md
6px
lg
10px
xl
12px
round
100px
Typography
heading-1
The quick brown fox
30/36 · 800
heading-2
The quick brown fox
24/32 · 700
heading-3
The quick brown fox
20/28 · 700
label-large
The quick brown fox
16/24 · 500
label-medium
The quick brown fox
15/20 · 500
label-small
The quick brown fox
12/16 · 500
body-medium
The quick brown fox
15/20 · 400
body-small
The quick brown fox
12/16 · 400
link-medium
The quick brown fox
15/20 · 400
link-medium-hovered
The quick brown fox
15/20 · 400
Opacity
hovered
0.08
pressed
0.16
focused
0.1
disabledContainer
0.1
disabledContent
0.4