2.1
Design Token v2.1 ​
Collection of key-value pair for colors, spacing, typography and etc, that can be used in the Pixel Vue 3.
Colors ​
Foundation Colors ​
background
currentcolor
dark
debug
lightPurple
overlay
vibrantPurple
white
brand
amber
apricot
aqua
ash
blackAlpha
blue
fuchsia
gray
green
ice
leaf
lime
orange
pink
red
rose
sky
stone
teal
violet
whiteAlpha
Typography ​
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 |
Fonts ​
| 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 |
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 |
Spacing ​
| 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 | |
12 | 3rem | |
16 | 4rem | |
20 | 5rem | |
24 | 6rem | |
32 | 8rem | |
40 | 10rem | |
64 | 16rem |
Borders ​
| Token | Value | Preview |
|---|---|---|
none | none | |
sm | 1px | |
md | 1.5px | |
lg | 2px |
Shadows ​
| Token | Value | Preview |
|---|---|---|
2xl | 0 25px 50px -12px rgba(0, 0, 0, 0.25) | |
focus | 0 0 0 3px rgba(224, 238, 255, 1) | |
inner | inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06) | |
lg | [ "0px 6px 16px 0px rgba(0, 0, 0, 0.08)", "0px 9px 28px 8px rgba(0, 0, 0, 0.05)" ] | |
md | [ "0px 10px 10px -5px rgba(0, 0, 0, 0.04)", "0px 20px 25px -5px rgba(0, 0, 0, 0.10)" ] | |
none | none | |
outer | 0 0 0 3px rgba(224, 238, 255, 1) | |
outline | 0 0 0 3px #E0EEFF | |
outline-tab | 0 0 0 2px #E0EEFF | |
sm | [ "0px 4px 6px -2px rgba(0, 0, 0, 0.05)", "0px 10px 15px -3px rgba(0, 0, 0, 0.10)" ] | |
xl | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) | |
xs | [ "0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)" ] |
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 |