Skip to main content

Default Tokens

The defaultTheme provides a comprehensive set of pre-defined design tokens. All color values are sourced from the Tailwind CSS v4 color palette and shadcn/ui theming convention.

Semantic Colors​

Generated by createThemeColors({ base: 'neutral', theme: 'neutral' }). These follow the shadcn/ui naming convention.

Light​

TokenValuePalette ColorDescription
background #FFFFFF—Page background
foreground #0a0a0aneutral.950Default text color
card #FFFFFF—Card background
card-foreground #0a0a0aneutral.950Card text
popover #FFFFFF—Popover background
popover-foreground #0a0a0aneutral.950Popover text
primary #171717neutral.900Primary actions
primary-foreground #fafafaneutral.50Text on primary
secondary #f5f5f5neutral.100Secondary surfaces
secondary-foreground #171717neutral.900Text on secondary
muted #f5f5f5neutral.100Muted backgrounds
muted-foreground #737373neutral.500Muted text
accent #f5f5f5neutral.100Accent surfaces
accent-foreground #171717neutral.900Text on accent
destructive #e7000bred.600Error / destructive
destructive-foreground #fafafaneutral.50Text on destructive
border #e5e5e5neutral.200Border color
input #e5e5e5neutral.200Input border color
ring #a1a1a1neutral.400Focus ring
chart-1 #f54900orange.600Chart color 1
chart-2 #009689teal.600Chart color 2
chart-3 #104e64cyan.900Chart color 3
chart-4 #ffb900amber.400Chart color 4
chart-5 #fe9a00amber.500Chart color 5

Dark​

TokenValuePalette ColorDescription
background #0a0a0aneutral.950Page background
foreground #fafafaneutral.50Default text color
card #171717neutral.900Card background
card-foreground #fafafaneutral.50Card text
popover #171717neutral.900Popover background
popover-foreground #fafafaneutral.50Popover text
primary #e5e5e5neutral.200Primary actions
primary-foreground #171717neutral.900Text on primary
secondary #262626neutral.800Secondary surfaces
secondary-foreground #fafafaneutral.50Text on secondary
muted #262626neutral.800Muted backgrounds
muted-foreground #a1a1a1neutral.400Muted text
accent #262626neutral.800Accent surfaces
accent-foreground #fafafaneutral.50Text on accent
destructive #ff6467red.400Error / destructive
destructive-foreground #fafafaneutral.50Text on destructive
border #262626neutral.800Border color
input #262626neutral.800Input border color
ring #737373neutral.500Focus ring
chart-1 #1447e6blue.700Chart color 1
chart-2 #00bc7demerald.500Chart color 2
chart-3 #fe9a00amber.500Chart color 3
chart-4 #ad46ffpurple.500Chart color 4
chart-5 #ff2056rose.500Chart color 5

Palette Colors​

Full Tailwind CSS v4 color palette. Access with {color}.{shade} format (e.g. blue.500, rose.100).

Gray Scales​

slate
50#f8fafc
100#f1f5f9
200#e2e8f0
300#cad5e2
400#90a1b9
500#62748e
600#45556c
700#314158
800#1d293d
900#0f172b
950#020618
gray
50#f9fafb
100#f3f4f6
200#e5e7eb
300#d1d5dc
400#99a1af
500#6a7282
600#4a5565
700#364153
800#1e2939
900#101828
950#030712
zinc
50#fafafa
100#f4f4f5
200#e4e4e7
300#d4d4d8
400#9f9fa9
500#71717b
600#52525c
700#3f3f46
800#27272a
900#18181b
950#09090b
neutral
50#fafafa
100#f5f5f5
200#e5e5e5
300#d4d4d4
400#a1a1a1
500#737373
600#525252
700#404040
800#262626
900#171717
950#0a0a0a
stone
50#fafaf9
100#f5f5f4
200#e7e5e4
300#d7d3d1
400#a6a09b
500#79716b
600#57534d
700#44403b
800#292524
900#1c1917
950#0c0a09

Colors​

red
50#fef2f2
100#ffe2e2
200#ffc9c9
300#ffa2a2
400#ff6467
500#fb2c36
600#e7000b
700#c10007
800#9f0712
900#82181a
950#460809
orange
50#fff7ed
100#ffedd4
200#ffd6a7
300#ffb869
400#ff8903
500#ff6900
600#f54900
700#ca3500
800#9f2d00
900#7e2a0c
950#441306
amber
50#fffbeb
100#fef3c6
200#fee685
300#ffd230
400#ffb900
500#fe9a00
600#e17100
700#bb4d00
800#973c00
900#7b3306
950#461901
yellow
50#fefce8
100#fef9c2
200#fff085
300#ffdf20
400#fdc700
500#f0b100
600#d08700
700#a65f00
800#894b00
900#733e0a
950#432004
lime
50#f7fee7
100#ecfcca
200#d8f999
300#bbf451
400#9ae600
500#7ccf00
600#5ea500
700#497d00
800#3d6300
900#35530e
950#192e03
green
50#f0fdf4
100#dcfce7
200#b9f8cf
300#7bf1a7
400#06df72
500#00c950
600#00a63e
700#008235
800#026630
900#0d542b
950#032e15
emerald
50#ecfdf5
100#d0fae5
200#a4f4cf
300#5ee9b5
400#00d492
500#00bc7d
600#009966
700#007a55
800#006045
900#004f3b
950#002c22
teal
50#f0fdfa
100#cbfbf1
200#96f7e4
300#46ecd4
400#00d5bd
500#00bba7
600#009689
700#00786f
800#005f5a
900#0b4f4a
950#022f2e
cyan
50#ecfeff
100#cefafe
200#a2f4fd
300#53eafd
400#00d3f2
500#00b8db
600#0092b8
700#007595
800#005f78
900#104e64
950#053345
sky
50#f0f9ff
100#dff2fe
200#b8e6fe
300#74d4ff
400#00bcff
500#00a6f4
600#0084d1
700#0069a8
800#00598a
900#024a70
950#052f4a
blue
50#eff6ff
100#dbeafe
200#bedbff
300#8ec5ff
400#51a2ff
500#2b7fff
600#155dfb
700#1447e6
800#193cb8
900#1c398e
950#162556
indigo
50#eef2ff
100#e0e7ff
200#c7d2ff
300#a3b3ff
400#7c86ff
500#615fff
600#4f39f6
700#432dd7
800#372aac
900#312c85
950#1e1a4d
violet
50#f5f3ff
100#ede9fe
200#ddd6ff
300#c4b4ff
400#a684ff
500#8e51ff
600#7f22fe
700#7008e7
800#5d0ec0
900#4d179a
950#2f0d68
purple
50#faf5ff
100#f3e8ff
200#e9d4ff
300#dab2ff
400#c27aff
500#ad46ff
600#9810fa
700#8200db
800#6e11b0
900#59168b
950#3c0366
fuchsia
50#fdf4ff
100#fae8ff
200#f6cfff
300#f4a8ff
400#ed6aff
500#e12afb
600#c800de
700#a800b7
800#8a0194
900#721378
950#4b004f
pink
50#fdf2f8
100#fce7f3
200#fccee8
300#fea5d5
400#fb64b6
500#f6339a
600#e60076
700#c6005b
800#a3004c
900#861043
950#510424
rose
50#fff1f2
100#ffe4e6
200#ffccd2
300#ffa1ad
400#ff637e
500#ff2056
600#ec003f
700#c70036
800#a50036
900#8b0836
950#4d0218

Base Colors​

TokenValue
white #FFFFFF
black #000000
transparenttransparent

Space / Sizes​

4px unit-based scale. sizes includes all space tokens plus full (100%) and half (50%).

TokenValue (px)
00
px1
0.52
14
28
312
416
520
624
728
832
936
1040
1248
1456
1664
2080
2496
32128
40160
48192

Radii​

TokenValue (px)
none0
sm4
md8
lg12
xl16
2xl24
full9999

Typography​

TokenfontSizefontWeightlineHeight
h132bold40
h224bold32
h32060028
body16—24
caption14—20
small12—16