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
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 | |
md | 1.4 | |
lg | 1.429 | |
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 | 50% |
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 |