Design Token ​

Collection of key-value pair for colors, spacing, typography and etc, that can be used in the Pixel Vue 3.

Colors ​

KeyValueCSS VariableColors
currentcolorcurrentcolorvar(--mp-colors-currentcolor)
dark#232933var(--mp-colors-dark)
white#FFFFFFvar(--mp-colors-white)
background#F1F5F9var(--mp-colors-background)
overlayrgba(22, 26, 32, 0.8)var(--mp-colors-overlay)
brand.capital#2F5573var(--mp-colors-brand-capital)
brand.esign#00C853var(--mp-colors-brand-esign)
brand.expense#183883var(--mp-colors-brand-expense)
brand.flex#7C4DFFvar(--mp-colors-brand-flex)
brand.jurnal#40C3FFvar(--mp-colors-brand-jurnal)
brand.klikpajak#FF9100var(--mp-colors-brand-klikpajak)
brand.mekari#651FFFvar(--mp-colors-brand-mekari)
brand.qontak#2979FFvar(--mp-colors-brand-qontak)
brand.talenta#F22929var(--mp-colors-brand-talenta)
brand.university#448AFFvar(--mp-colors-brand-university)
whiteAlpha.50rgba(255, 255, 255, 0.04)var(--mp-colors-white-alpha-50)
whiteAlpha.100rgba(255, 255, 255, 0.06)var(--mp-colors-white-alpha-100)
whiteAlpha.200rgba(255, 255, 255, 0.08)var(--mp-colors-white-alpha-200)
whiteAlpha.300rgba(255, 255, 255, 0.16)var(--mp-colors-white-alpha-300)
whiteAlpha.400rgba(255, 255, 255, 0.24)var(--mp-colors-white-alpha-400)
whiteAlpha.500rgba(255, 255, 255, 0.36)var(--mp-colors-white-alpha-500)
whiteAlpha.600rgba(255, 255, 255, 0.48)var(--mp-colors-white-alpha-600)
whiteAlpha.700rgba(255, 255, 255, 0.64)var(--mp-colors-white-alpha-700)
whiteAlpha.800rgba(255, 255, 255, 0.80)var(--mp-colors-white-alpha-800)
whiteAlpha.900rgba(255, 255, 255, 0.92)var(--mp-colors-white-alpha-900)
blackAlpha.50rgba(0, 0, 0, 0.04)var(--mp-colors-black-alpha-50)
blackAlpha.100rgba(0, 0, 0, 0.06)var(--mp-colors-black-alpha-100)
blackAlpha.200rgba(0, 0, 0, 0.08)var(--mp-colors-black-alpha-200)
blackAlpha.300rgba(0, 0, 0, 0.16)var(--mp-colors-black-alpha-300)
blackAlpha.400rgba(0, 0, 0, 0.24)var(--mp-colors-black-alpha-400)
blackAlpha.500rgba(0, 0, 0, 0.36)var(--mp-colors-black-alpha-500)
blackAlpha.600rgba(0, 0, 0, 0.48)var(--mp-colors-black-alpha-600)
blackAlpha.700rgba(0, 0, 0, 0.64)var(--mp-colors-black-alpha-700)
blackAlpha.800rgba(0, 0, 0, 0.80)var(--mp-colors-black-alpha-800)
blackAlpha.900rgba(0, 0, 0, 0.92)var(--mp-colors-black-alpha-900)
gray.25#F8F9FBvar(--mp-colors-gray-25)
gray.50#EDF0F2var(--mp-colors-gray-50)
gray.100#D0D6DDvar(--mp-colors-gray-100)
gray.400#8B95A5var(--mp-colors-gray-400)
gray.600#626B79var(--mp-colors-gray-600)
blue.50#EAECFBvar(--mp-colors-blue-50)
blue.100#D5DEFFvar(--mp-colors-blue-100)
blue.400#4B61DDvar(--mp-colors-blue-400)
blue.500#1C44D5var(--mp-colors-blue-500)
blue.700#0031BEvar(--mp-colors-blue-700)
red.50#FDECEEvar(--mp-colors-red-50)
red.400#DA473Fvar(--mp-colors-red-400)
red.500#C83E39var(--mp-colors-red-500)
red.700#AB3129var(--mp-colors-red-700)
green.50#E8F5EBvar(--mp-colors-green-50)
green.400#68BE79var(--mp-colors-green-400)
green.500#4FB262var(--mp-colors-green-500)
green.700#3C914Dvar(--mp-colors-green-700)
orange.50#FBF3DDvar(--mp-colors-orange-50)
orange.400#E0AB00var(--mp-colors-orange-400)
orange.500#DE9400var(--mp-colors-orange-500)
orange.700#DB8000var(--mp-colors-orange-700)
sky.100#60A5FAvar(--mp-colors-sky-100)
sky.400#3B82F6var(--mp-colors-sky-400)
teal.100#2DD4BFvar(--mp-colors-teal-100)
teal.400#14B8A6var(--mp-colors-teal-400)
violet.100#A78BFAvar(--mp-colors-violet-100)
violet.400#8B5CF6var(--mp-colors-violet-400)
amber.100#FBBF24var(--mp-colors-amber-100)
amber.400#F59E0Bvar(--mp-colors-amber-400)
rose.100#F87171var(--mp-colors-rose-100)
rose.400#EF4444var(--mp-colors-rose-400)
stone.100#A1A1AAvar(--mp-colors-stone-100)
stone.400#71717Avar(--mp-colors-stone-400)
lime.100#A3E635var(--mp-colors-lime-100)
lime.400#84CC16var(--mp-colors-lime-400)
pink.100#F472B6var(--mp-colors-pink-100)
pink.400#EC4899var(--mp-colors-pink-400)
apricot.100#FB923Cvar(--mp-colors-apricot-100)
apricot.400#F97316var(--mp-colors-apricot-400)
aqua.100#22D3EEvar(--mp-colors-aqua-100)
aqua.400#06B6D4var(--mp-colors-aqua-400)
leaf.100#4ADE80var(--mp-colors-leaf-100)
leaf.400#22C55Evar(--mp-colors-leaf-400)
fuchsia.100#E879F9var(--mp-colors-fuchsia-100)
fuchsia.400#D946EFvar(--mp-colors-fuchsia-400)
ice.50#E0EEFFvar(--mp-colors-ice-50)
ice.100#B4D3F2var(--mp-colors-ice-100)
ash.100#E7EDF5var(--mp-colors-ash-100)

Borders ​

KeyValueCSS Variable
nonenonevar(--mp-borders-none)
sm1pxvar(--mp-borders-sm)
md1.5pxvar(--mp-borders-md)
lg2pxvar(--mp-borders-lg)

Durations ​

KeyValueCSS Variable
slow100msvar(--mp-durations-slow)
normal250msvar(--mp-durations-normal)
fast300msvar(--mp-durations-fast)

Font Sizes ​

KeyValueCSS Variable
xs0.625remvar(--mp-font-sizes-xs)
sm0.75remvar(--mp-font-sizes-sm)
md0.875remvar(--mp-font-sizes-md)
lg1remvar(--mp-font-sizes-lg)
xl1.25remvar(--mp-font-sizes-xl)
2xl1.5remvar(--mp-font-sizes-2xl)

Font Weights ​

KeyValueCSS Variable
regular400var(--mp-font-weights-regular)
semiBold600var(--mp-font-weights-semi-bold)
bold800var(--mp-font-weights-bold)

Fonts ​

KeyValueCSS Variable
body"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"var(--mp-fonts-body)
monoSFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospacevar(--mp-fonts-mono)

Letter Spacings ​

KeyValueCSS Variable
tighter-0.05emvar(--mp-letter-spacings-tighter)
tight-0.025emvar(--mp-letter-spacings-tight)
normal0var(--mp-letter-spacings-normal)
wide0.025emvar(--mp-letter-spacings-wide)
wider0.05emvar(--mp-letter-spacings-wider)
widest0.1emvar(--mp-letter-spacings-widest)

Line Heights ​

KeyValueCSS Variable
xs1.2var(--mp-line-heights-xs)
sm1.34var(--mp-line-heights-sm)
md1.4var(--mp-line-heights-md)
lg1.429var(--mp-line-heights-lg)
xl1.5var(--mp-line-heights-xl)
2xl1.67var(--mp-line-heights-2xl)
3xl1.71var(--mp-line-heights-3xl)

Opacity ​

KeyValueCSS Variable
0var(--mp-opacity-0)
400.4var(--mp-opacity-40)
600.6var(--mp-opacity-60)
1001var(--mp-opacity-100)

Radii ​

KeyValueCSS Variable
none0var(--mp-radii-none)
xs0.125remvar(--mp-radii-xs)
sm0.25remvar(--mp-radii-sm)
md0.375remvar(--mp-radii-md)
lg0.5remvar(--mp-radii-lg)
xl0.75remvar(--mp-radii-xl)
full50%var(--mp-radii-full)

Shadows ​

KeyValueCSS Variable
xs0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)var(--mp-shadows-xs)
sm0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10)var(--mp-shadows-sm)
md0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.10)var(--mp-shadows-md)
lg0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05)var(--mp-shadows-lg)
focus0 0 0 3px rgba(224, 238, 255, 1)var(--mp-shadows-focus)
xl0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)var(--mp-shadows-xl)
2xl0 25px 50px -12px rgba(0, 0, 0, 0.25)var(--mp-shadows-2xl)
outline0 0 0 3px #E0EEFFvar(--mp-shadows-outline)
outline-tab0 0 0 2px #E0EEFFvar(--mp-shadows-outline-tab)
outer0 0 0 3px rgba(224, 238, 255, 1)var(--mp-shadows-outer)
innerinset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)var(--mp-shadows-inner)
nonenonevar(--mp-shadows-none)

Sizes ​

KeyValueCSS Variable
00var(--mp-sizes-0)
10.25remvar(--mp-sizes-1)
20.5remvar(--mp-sizes-2)
30.75remvar(--mp-sizes-3)
41remvar(--mp-sizes-4)
51.25remvar(--mp-sizes-5)
61.5remvar(--mp-sizes-6)
71.75remvar(--mp-sizes-7)
82remvar(--mp-sizes-8)
92.25remvar(--mp-sizes-9)
102.5remvar(--mp-sizes-10)
112.75remvar(--mp-sizes-11)
123remvar(--mp-sizes-12)
164remvar(--mp-sizes-16)
205remvar(--mp-sizes-20)
225.5remvar(--mp-sizes-22)
5614remvar(--mp-sizes-56)
6517.5remvar(--mp-sizes-65)
0.250.0625remvar(--mp-sizes-0\.25)
0.50.125remvar(--mp-sizes-0\.5)
2.50.625remvar(--mp-sizes-2\.5)
7.51.875remvar(--mp-sizes-7\.5)
9.52.375remvar(--mp-sizes-9\.5)
full100%var(--mp-sizes-full)
sm24remvar(--mp-sizes-sm)

Spacing ​

KeyValueCSS Variable
00var(--mp-spacing-0)
10.25remvar(--mp-spacing-1)
20.5remvar(--mp-spacing-2)
30.75remvar(--mp-spacing-3)
41remvar(--mp-spacing-4)
51.3remvar(--mp-spacing-5)
61.5remvar(--mp-spacing-6)
82remvar(--mp-spacing-8)
123remvar(--mp-spacing-12)
164remvar(--mp-spacing-16)
205remvar(--mp-spacing-20)
246remvar(--mp-spacing-24)
328remvar(--mp-spacing-32)
4010remvar(--mp-spacing-40)
6416remvar(--mp-spacing-64)
0.50.125remvar(--mp-spacing-0\.5)
1.50.375remvar(--mp-spacing-1\.5)

Z-Index ​

KeyValueCSS Variable
hide-1var(--mp-z-index-hide)
basevar(--mp-z-index-base)
docked10var(--mp-z-index-docked)
sticky1100var(--mp-z-index-sticky)
overlay1300var(--mp-z-index-overlay)
modal1400var(--mp-z-index-modal)
popover1500var(--mp-z-index-popover)
tooltip1800var(--mp-z-index-tooltip)

© Copyright 2024 PT Mid Solusi Nusantara.