Effects
Effect CSS tokens will be applied to HTML elements via the 'box-shadow' CSS property, i.e.:
css
&.secondary {
box-shadow: var(--debossed-2--grey-95);
}Please note that tokens with fractions need to be referenced without the . but with the leading 0, i.e.:
css
.input:active {
box-shadow: var(--elevation-03);
}| Elevation | |||
|---|---|---|---|
| Name | Value | CSS token | Sample |
| 1 | 0 2px 1px -1px rgba(17, 17, 17, 0.1215686275), 0 1px 1px 0 rgba(17, 17, 17, 0.1411764706), 0 1px 3px 0 rgba(17, 17, 17, 0.2) | --elevation-1 | |
| 2 | 0 3px 1px -2px rgba(17, 17, 17, 0.1215686275), 0 2px 2px 0 rgba(17, 17, 17, 0.1411764706), 0 1px 5px 0 rgba(17, 17, 17, 0.2) | --elevation-2 | |
| 4 | 0 1px 10px 0 rgba(75, 75, 73, 0.1215686275), 0 4px 5px 0 rgba(75, 75, 73, 0.1411764706), 0 2px 4px -1px rgba(75, 75, 73, 0.2) | --elevation-4 | |
| 6 | 0 1px 18px 0 rgba(75, 75, 73, 0.1215686275), 0 6px 10px 0 rgba(75, 75, 73, 0.1411764706), 0 3px 5px -1px rgba(75, 75, 73, 0.2) | --elevation-6 | |
| 8 | 0 3px 14px 2px rgba(17, 17, 17, 0.1215686275), 0 8px 10px 1px rgba(17, 17, 17, 0.1411764706), 0 5px 5px -3px rgba(17, 17, 17, 0.2) | --elevation-8 | |
| 10 | 0 4px 18px 3px rgba(17, 17, 17, 0.1215686275), 0 10px 14px 1px rgba(17, 17, 17, 0.1411764706), 0 6px 6px -3px rgba(17, 17, 17, 0.2) | --elevation-10 | |
| 12 | 0 5px 22px 4px rgba(75, 75, 73, 0.1215686275), 0 12px 17px 2px rgba(75, 75, 73, 0.1411764706), 0 7px 8px -4px rgba(75, 75, 73, 0.2) | --elevation-12 | |
| 16 | 0 6px 30px 5px rgba(75, 75, 73, 0.1215686275), 0 16px 24px 2px rgba(75, 75, 73, 0.1411764706), 0 8px 10px -5px rgba(75, 75, 73, 0.2) | --elevation-16 | |
| 20 | 0 8px 38px 7px rgba(75, 75, 73, 0.1215686275), 0 20px 31px 3px rgba(75, 75, 73, 0.1411764706), 0 10px 13px -6px rgba(75, 75, 73, 0.2) | --elevation-20 | |
| Die cut | |||
|---|---|---|---|
| Name | Value | CSS token | Sample |
| 05 | inset 0 1px 0.5px -1px rgba(17, 17, 17, 0.1215686275), inset 0 0.5px 0.5px 0 rgba(17, 17, 17, 0.1411764706), inset 0 0.5px 1.5px 0 rgba(17, 17, 17, 0.4) | --die-cut-05 | |
| 1 | inset 0 2px 1px -2px rgba(17, 17, 17, 0.1215686275), inset 0 1px 1px 0 rgba(17, 17, 17, 0.1411764706), inset 0 1px 3px 0 rgba(17, 17, 17, 0.4) | --die-cut-1 | |
| 2 | inset 0 3px 1px -2px rgba(17, 17, 17, 0.1215686275), inset 0 2px 2px 0 rgba(17, 17, 17, 0.1411764706), inset 0 1px 5px 0 rgba(17, 17, 17, 0.4) | --die-cut-2 | |
| 4 | inset 0 1px 10px -3px rgba(17, 17, 17, 0.1215686275), inset 0 4px 5px 0 rgba(17, 17, 17, 0.1411764706), inset 0 2px 4px -1px rgba(17, 17, 17, 0.4) | --die-cut-4 | |
| 6 | inset 0 1px 18px 0 rgba(75, 75, 73, 0.1215686275), inset 0 6px 10px 0 rgba(75, 75, 73, 0.1411764706), inset 0 3px 5px -1px rgba(75, 75, 73, 0.2) | --die-cut-6 | |
| 8 | inset 0 3px 14px 2px rgba(75, 75, 73, 0.1215686275), inset 0 8px 10px 1px rgba(75, 75, 73, 0.1411764706), inset 0 5px 5px -3px rgba(75, 75, 73, 0.2) | --die-cut-8 | |
| 10 | inset 0 4px 18px 3px rgba(75, 75, 73, 0.1215686275), inset 0 10px 14px 1px rgba(75, 75, 73, 0.1411764706), inset 0 6px 6px -3px rgba(75, 75, 73, 0.2) | --die-cut-10 | |
| 12 | inset 0 5px 22px 4px rgba(75, 75, 73, 0.1215686275), inset 0 12px 17px 2px rgba(75, 75, 73, 0.1411764706), inset 0 7px 8px -4px rgba(75, 75, 73, 0.2) | --die-cut-12 | |
| 16 | inset 0 6px 30px 5px rgba(75, 75, 73, 0.1215686275), inset 0 16px 24px 2px rgba(75, 75, 73, 0.1411764706), inset 0 8px 10px -5px rgba(75, 75, 73, 0.2) | --die-cut-16 | |
| 20 | inset 0 8px 38px 7px rgba(75, 75, 73, 0.1215686275), inset 0 20px 31px 3px rgba(75, 75, 73, 0.1411764706), inset 0 10px 13px -6px rgba(75, 75, 73, 0.2) | --die-cut-20 | |
| Embossed | |||
|---|---|---|---|
| Name | Value | CSS token | Sample |
| 1_grey-90 | -1px -1px 2px 0 rgba(255, 255, 255, 0.6980392157), 1px 1px 2px 0 rgba(0, 0, 0, 0.2509803922) | --embossed-1--grey-90 | |
| 2_grey-90 | -2px -2px 4px 0 rgba(255, 255, 255, 0.6980392157), 2px 2px 4px 0 rgba(0, 0, 0, 0.2509803922) | --embossed-2--grey-90 | |
| 4_grey-90 | -3px -3px 6px 0 rgba(255, 255, 255, 0.6980392157), 3px 3px 6px 0 rgba(0, 0, 0, 0.2509803922) | --embossed-4--grey-90 | |
| 6_grey-90 | -4px -4px 8px 0 rgba(255, 255, 255, 0.6980392157), 4px 4px 8px 0 rgba(0, 0, 0, 0.2509803922) | --embossed-6--grey-90 | |
| 8_grey-90 | -6px -6px 12px 0 rgba(255, 255, 255, 0.6980392157), 6px 6px 12px 0 rgba(0, 0, 0, 0.2509803922) | --embossed-8--grey-90 | |
| 10_grey-90 | -8px -8px 16px 0 rgba(255, 255, 255, 0.6980392157), 8px 8px 16px 0 rgba(0, 0, 0, 0.2509803922) | --embossed-10--grey-90 | |
| 1_grey-93 | -1px -1px 2px 0 white, 1px 1px 2px 0 rgba(0, 0, 0, 0.2) | --embossed-1--grey-93 | |
| 2_grey-93 | -2px -2px 4px 0 white, 2px 2px 4px 0 rgba(0, 0, 0, 0.2) | --embossed-2--grey-93 | |
| 4_grey-93 | -3px -3px 6px 0 white, 3px 3px 6px 0 rgba(0, 0, 0, 0.2) | --embossed-4--grey-93 | |
| 6_grey-93 | -4px -4px 8px 0 white, 4px 4px 8px 0 rgba(0, 0, 0, 0.2) | --embossed-6--grey-93 | |
| 8_grey-93 | -6px -6px 12px 0 white, 6px 6px 12px 0 rgba(0, 0, 0, 0.2) | --embossed-8--grey-93 | |
| 10_grey-93 | -8px -8px 16px 0 white, 8px 8px 16px 0 rgba(0, 0, 0, 0.2) | --embossed-10--grey-93 | |
| 1_grey-98 | -1px -1px 2px 0 white, 1px 1px 2px 0 rgba(0, 0, 0, 0.1803921569) | --embossed-1--grey-98 | |
| 2_grey-98 | -2px -2px 4px 0 white, 2px 2px 4px 0 rgba(0, 0, 0, 0.1803921569) | --embossed-2--grey-98 | |
| 4_grey-98 | -3px -3px 6px 0 white, 3px 3px 6px 0 rgba(0, 0, 0, 0.1803921569) | --embossed-4--grey-98 | |
| 6_grey-98 | -4px -4px 8px 6px white, 4px 4px 8px 0 rgba(0, 0, 0, 0.1803921569) | --embossed-6--grey-98 | |
| 8_grey-98 | -6px -6px 12px 0 white, 6px 6px 12px 0 rgba(0, 0, 0, 0.1803921569) | --embossed-8--grey-98 | |
| 10_grey-98 | -8px -8px 16px 0 white, 8px 8px 16px 0 rgba(0, 0, 0, 0.1803921569) | --embossed-10--grey-98 | |
| 1_lila-30 | -1px -1px 2px 0 rgba(182, 96, 199, 0.5019607843), 1px 1px 2px 0 #470f52 | --embossed-1--lila-30 | |
| 1_grape-86 | -1px -1px 2px 0 rgba(238, 249, 112, 0.8980392157), 1px 1px 2px 0 rgba(175, 185, 61, 0.8980392157) | --embossed-1--grape-86 | |
| Debossed | |||
|---|---|---|---|
| Name | Value | CSS token | Sample |
| 1_grey-90 | inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.2509803922) | --debossed-1--grey-90 | |
| 2_grey-90 | inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.2509803922) | --debossed-2--grey-90 | |
| 4_grey-90 | inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.2509803922) | --debossed-4--grey-90 | |
| 6_grey-90 | inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2509803922) | --debossed-6--grey-90 | |
| 8_grey-90 | inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.2509803922) | --debossed-8--grey-90 | |
| 10_grey-90 | inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.2509803922) | --debossed-10--grey-90 | |
| 1_grey-93 | inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.2) | --debossed-1--grey-93 | |
| 2_grey-93 | inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.2) | --debossed-2--grey-93 | |
| 4_grey-93 | inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.2) | --debossed-4--grey-93 | |
| 6_grey-93 | inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2) | --debossed-6--grey-93 | |
| 8_grey-93 | inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.2) | --debossed-8--grey-93 | |
| 10_grey-93 | inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.2) | --debossed-10--grey-93 | |
| 1_grey-98 | inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 rgba(0, 0, 0, 0.1803921569) | --debossed-1--grey-98 | |
| 2_grey-98 | inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 rgba(0, 0, 0, 0.1803921569) | --debossed-2--grey-98 | |
| 4_grey-98 | inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 rgba(0, 0, 0, 0.1803921569) | --debossed-4--grey-98 | |
| 6_grey-98 | inset -4px -4px 8px 6px white, inset 4px 4px 8px 0 rgba(0, 0, 0, 0.1803921569) | --debossed-6--grey-98 | |
| 8_grey-98 | inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 rgba(0, 0, 0, 0.1803921569) | --debossed-8--grey-98 | |
| 10_grey-98 | inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 rgba(0, 0, 0, 0.1803921569) | --debossed-10--grey-98 | |
| 1_lila-30 | inset -1px -1px 2px 0 rgba(219, 116, 239, 0.6980392157), inset 1px 1px 2px 0 #311137, inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451) | --debossed-1--lila-30 | |
| 2_lila-30 | inset -2px -2px 4px 0 rgba(219, 116, 239, 0.6980392157), inset 2px 2px 4px 0 #311137, inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451) | --debossed-2--lila-30 | |
| 1_grape-86 | inset -1px -1px 2px 0 rgba(238, 249, 112, 0.8980392157), inset 1px 1px 2px 0 rgba(175, 185, 61, 0.8980392157), inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451) | --debossed-1--grape-86 | |
| 2_grape-86 | inset -2px -2px 4px 0 rgba(238, 249, 112, 0.8980392157), inset 2px 2px 4px 0 rgba(175, 185, 61, 0.8980392157), inset -0.1px -0.1px 1px 0 rgba(255, 255, 255, 0.168627451) | --debossed-2--grape-86 | |