2.1

Appearance

2.1

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

vibrantPurple

white

brand

blue

dark

fuchsia

green

indigo

lime

neutral

orange

red

teal

violet

yellow

Semantic Colors ​


TokenLightDark
background.surface
#F1F5F9 -
colors.dark
background.stage
#FFFFFF colors.white
colors.dark.100
background.overlay
rgba(35, 41, 51, 0.80) -
-
background.disabled
rgba(29, 31, 36, 0.04) -
-
background.inverse
#1D2125 colors.dark.100
colors.white
background.shadow
rgba(29, 31, 36, 0.16) -
-
background.neutral
#FFFFFF colors.white
colors.dark.200
background.neutral.hovered
#F7F8F9 colors.neutral.100
colors.dark.250
background.neutral.pressed
#F0F1F3 colors.neutral.200
colors.dark.300
background.neutral.subtle
#F0F1F3 colors.neutral.200
colors.dark.300
background.neutral.subtle.hovered
#DCDFE4 colors.neutral.300
colors.dark.350
background.neutral.subtle.pressed
#B2B9C4 colors.neutral.400
colors.dark.400
background.neutral.bold
#4C5460 colors.neutral.800
colors.dark.800
background.neutral.bold.hovered
#383E48 colors.neutral.900
colors.dark.900
background.neutral.bold.pressed
#272B32 colors.neutral.1000
colors.dark.1000
background.brand
#EEF0FC colors.indigo.100
colors.indigo.1000
background.brand.hovered
#D6DBF7 colors.indigo.200
colors.indigo.900
background.brand.pressed
#A8B2EF colors.indigo.300
colors.indigo.800
background.brand.selected
#D6DBF7 colors.indigo.200
colors.indigo.900
background.brand.bold
#4B61DC colors.indigo.700
colors.indigo.400
background.brand.bold.hovered
#4053BC colors.indigo.800
colors.indigo.300
background.brand.bold.pressed
#242F6A colors.indigo.900
colors.indigo.200
background.brand.bold.selected
#4B61DC colors.indigo.700
colors.indigo.400
background.tertiary
#22272B colors.dark.200
colors.dark.200
background.tertiary.hovered
#2C333A colors.dark.300
colors.dark.300
background.tertiary.pressed
#454F59 colors.dark.400
colors.dark.400
background.danger
#FCEEED colors.red.100
colors.red.1000
background.danger.hovered
#F9D7D5 colors.red.200
colors.red.900
background.danger.pressed
#F09E99 colors.red.300
colors.red.800
background.danger.bold
#C33E35 colors.red.700
colors.red.400
background.danger.bold.hovered
#A8352D colors.red.800
colors.red.300
background.danger.bold.pressed
#5E1E19 colors.red.900
colors.red.200
background.warning
#FDF6DD colors.yellow.100
colors.yellow.1000
background.warning.hovered
#F9E399 colors.yellow.200
colors.yellow.900
background.warning.pressed
#F5CD47 colors.yellow.300
colors.yellow.800
background.warning.bold
#F5CD47 colors.yellow.300
colors.yellow.300
background.warning.bold.hovered
#D8B53F colors.yellow.400
colors.yellow.400
background.warning.bold.pressed
#C2A338 colors.yellow.500
colors.yellow.500
background.success
#F2F9F6 colors.green.100
colors.green.1000
background.success.hovered
#D2EBE1 colors.green.200
colors.green.900
background.success.pressed
#A7D9C4 colors.green.300
colors.green.800
background.success.bold
#1C8459 colors.green.700
colors.green.400
background.success.bold.hovered
#186F4A colors.green.800
colors.green.300
background.success.bold.pressed
#104B32 colors.green.900
colors.green.200
background.highlight
#F3F1FC colors.violet.100
colors.violet.1000
background.highlight.hovered
#DEDAF6 colors.violet.200
colors.violet.900
background.highlight.pressed
#B8AEEB colors.violet.300
colors.violet.800
background.highlight.bold
#6F5FBA colors.violet.700
colors.violet.400
background.highlight.bold.hovered
#5F519F colors.violet.800
colors.violet.300
background.highlight.bold.pressed
#352E5A colors.violet.900
colors.violet.200
background.airene
radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%) -
-
nav.parent
#E7EDF5 -
colors.dark.100
nav.stack
#F7F8F9 colors.neutral.100
colors.dark
nav.stack.hovered
#E7EDF5 -
colors.dark.100
text.default
#272B32 colors.neutral.1000
colors.dark.900
text.default.static
#272B32 colors.neutral.1000
colors.neutral.1000
text.secondary
#656F80 colors.neutral.700
colors.dark.700
text.secondary.pressed
#4C5460 colors.neutral.800
colors.dark.800
text.placeholder
#758195 colors.neutral.600
colors.dark.600
text.disabled
rgba(29, 31, 36, 0.32) -
-
text.inverse
#FFFFFF colors.white
colors.dark.100
text.inverse.static
#FFFFFF colors.white
colors.white
text.selected
#4B61DC colors.indigo.700
colors.indigo.400
text.danger
#A8352D colors.red.800
colors.red.300
text.danger.pressed
#5E1E19 colors.red.900
colors.red.200
text.warning
#A14A0B colors.orange.800
colors.yellow.300
text.warning.inverse
#272B32 colors.neutral.1000
colors.neutral.1000
text.success
#186F4A colors.green.800
colors.green.300
text.highlight
#5F519F colors.violet.800
colors.violet.300
text.information
#4053BC colors.indigo.800
colors.indigo.300
text.link
#4B61DC colors.indigo.700
colors.indigo.400
text.link.pressed
#4053BC colors.indigo.800
colors.indigo.300
icon.default
#758195 colors.neutral.600
colors.dark.600
icon.disabled
#B2B9C4 colors.neutral.400
colors.dark.400
icon.inverse
#FFFFFF colors.white
colors.dark.100
icon.inverse.static
#FFFFFF colors.white
colors.white
icon.selected
#4B61DC colors.indigo.700
colors.indigo.400
icon.brand
#4B61DC colors.indigo.700
colors.indigo.400
icon.danger
#C33E35 colors.red.700
colors.red.400
icon.warning
#BC560D colors.orange.700
colors.yellow.300
icon.warning.inverse
#272B32 colors.neutral.1000
colors.dark.100
icon.success
#1C8459 colors.green.700
colors.green.400
icon.highlight
#6F5FBA colors.violet.700
colors.violet.400
icon.information
#4B61DC colors.indigo.700
colors.indigo.400
icon.subtle
#DCDFE4 colors.neutral.300
colors.dark.300
icon.logo
#272B32 colors.neutral.1000
colors.neutral.100
border.default
#DCDFE4 colors.neutral.300
colors.dark.300
border.bold
#758195 colors.neutral.600
colors.dark.600
border.disabled
rgba(29, 31, 36, 0.08) -
-
border.form
rgba(29, 31, 36, 0.16) -
-
border.focused
#7586E5 colors.indigo.500
colors.indigo.300
border.inverse
#FFFFFF colors.white
colors.dark.100
border.selected
#4B61DC colors.indigo.700
colors.indigo.400
border.selected.hovered
#4053BC colors.indigo.800
colors.indigo.300
border.selected.disabled
#D6DBF7 colors.indigo.200
colors.indigo.900
border.brand
#4B61DC colors.indigo.700
colors.indigo.400
border.danger
#C33E35 colors.red.700
colors.red.400
border.warning
#F5CD47 colors.yellow.300
colors.yellow.300
border.success
#1C8459 colors.green.700
colors.green.400
border.highlight
#6F5FBA colors.violet.700
colors.violet.400
border.information
#4B61DC colors.indigo.700
colors.indigo.400
chart.cat01
#649CF8 colors.blue.400
colors.blue.300
chart.cat01.bold
#387CEB colors.blue.600
colors.blue.500
chart.cat02
#4FCABC colors.teal.400
colors.teal.300
chart.cat02.bold
#119E8F colors.teal.600
colors.teal.500
chart.cat03
#9F91E3 colors.violet.400
colors.violet.300
chart.cat03.bold
#8270DB colors.violet.600
colors.violet.500
chart.cat04
#F0A875 colors.orange.400
colors.orange.300
chart.cat04.bold
#E46910 colors.orange.600
colors.orange.500
chart.cat05
#B2B9C4 colors.neutral.400
colors.neutral.300
chart.cat05.bold
#758195 colors.neutral.600
colors.neutral.500
chart.cat06
#EA7A72 colors.red.400
colors.red.300
chart.cat06.bold
#E2483D colors.red.600
colors.red.500
chart.cat07
#83CA16 colors.lime.400
colors.lime.300
chart.cat07.bold
#649B11 colors.lime.600
colors.lime.500
chart.cat08
#E16CF2 colors.fuchsia.400
colors.fuchsia.300
chart.cat08.bold
#C841DC colors.fuchsia.600
colors.fuchsia.500

Typography ​

Font Family ​


TokenValuePreview
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 ​


TokenValuePreview
xs
0.625rem
sm
0.75rem
md
0.875rem
lg
1rem
xl
1.25rem
2xl
1.5rem

Font Weights ​


TokenValuePreview
regular
400

Lorem ipsum dolor sit amet

semiBold
600

Lorem ipsum dolor sit amet

bold
800

Lorem ipsum dolor sit amet

Letter Spacings ​


TokenValuePreview
tighter
-0.05em
tight
-0.025em
normal
0
wide
0.025em
wider
0.05em
widest
0.1em

Line Heights ​


TokenValuePreview
xs
1.2
sm
1.34
lg
1.429
md
1.43
xl
1.5
2xl
1.67
3xl
1.71

Sizes ​

TokenValuePreview
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 ​

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

Spacings ​

TokenValuePreview
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 ​

TokenValuePreview
none
none
sm
1px
md
1.5px
lg
2px
xl
3px
2xl
4px

Shadows ​

TokenValuePreview
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 ​

TokenValuePreview
slow
100ms
Hover me
normal
250ms
Hover me
fast
300ms
Hover me

Opacity ​

TokenValuePreview
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 ​

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

© Copyright 2024 PT Mid Solusi Nusantara.