Design Token v2.4

A collection of key-value pairs for colors, spacing, typography, and more, designed for use in Pixel Vue 3. The new design token v2.4 also supports dark mode out of the box with Semantic colors.

Colors

Foundation Colors

currentcolor

dark

debug

lightPurple

transparent

vibrantPurple

white

brand

dark

neutral

slate

blue

emerald

fuchsia

green

indigo

lime

orange

red

teal

violet

yellow

Semantic Colors

Token	Light	Dark	Enterprise
background.surface	`#F1F5F9 -`	`#161A1D colors.dark`	`#F8F9F9 colors.slate.100`
background.surface.bold	`#272B32 colors.neutral.1000`	`#F7F8F9 colors.neutral.100`	`#142D26 colors.emerald.1000`
background.information	`#EEF0FC colors.indigo.100`	`#1D2656 colors.indigo.1000`	`#EEF0FC colors.indigo.100`
background.information.bold	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#4B61DC colors.indigo.700`
background.stage	`#FFFFFF colors.white`	`#1D2125 colors.dark.100`	`#FFFFFF colors.white`
background.overlay	`#232933CC -`	`#657F9980 -`	`#222222CC -`
background.disabled	`#1d1f240a colors.neutral.100a`	`#bcd6f00a colors.dark.100a`	`#F8F9F9 colors.slate.100`
background.inverse	`#1D2125 colors.dark.100`	`#FFFFFF colors.white`	`#1D2125 colors.dark.100`
background.shadow	`#1D1F2429 -`	`#161A1D colors.dark`	`#1D1F2429 -`
background.neutral	`#FFFFFF colors.white`	`#22272B colors.dark.200`	`#FFFFFF colors.white`
background.neutral.hovered	`#F7F8F9 colors.neutral.100`	`#282E33 colors.dark.250`	`#F8F9F9 colors.slate.100`
background.neutral.pressed	`#F0F1F3 colors.neutral.200`	`#2C333A colors.dark.300`	`#EBF0F1 colors.slate.200`
background.neutral.selected	`#F7F8F9 colors.neutral.100`	`#282E33 colors.dark.250`	`#F8F9F9 colors.slate.100`
background.neutral.subtle	`#F0F1F3 colors.neutral.200`	`#2C333A colors.dark.300`	`#F8F9F9 colors.slate.100`
background.neutral.subtle.hovered	`#DCDFE4 colors.neutral.300`	`#38414A colors.dark.350`	`#EBF0F1 colors.slate.200`
background.neutral.subtle.pressed	`#B2B9C4 colors.neutral.400`	`#454F59 colors.dark.400`	`#E3E7E9 colors.slate.300`
background.neutral.subtle.selected	`#DCDFE4 colors.neutral.300`	`#38414A colors.dark.350`	`#EBF0F1 colors.slate.200`
background.neutral.bold	`#4C5460 colors.neutral.800`	`#9FADBC colors.dark.800`	`#243032 colors.slate.800`
background.neutral.bold.hovered	`#383E48 colors.neutral.900`	`#B6C2CF colors.dark.900`	`#121C1E colors.slate.900`
background.neutral.bold.pressed	`#272B32 colors.neutral.1000`	`#C7D1DB colors.dark.1000`	`#080D0E colors.slate.1000`
background.neutral.bold.selected	`#383E48 colors.neutral.900`	`#B6C2CF colors.dark.900`	`#121C1E colors.slate.900`
background.brand	`#EEF0FC colors.indigo.100`	`#1D2656 colors.indigo.1000`	`#F0FBF7 colors.emerald.100`
background.brand.hovered	`#D6DBF7 colors.indigo.200`	`#242F6A colors.indigo.900`	`#D6F4E9 colors.emerald.200`
background.brand.pressed	`#A8B2EF colors.indigo.300`	`#4053BC colors.indigo.800`	`#B7E9D8 colors.emerald.300`
background.brand.selected	`#D6DBF7 colors.indigo.200`	`#242F6A colors.indigo.900`	`#D6F4E9 colors.emerald.200`
background.brand.bold	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#029861 colors.emerald.700`
background.brand.bold.hovered	`#4053BC colors.indigo.800`	`#A8B2EF colors.indigo.300`	`#0F6D4D colors.emerald.800`
background.brand.bold.pressed	`#242F6A colors.indigo.900`	`#D6DBF7 colors.indigo.200`	`#0E4F3A colors.emerald.900`
background.brand.bold.selected	`#4053BC colors.indigo.800`	`#A8B2EF colors.indigo.300`	`#0F6D4D colors.emerald.800`
background.brand.bold.selected.disabled	`#D6DBF7 colors.indigo.200`	`#242F6A colors.indigo.900`	`#D6F4E9 colors.emerald.200`
background.tertiary	`#22272B colors.dark.200`	`#22272B colors.dark.200`	`#282E33 colors.dark.250`
background.tertiary.hovered	`#2C333A colors.dark.300`	`#2C333A colors.dark.300`	`#2C333A colors.dark.300`
background.tertiary.pressed	`#454F59 colors.dark.400`	`#454F59 colors.dark.400`	`#454F59 colors.dark.400`
background.danger	`#FCEEED colors.red.100`	`#4E1915 colors.red.1000`	`#FCEEED colors.red.100`
background.danger.hovered	`#F9D7D5 colors.red.200`	`#5E1E19 colors.red.900`	`#F9D7D5 colors.red.200`
background.danger.pressed	`#F09E99 colors.red.300`	`#A8352D colors.red.800`	`#F09E99 colors.red.300`
background.danger.selected	`#F9D7D5 colors.red.200`	`#5E1E19 colors.red.900`	`#F9D7D5 colors.red.200`
background.danger.bold	`#C33E35 colors.red.700`	`#EA7A72 colors.red.400`	`#C33E35 colors.red.700`
background.danger.bold.hovered	`#A8352D colors.red.800`	`#F09E99 colors.red.300`	`#A8352D colors.red.800`
background.danger.bold.pressed	`#5E1E19 colors.red.900`	`#F9D7D5 colors.red.200`	`#5E1E19 colors.red.900`
background.danger.bold.selected	`#A8352D colors.red.800`	`#F09E99 colors.red.300`	`#A8352D colors.red.800`
background.warning	`#FDF6DD colors.yellow.100`	`#362D10 colors.yellow.1000`	`#FDF6DD colors.yellow.100`
background.warning.hovered	`#F9E399 colors.yellow.200`	`#4D4016 colors.yellow.900`	`#F9E399 colors.yellow.200`
background.warning.pressed	`#F5CD47 colors.yellow.300`	`#766222 colors.yellow.800`	`#F5CD47 colors.yellow.300`
background.warning.selected	`#F9E399 colors.yellow.200`	`#4D4016 colors.yellow.900`	`#F9E399 colors.yellow.200`
background.warning.bold	`#F5CD47 colors.yellow.300`	`#F5CD47 colors.yellow.300`	`#F5CD47 colors.yellow.300`
background.warning.bold.hovered	`#D8B53F colors.yellow.400`	`#D8B53F colors.yellow.400`	`#D8B53F colors.yellow.400`
background.warning.bold.pressed	`#C2A338 colors.yellow.500`	`#C2A338 colors.yellow.500`	`#C2A338 colors.yellow.500`
background.warning.bold.selected	`#D8B53F colors.yellow.400`	`#D8B53F colors.yellow.400`	`#D8B53F colors.yellow.400`
background.success	`#F2F9F6 colors.green.100`	`#0B3524 colors.green.1000`	`#F2F9F6 colors.green.100`
background.success.hovered	`#D2EBE1 colors.green.200`	`#104B32 colors.green.900`	`#D2EBE1 colors.green.200`
background.success.pressed	`#A7D9C4 colors.green.300`	`#186F4A colors.green.800`	`#A7D9C4 colors.green.300`
background.success.selected	`#D2EBE1 colors.green.200`	`#104B32 colors.green.900`	`#D2EBE1 colors.green.200`
background.success.bold	`#1C8459 colors.green.700`	`#7DC7A8 colors.green.400`	`#1C8459 colors.green.700`
background.success.bold.hovered	`#186F4A colors.green.800`	`#A7D9C4 colors.green.300`	`#186F4A colors.green.800`
background.success.bold.pressed	`#104B32 colors.green.900`	`#D2EBE1 colors.green.200`	`#104B32 colors.green.900`
background.success.bold.selected	`#186F4A colors.green.800`	`#7DC7A8 colors.green.400`	`#186F4A colors.green.800`
background.highlight	`#F3F1FC colors.violet.100`	`#2B2549 colors.violet.1000`	`#F3F1FC colors.violet.100`
background.highlight.hovered	`#DEDAF6 colors.violet.200`	`#352E5A colors.violet.900`	`#DEDAF6 colors.violet.200`
background.highlight.pressed	`#B8AEEB colors.violet.300`	`#5F519F colors.violet.800`	`#B8AEEB colors.violet.300`
background.highlight.selected	`#DEDAF6 colors.violet.200`	`#352E5A colors.violet.900`	`#DEDAF6 colors.violet.200`
background.highlight.bold	`#6F5FBA colors.violet.700`	`#9F91E3 colors.violet.400`	`#6F5FBA colors.violet.700`
background.highlight.bold.hovered	`#5F519F colors.violet.800`	`#B8AEEB colors.violet.300`	`#5F519F colors.violet.800`
background.highlight.bold.pressed	`#352E5A colors.violet.900`	`#DEDAF6 colors.violet.200`	`#352E5A colors.violet.900`
background.highlight.bold.selected	`#5F519F colors.violet.800`	`#B8AEEB colors.violet.300`	`#5F519F colors.violet.800`
background.nav.parent	`#E7EDF5 -`	`#1D2125 colors.dark.100`	`#142D26 colors.emerald.1000`
background.nav.stack	`#F7F8F9 colors.neutral.100`	`#161A1D colors.dark`	`#F7F8F9 colors.neutral.100`
background.nav.stack.hovered	`#E7EDF5 -`	`#1D2125 colors.dark.100`	`#D6F4E9 colors.emerald.200`
background.header	`#FFFFFF colors.white`	`#1D2125 colors.dark.100`	`#142D26 colors.emerald.1000`
background.header.menu.hovered	`#FFFFFF00 colors.transparent`	`#FFFFFF00 colors.transparent`	`#265C5880 -`
background.header.menu.selected	`#FFFFFF00 colors.transparent`	`#FFFFFF00 colors.transparent`	`#B1DF6B colors.lime.300`
background.airene	`radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%) -`	`radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%) -`	`radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%) -`
nav.parent	`#E7EDF5 -`	`#1D2125 colors.dark.100`	`#142D26 colors.emerald.1000`
nav.stack	`#F7F8F9 colors.neutral.100`	`#161A1D colors.dark`	`#F7F8F9 colors.neutral.100`
nav.stack.hovered	`#E7EDF5 -`	`#1D2125 colors.dark.100`	`#D6F4E9 colors.emerald.200`
text.default	`#272B32 colors.neutral.1000`	`#B6C2CF colors.dark.900`	`#080D0E colors.slate.1000`
text.default.static	`#272B32 colors.neutral.1000`	`#272B32 colors.neutral.1000`	`#1D2125 colors.dark.100`
text.secondary	`#656F80 colors.neutral.700`	`#8C9BAB colors.dark.700`	`#3A4749 colors.slate.700`
text.secondary.pressed	`#4C5460 colors.neutral.800`	`#9FADBC colors.dark.800`	`#243032 colors.slate.800`
text.placeholder	`#758195 colors.neutral.600`	`#738496 colors.dark.600`	`#6E7A7C colors.slate.500`
text.disabled	`#1d1f2452 colors.neutral.400a`	`#bfdbf847 colors.dark.400a`	`#8C9596 colors.slate.400`
text.inverse	`#FFFFFF colors.white`	`#1D2125 colors.dark.100`	`#FFFFFF colors.white`
text.inverse.static	`#FFFFFF colors.white`	`#FFFFFF colors.white`	`#FFFFFF colors.white`
text.selected	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#0F6D4D colors.emerald.800`
text.danger	`#A8352D colors.red.800`	`#F09E99 colors.red.300`	`#A8352D colors.red.800`
text.danger.pressed	`#5E1E19 colors.red.900`	`#F9D7D5 colors.red.200`	`#5E1E19 colors.red.900`
text.warning	`#A14A0B colors.orange.800`	`#F5CD47 colors.yellow.300`	`#A14A0B colors.orange.800`
text.warning.inverse	`#272B32 colors.neutral.1000`	`#272B32 colors.neutral.1000`	`#080D0E colors.slate.1000`
text.success	`#186F4A colors.green.800`	`#A7D9C4 colors.green.300`	`#0F6D4D colors.emerald.800`
text.highlight	`#5F519F colors.violet.800`	`#B8AEEB colors.violet.300`	`#5F519F colors.violet.800`
text.information	`#4053BC colors.indigo.800`	`#A8B2EF colors.indigo.300`	`#4B61DC colors.indigo.700`
text.link	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#165082 -`
text.link.pressed	`#4053BC colors.indigo.800`	`#A8B2EF colors.indigo.300`	`#0D4372 -`
icon.default	`#758195 colors.neutral.600`	`#738496 colors.dark.600`	`#536062 colors.slate.600`
icon.disabled	`#B2B9C4 colors.neutral.400`	`#454F59 colors.dark.400`	`#B2B9C4 colors.neutral.400`
icon.inverse	`#FFFFFF colors.white`	`#1D2125 colors.dark.100`	`#F0FBF7 colors.emerald.100`
icon.inverse.static	`#FFFFFF colors.white`	`#FFFFFF colors.white`	`#FFFFFF colors.white`
icon.selected	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#029861 colors.emerald.700`
icon.brand	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#029861 colors.emerald.700`
icon.danger	`#C33E35 colors.red.700`	`#EA7A72 colors.red.400`	`#C33E35 colors.red.700`
icon.warning	`#BC560D colors.orange.700`	`#F5CD47 colors.yellow.300`	`#BC560D colors.orange.700`
icon.warning.inverse	`#272B32 colors.neutral.1000`	`#1D2125 colors.dark.100`	`#080D0E colors.slate.1000`
icon.success	`#1C8459 colors.green.700`	`#7DC7A8 colors.green.400`	`#1FB088 colors.emerald.600`
icon.highlight	`#6F5FBA colors.violet.700`	`#9F91E3 colors.violet.400`	`#BC560D colors.orange.700`
icon.information	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#6577E2 colors.indigo.600`
icon.subtle	`#DCDFE4 colors.neutral.300`	`#2C333A colors.dark.300`	`#E3E7E9 colors.slate.300`
icon.logo	`#000000 -`	`#FFFFFF colors.white`	`#000000 -`
border.default	`#DCDFE4 colors.neutral.300`	`#2C333A colors.dark.300`	`#E3E7E9 colors.slate.300`
border.default.subtle	`#F0F1F3 colors.neutral.200`	`#22272B colors.dark.200`	`#EBF0F1 colors.slate.200`
border.bold	`#758195 colors.neutral.600`	`#738496 colors.dark.600`	`#8C9596 colors.slate.400`
border.disabled	`#1d1f2414 colors.neutral.200a`	`#a1bdd914 colors.dark.200a`	`#EBF0F1 colors.slate.200`
border.form	`#1d1f2429 colors.neutral.300a`	`#a6c5e229 colors.dark.300a`	`#1d1f2429 colors.slate.300a`
border.focused	`#7586E5 colors.indigo.500`	`#A8B2EF colors.indigo.300`	`#41C6A0 colors.emerald.500`
border.inverse	`#FFFFFF colors.white`	`#1D2125 colors.dark.100`	`#FFFFFF colors.white`
border.selected	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#029861 colors.emerald.700`
border.selected.hovered	`#4053BC colors.indigo.800`	`#A8B2EF colors.indigo.300`	`#0F6D4D colors.emerald.800`
border.selected.disabled	`#D6DBF7 colors.indigo.200`	`#242F6A colors.indigo.900`	`#D6F4E9 colors.emerald.200`
border.brand	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#0F6D4D colors.emerald.800`
border.danger	`#C33E35 colors.red.700`	`#EA7A72 colors.red.400`	`#E2483D colors.red.600`
border.warning	`#F5CD47 colors.yellow.300`	`#F5CD47 colors.yellow.300`	`#F5CD47 colors.yellow.300`
border.success	`#1C8459 colors.green.700`	`#7DC7A8 colors.green.400`	`#029861 colors.emerald.700`
border.highlight	`#6F5FBA colors.violet.700`	`#9F91E3 colors.violet.400`	`#BC560D colors.orange.700`
border.information	`#4B61DC colors.indigo.700`	`#8997E9 colors.indigo.400`	`#6577E2 colors.indigo.600`
chart.cat01	`#649CF8 colors.blue.400`	`#8EB7FA colors.blue.300`	`#649CF8 colors.blue.400`
chart.cat01.bold	`#387CEB colors.blue.600`	`#488BF7 colors.blue.500`	`#387CEB colors.blue.600`
chart.cat02	`#4FCABC colors.teal.400`	`#92DED6 colors.teal.300`	`#4FCABC colors.teal.400`
chart.cat02.bold	`#119E8F colors.teal.600`	`#19B9A8 colors.teal.500`	`#119E8F colors.teal.600`
chart.cat03	`#9F91E3 colors.violet.400`	`#B8AEEB colors.violet.300`	`#9F91E3 colors.violet.400`
chart.cat03.bold	`#8270DB colors.violet.600`	`#8F7FDF colors.violet.500`	`#8270DB colors.violet.600`
chart.cat04	`#F0A875 colors.orange.400`	`#F5C39F colors.orange.300`	`#F0A875 colors.orange.400`
chart.cat04.bold	`#E46910 colors.orange.600`	`#EB8E4B colors.orange.500`	`#E46910 colors.orange.600`
chart.cat05	`#B2B9C4 colors.neutral.400`	`#DCDFE4 colors.neutral.300`	`#B2B9C4 colors.neutral.400`
chart.cat05.bold	`#758195 colors.neutral.600`	`#8690A2 colors.neutral.500`	`#536062 colors.slate.600`
chart.cat06	`#EA7A72 colors.red.400`	`#F09E99 colors.red.300`	`#EA7A72 colors.red.400`
chart.cat06.bold	`#E2483D colors.red.600`	`#E6645B colors.red.500`	`#E2483D colors.red.600`
chart.cat07	`#83CA16 colors.lime.400`	`#B1DF6B colors.lime.300`	`#83CA16 colors.lime.400`
chart.cat07.bold	`#649B11 colors.lime.600`	`#77B814 colors.lime.500`	`#649B11 colors.lime.600`
chart.cat08	`#E16CF2 colors.fuchsia.400`	`#EA98F6 colors.fuchsia.300`	`#E16CF2 colors.fuchsia.400`
chart.cat08.bold	`#C841DC colors.fuchsia.600`	`#DA4DF0 colors.fuchsia.500`	`#C841DC colors.fuchsia.600`

Typography

Font Family

Token	Value	Preview
body	"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
mono	SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace

Font Sizes

Token	Value	Preview
xs	0.625rem
sm	0.75rem
md	0.875rem
lg	1rem
xl	1.25rem
2xl	1.5rem

Font Weights

Token	Value	Preview
regular	400	Lorem ipsum dolor sit amet
semiBold	600	Lorem ipsum dolor sit amet
bold	800	Lorem ipsum dolor sit amet

Letter Spacings

Token	Value	Preview
tighter	-0.05em
tight	-0.025em
normal	0
wide	0.025em
wider	0.05em
widest	0.1em

Line Heights

Token	Value	Preview
xs	1.2
sm	1.34
lg	1.429
md	1.43
xl	1.5
2xl	1.67
3xl	1.71

Sizes

Token	Value	Preview
0	0
0.25	0.0625rem
0.5	0.125rem
1	0.25rem
2	0.5rem
2.5	0.625rem
3	0.75rem
4	1rem
5	1.25rem
6	1.5rem
7	1.75rem
7.5	1.875rem
8	2rem
9	2.25rem
9.5	2.375rem
10	2.5rem
11	2.75rem
12	3rem
16	4rem
20	5rem
22	5.5rem
56	14rem
65	17.5rem
sm	24rem
full	100%

Radii

Token	Value	Preview
none	0
xs	0.125rem
sm	0.25rem
md	0.375rem
lg	0.5rem
xl	0.75rem
full	999px

Spacings

Token	Value	Preview
0	0
0.5	0.125rem
1	0.25rem
1.5	0.375rem
2	0.5rem
3	0.75rem
4	1rem
5	1.3rem
6	1.5rem
8	2rem
10	2.5rem
20	5rem

Borders

Token	Value	Preview
none	none
sm	1px
md	1.5px
lg	2px
xl	3px
2xl	4px

Shadows

Token	Value	Preview
focus	0 0 0 1px {colors.border.focused}
lg	[ "0px 25px 30px -10px {colors.background.shadow}", "0px 15px 15px -10px {colors.background.shadow}" ]
md	[ "0px 20px 25px -5px {colors.background.shadow}", "0px 10px 10px -5px {colors.background.shadow}" ]
none	none
outer	0 0 0 3px rgba(224, 238, 255, 1)
outline	0 0 0 3px #E0EEFF
sm	[ "0px 10px 15px -3px {colors.background.shadow}", "0px 4px 6px -2px {colors.background.shadow}" ]
xs	[ "0px 2px 4px 0px {colors.background.shadow}", "0px 0px 2px 0px {colors.background.shadow}" ]

Durations

Token	Value	Preview
slow	100ms	Hover me
normal	250ms	Hover me
fast	300ms	Hover me

Opacity

Token	Value	Preview
0	0	Lorem ipsum dolor sit amet
40	0.4	Lorem ipsum dolor sit amet
60	0.6	Lorem ipsum dolor sit amet
100	1	Lorem ipsum dolor sit amet

Z-Index

Token	Value
base	0
docked	10
hide	-1
modal	1400
overlay	1300
popover	1500
sticky	1100
tooltip	1800

Design Token v2.4 ​

Colors ​

Foundation Colors ​

Semantic Colors ​

Typography ​

Font Family ​

Font Sizes ​

Font Weights ​

Letter Spacings ​

Line Heights ​

Sizes ​

Radii ​

Spacings ​

Borders ​

Shadows ​

Durations ​

Opacity ​

Z-Index ​