Design system reference
Design Tokens
Color
color.*text-primarybg-primaryborder-primaryring-primary/30dark:text-primarytext
primary
#0F172A
secondary
#334155
tertiary
#64748B
inverse
#FFFFFF
link
#AF9221
linkHover
#8E771B
disabled
#94A3B8
bg
canvas
#F8FAFC
surface
#FFFFFF
surfaceMuted
#F1F5F9
surfaceElevated
#FFFFFF
inverse
#0F172A
overlay
rgba(15, 23, 42, 0.6)
disabled
#E2E8F0
border
default
#E2E8F0
subtle
#F1F5F9
strong
#CBD5E1
focus
#AF9221
disabled
#E2E8F0
accent
primary
#AF9221
primaryHover
#8E771B
primaryActive
#6F5F15
secondary
#0EA5E9
secondaryHover
#0284C7
state
success
#16A34A
warning
#D97706
error
#DC2626
info
#0284C7
Typography
typography.*font-sansfont-displayfont-monotext-4xlfont-semibolddisplay - The quick brown fox jumps over the lazy dog.
textStyle.display
heading - The quick brown fox jumps over the lazy dog.
textStyle.heading
title - The quick brown fox jumps over the lazy dog.
textStyle.title
body - The quick brown fox jumps over the lazy dog.
textStyle.body
caption - The quick brown fox jumps over the lazy dog.
textStyle.caption
code - The quick brown fox jumps over the lazy dog.
textStyle.code
Spacing
spacing.*p-5px-6py-3gap-3space-y-40 - 0rem
0px
1 - 0.25rem
4px
2 - 0.5rem
8px
3 - 0.75rem
12px
4 - 1rem
16px
5 - 1.25rem
20px
6 - 1.5rem
24px
8 - 2rem
32px
10 - 2.5rem
40px
12 - 3rem
48px
16 - 4rem
64px
20 - 5rem
80px
24 - 6rem
96px
Border Radius
radius.*rounded-mdrounded-lgrounded-xlrounded-fullnone
0px
sm
0.25rem
md
0.5rem
lg
0.75rem
xl
1rem
2xl
1.5rem
full
9999px
Shadow
shadow.*shadow-smshadow-mdshadow-lgfocus:ring-2xs
sm
md
lg
focus
Motion & Layout
motion.*, layout.*transitionduration-200ease-in-outmax-w-5xllg:px-12