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 #1111111f, 0 1px 1px 0 #11111124, 0 1px 3px 0 #1113 | --elevation-1 | |
| 2 | 0 3px 1px -2px #1111111f, 0 2px 2px 0 #11111124, 0 1px 5px 0 #1113 | --elevation-2 | |
| 4 | 0 1px 10px 0 #4b4b491f, 0 4px 5px 0 #4b4b4924, 0 2px 4px -1px #4b4b4933 | --elevation-4 | |
| 6 | 0 1px 18px 0 #4b4b491f, 0 6px 10px 0 #4b4b4924, 0 3px 5px -1px #4b4b4933 | --elevation-6 | |
| 8 | 0 3px 14px 2px #1111111f, 0 8px 10px 1px #11111124, 0 5px 5px -3px #1113 | --elevation-8 | |
| 10 | 0 4px 18px 3px #1111111f, 0 10px 14px 1px #11111124, 0 6px 6px -3px #1113 | --elevation-10 | |
| 12 | 0 5px 22px 4px #4b4b491f, 0 12px 17px 2px #4b4b4924, 0 7px 8px -4px #4b4b4933 | --elevation-12 | |
| 16 | 0 6px 30px 5px #4b4b491f, 0 16px 24px 2px #4b4b4924, 0 8px 10px -5px #4b4b4933 | --elevation-16 | |
| 20 | 0 8px 38px 7px #4b4b491f, 0 20px 31px 3px #4b4b4924, 0 10px 13px -6px #4b4b4933 | --elevation-20 | |
| Die cut | |||
|---|---|---|---|
| Name | Value | CSS token | Sample |
| 05 | inset 0 1px .5px -1px #1111111f, inset 0 .5px .5px 0 #11111124, inset 0 .5px 1.5px 0 #1116 | --die-cut-05 | |
| 1 | inset 0 2px 1px -2px #1111111f, inset 0 1px 1px 0 #11111124, inset 0 1px 3px 0 #1116 | --die-cut-1 | |
| 2 | inset 0 3px 1px -2px #1111111f, inset 0 2px 2px 0 #11111124, inset 0 1px 5px 0 #1116 | --die-cut-2 | |
| 4 | inset 0 1px 10px -3px #1111111f, inset 0 4px 5px 0 #11111124, inset 0 2px 4px -1px #1116 | --die-cut-4 | |
| 6 | inset 0 1px 18px 0 #4b4b491f, inset 0 6px 10px 0 #4b4b4924, inset 0 3px 5px -1px #4b4b4933 | --die-cut-6 | |
| 8 | inset 0 3px 14px 2px #4b4b491f, inset 0 8px 10px 1px #4b4b4924, inset 0 5px 5px -3px #4b4b4933 | --die-cut-8 | |
| 10 | inset 0 4px 18px 3px #4b4b491f, inset 0 10px 14px 1px #4b4b4924, inset 0 6px 6px -3px #4b4b4933 | --die-cut-10 | |
| 12 | inset 0 5px 22px 4px #4b4b491f, inset 0 12px 17px 2px #4b4b4924, inset 0 7px 8px -4px #4b4b4933 | --die-cut-12 | |
| 16 | inset 0 6px 30px 5px #4b4b491f, inset 0 16px 24px 2px #4b4b4924, inset 0 8px 10px -5px #4b4b4933 | --die-cut-16 | |
| 20 | inset 0 8px 38px 7px #4b4b491f, inset 0 20px 31px 3px #4b4b4924, inset 0 10px 13px -6px #4b4b4933 | --die-cut-20 | |
| Embossed | |||
|---|---|---|---|
| Name | Value | CSS token | Sample |
| 1_grey-90 | -1px -1px 2px 0 #ffffffb2, 1px 1px 2px 0 #00000040 | --embossed-1--grey-90 | |
| 2_grey-90 | -2px -2px 4px 0 #ffffffb2, 2px 2px 4px 0 #00000040 | --embossed-2--grey-90 | |
| 4_grey-90 | -3px -3px 6px 0 #ffffffb2, 3px 3px 6px 0 #00000040 | --embossed-4--grey-90 | |
| 6_grey-90 | -4px -4px 8px 0 #ffffffb2, 4px 4px 8px 0 #00000040 | --embossed-6--grey-90 | |
| 8_grey-90 | -6px -6px 12px 0 #ffffffb2, 6px 6px 12px 0 #00000040 | --embossed-8--grey-90 | |
| 10_grey-90 | -8px -8px 16px 0 #ffffffb2, 8px 8px 16px 0 #00000040 | --embossed-10--grey-90 | |
| 1_grey-93 | -1px -1px 2px 0 white, 1px 1px 2px 0 #0003 | --embossed-1--grey-93 | |
| 2_grey-93 | -2px -2px 4px 0 white, 2px 2px 4px 0 #0003 | --embossed-2--grey-93 | |
| 4_grey-93 | -3px -3px 6px 0 white, 3px 3px 6px 0 #0003 | --embossed-4--grey-93 | |
| 6_grey-93 | -4px -4px 8px 0 white, 4px 4px 8px 0 #0003 | --embossed-6--grey-93 | |
| 8_grey-93 | -6px -6px 12px 0 white, 6px 6px 12px 0 #0003 | --embossed-8--grey-93 | |
| 10_grey-93 | -8px -8px 16px 0 white, 8px 8px 16px 0 #0003 | --embossed-10--grey-93 | |
| 1_grey-98 | -1px -1px 2px 0 white, 1px 1px 2px 0 #0000002e | --embossed-1--grey-98 | |
| 2_grey-98 | -2px -2px 4px 0 white, 2px 2px 4px 0 #0000002e | --embossed-2--grey-98 | |
| 4_grey-98 | -3px -3px 6px 0 white, 3px 3px 6px 0 #0000002e | --embossed-4--grey-98 | |
| 6_grey-98 | -4px -4px 8px 6px white, 4px 4px 8px 0 #0000002e | --embossed-6--grey-98 | |
| 8_grey-98 | -6px -6px 12px 0 white, 6px 6px 12px 0 #0000002e | --embossed-8--grey-98 | |
| 10_grey-98 | -8px -8px 16px 0 white, 8px 8px 16px 0 #0000002e | --embossed-10--grey-98 | |
| 1_lila-30 | -1px -1px 2px 0 #b660c780, 1px 1px 2px 0 #470f52 | --embossed-1--lila-30 | |
| 1_grape-86 | -1px -1px 2px 0 #eef970e5, 1px 1px 2px 0 #afb93de5 | --embossed-1--grape-86 | |
| Debossed | |||
|---|---|---|---|
| Name | Value | CSS token | Sample |
| 1_grey-90 | inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 #00000040 | --debossed-1--grey-90 | |
| 2_grey-90 | inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 #00000040 | --debossed-2--grey-90 | |
| 4_grey-90 | inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 #00000040 | --debossed-4--grey-90 | |
| 6_grey-90 | inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 #00000040 | --debossed-6--grey-90 | |
| 8_grey-90 | inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 #00000040 | --debossed-8--grey-90 | |
| 10_grey-90 | inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 #00000040 | --debossed-10--grey-90 | |
| 1_grey-93 | inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 #0003 | --debossed-1--grey-93 | |
| 2_grey-93 | inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 #0003 | --debossed-2--grey-93 | |
| 4_grey-93 | inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 #0003 | --debossed-4--grey-93 | |
| 6_grey-93 | inset -4px -4px 8px 0 white, inset 4px 4px 8px 0 #0003 | --debossed-6--grey-93 | |
| 8_grey-93 | inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 #0003 | --debossed-8--grey-93 | |
| 10_grey-93 | inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 #0003 | --debossed-10--grey-93 | |
| 1_grey-98 | inset -1px -1px 2px 0 white, inset 1px 1px 2px 0 #0000002e | --debossed-1--grey-98 | |
| 2_grey-98 | inset -2px -2px 4px 0 white, inset 2px 2px 4px 0 #0000002e | --debossed-2--grey-98 | |
| 4_grey-98 | inset -3px -3px 6px 0 white, inset 3px 3px 6px 0 #0000002e | --debossed-4--grey-98 | |
| 6_grey-98 | inset -4px -4px 8px 6px white, inset 4px 4px 8px 0 #0000002e | --debossed-6--grey-98 | |
| 8_grey-98 | inset -6px -6px 12px 0 white, inset 6px 6px 12px 0 #0000002e | --debossed-8--grey-98 | |
| 10_grey-98 | inset -8px -8px 16px 0 white, inset 8px 8px 16px 0 #0000002e | --debossed-10--grey-98 | |
| 1_lila-30 | inset -1px -1px 2px 0 #db74efb2, inset 1px 1px 2px 0 #311137, inset -.1px -.1px 1px 0 #ffffff2b | --debossed-1--lila-30 | |
| 2_lila-30 | inset -2px -2px 4px 0 #db74efb2, inset 2px 2px 4px 0 #311137, inset -.1px -.1px 1px 0 #ffffff2b | --debossed-2--lila-30 | |
| 1_grape-86 | inset -1px -1px 2px 0 #eef970e5, inset 1px 1px 2px 0 #afb93de5, inset -.1px -.1px 1px 0 #ffffff2b | --debossed-1--grape-86 | |
| 2_grape-86 | inset -2px -2px 4px 0 #eef970e5, inset 2px 2px 4px 0 #afb93de5, inset -.1px -.1px 1px 0 #ffffff2b | --debossed-2--grape-86 | |