Elevation & Effects
Shadows and visual effects used to convey elevation.
Drop shadow / down / 2XL / layer 1
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-2xl-layer-1-blur
5
color
$elevation-effects-drop-shadow-down-2xl-layer-1-color
$color-gray-overlay-light-3
spread
$elevation-effects-drop-shadow-down-2xl-layer-1-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-2xl-layer-1-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-2xl-layer-1-y
$spacing-unit-2
Drop shadow / down / 2XL / layer 2
Name
Token
Value
Blur
$elevation-effects-drop-shadow-down-2xl-layer-2-blur
$spacing-unit-24
color
$elevation-effects-drop-shadow-down-2xl-layer-2-color
$color-gray-overlay-light-4
spread
$elevation-effects-drop-shadow-down-2xl-layer-2-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-2xl-layer-2-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-2xl-layer-2-y
$spacing-unit-10
Drop shadow / down / 2XL / layer 3
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-2xl-layer-3-blur
1
Color
$elevation-effects-drop-shadow-down-2xl-layer-3-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-down-2xl-layer-3-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-2xl-layer-3-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-2xl-layer-3-y
$spacing-unit-none
Drop shadow / down / L / layer 1
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-l-layer-1-blur
$spacing-unit-16
color
$elevation-effects-drop-shadow-down-l-layer-1-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-down-l-layer-1-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-l-layer-1-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-l-layer-1-y
3
Drop shadow / down / L / layer 2
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-l-layer-2-blur
$spacing-unit-2
color
$elevation-effects-drop-shadow-down-l-layer-2-color
$color-gray-overlay-light-0
spread
$elevation-effects-drop-shadow-down-l-layer-2-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-l-layer-2-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-l-layer-2-y
$spacing-unit-none
Drop shadow / down / L / layer 3
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-l-layer-3-blur
1
color
$elevation-effects-drop-shadow-down-l-layer-3-color
$color-gray-overlay-light-0
spread
$elevation-effects-drop-shadow-down-l-layer-3-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-l-layer-3-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-l-layer-3-y
$spacing-unit-none
Drop shadow / down / M / layer 1
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-m-layer-1-blur
3
color
$elevation-effects-drop-shadow-down-m-layer-1-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-down-m-layer-1-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-m-layer-1-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-m-layer-1-y
1
Drop shadow / down / M / layer 2
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-m-layer-2-blur
$spacing-unit-12
color
$elevation-effects-drop-shadow-down-m-layer-2-color
$color-gray-overlay-light-3
spread
$elevation-effects-drop-shadow-down-m-layer-2-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-m-layer-2-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-m-layer-2-y
5
Drop shadow / down / M / layer 3
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-m-layer-3-blur
1
color
$elevation-effects-drop-shadow-down-m-layer-3-color
$color-gray-overlay-light-3
spread
$elevation-effects-drop-shadow-down-m-layer-3-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-m-layer-3-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-m-layer-3-y
$spacing-unit-none
Drop shadow / down / S / layer 1
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-s-layer-1-blur
3
color
$elevation-effects-drop-shadow-down-s-layer-1-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-down-s-layer-1-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-s-layer-1-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-s-layer-1-y
1
Drop shadow / down / XL / layer 1
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-xl-layer-1-blur
5
color
$elevation-effects-drop-shadow-down-xl-layer-1-color
$color-gray-overlay-light-3
spread
$elevation-effects-drop-shadow-down-xl-layer-1-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-xl-layer-1-x
$spacing-unit-none
Y
$elevation-effects-drop-shadow-down-xl-layer-1-y
$spacing-unit-2
Drop shadow / down / XL / layer 2
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-xl-layer-2-blur
$spacing-unit-16
color
$elevation-effects-drop-shadow-down-xl-layer-2-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-down-xl-layer-2-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-xl-layer-2-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-xl-layer-2-y
$spacing-unit-10
Drop shadow / down / XL / layer 3
Name
Token
Value
blur
$elevation-effects-drop-shadow-down-xl-layer-3-blur
1
color
$elevation-effects-drop-shadow-down-xl-layer-3-color
$color-gray-overlay-light-0
spread
$elevation-effects-drop-shadow-down-xl-layer-3-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-down-xl-layer-3-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-down-xl-layer-3-y
$spacing-unit-none
Drop shadow / left / M
Name
Token
Value
blur
$elevation-effects-drop-shadow-left-m-blur
$spacing-unit-10
color
$elevation-effects-drop-shadow-left-m-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-left-m-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-left-m-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-left-m-y
$spacing-unit-4
Drop shadow / left / S
Name
Token
Value
blur
$elevation-effects-drop-shadow-left-s-blur
$spacing-unit-10
color
$elevation-effects-drop-shadow-left-s-color
$color-gray-overlay-light-1
spread
$elevation-effects-drop-shadow-left-s-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-left-s-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-left-s-y
$spacing-unit-4
Drop shadow / right / M
Name
Token
Value
blur
$elevation-effects-drop-shadow-right-m-blur
$spacing-unit-10
color
$elevation-effects-drop-shadow-right-m-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-right-m-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-right-m-x
$spacing-unit-4
y
$elevation-effects-drop-shadow-right-m-y
$spacing-unit-none
Drop shadow / right / S
Name
Token
Value
blur
$elevation-effects-drop-shadow-right-s-blur
$spacing-unit-10
color
$elevation-effects-drop-shadow-right-s-color
$color-gray-overlay-light-1
spread
$elevation-effects-drop-shadow-right-s-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-right-s-x
$spacing-unit-4
y
$elevation-effects-drop-shadow-right-s-y
$spacing-unit-none
Drop shadow / up / S
Name
Token
Value
blur
$elevation-effects-drop-shadow-up-s-blur
$spacing-unit-16
color
$elevation-effects-drop-shadow-up-s-color
$color-gray-overlay-light-2
spread
$elevation-effects-drop-shadow-up-s-spread
$spacing-unit-none
x
$elevation-effects-drop-shadow-up-s-x
$spacing-unit-none
y
$elevation-effects-drop-shadow-up-s-y
-8
Focus
Name
Token
Value
brand
$elevation-effects-focus-brand
$color-accent-accent-light-alpha-2
error
$elevation-effects-focus-error
$core-color-red-light-alpha-red-a3
fuchsia
$elevation-effects-focus-fuchsia
$core-color-fuchsia-light-alpha-fuchsia-a3
info
$elevation-effects-focus-info
$core-color-marine-light-alpha-marine-a3
neutral
$elevation-effects-focus-neutral
$color-gray-neutral-light-alpha-3
omen
$elevation-effects-focus-omen
$core-color-orange-light-alpha-orange-a3
purple
$elevation-effects-focus-purple
$core-color-purple-light-alpha-purple-a3
sand
$elevation-effects-focus-sand
$core-color-sand-light-alpha-sand-a2
success
$elevation-effects-focus-success
$core-color-green-light-alpha-green-a3
teal
$elevation-effects-focus-teal
$core-color-teal-light-alpha-teal-a3
warning
$elevation-effects-focus-warning
$core-color-yellow-light-alpha-yellow-a3
white
$elevation-effects-focus-white
$core-color-white-alpha-white-a2
Glow / blue / layer 1
Name
Token
Value
blur
$elevation-effects-glow-blue-layer-1-blur
10
color
$elevation-effects-glow-blue-layer-1-color
$core-color-blue-light-alpha-blue-a3
spread
$elevation-effects-glow-blue-layer-1-spread
$spacing-unit-none
x
$elevation-effects-glow-blue-layer-1-x
$spacing-unit-none
y
$elevation-effects-glow-blue-layer-1-y
$spacing-unit-none
Glow / blue / layer 2
Name
Token
Value
blur
$elevation-effects-glow-blue-layer-2-blur
5
color
$elevation-effects-glow-blue-layer-2-color
$core-color-blue-light-alpha-blue-a3
spread
$elevation-effects-glow-blue-layer-2-spread
$spacing-unit-none
x
$elevation-effects-glow-blue-layer-2-x
$spacing-unit-none
y
$elevation-effects-glow-blue-layer-2-y
$spacing-unit-none
Glow / blue / layer 3
Name
Token
Value
blur
$elevation-effects-glow-blue-layer-3-blur
3
color
$elevation-effects-glow-blue-layer-3-color
$core-color-blue-light-alpha-blue-a3
spread
$elevation-effects-glow-blue-layer-3-spread
$spacing-unit-none
x
$elevation-effects-glow-blue-layer-3-x
$spacing-unit-none
y
$elevation-effects-glow-blue-layer-3-y
$spacing-unit-none
Glow / blue / layer 4
Name
Token
Value
blur
$elevation-effects-glow-blue-layer-4-blur
1.5
color
$elevation-effects-glow-blue-layer-4-color
$core-color-blue-light-alpha-blue-a4
spread
$elevation-effects-glow-blue-layer-4-spread
$spacing-unit-none
x
$elevation-effects-glow-blue-layer-4-x
$spacing-unit-none
y
$elevation-effects-glow-blue-layer-4-y
$spacing-unit-none
Glow / green / layer 1
Name
Token
Value
blur
$elevation-effects-glow-green-layer-1-blur
10
color
$elevation-effects-glow-green-layer-1-color
$core-color-green-light-alpha-green-a3
spread
$elevation-effects-glow-green-layer-1-spread
$spacing-unit-none
x
$elevation-effects-glow-green-layer-1-x
$spacing-unit-none
y
$elevation-effects-glow-green-layer-1-y
$spacing-unit-none
Glow / green / layer 2
Name
Token
Value
blur
$elevation-effects-glow-green-layer-2-blur
5
color
$elevation-effects-glow-green-layer-2-color
$core-color-green-light-alpha-green-a3
spread
$elevation-effects-glow-green-layer-2-spread
$spacing-unit-none
x
$elevation-effects-glow-green-layer-2-x
$spacing-unit-none
y
$elevation-effects-glow-green-layer-2-y
$spacing-unit-none
Glow / green / layer 3
Name
Token
Value
blur
$elevation-effects-glow-green-layer-3-blur
3
color
$elevation-effects-glow-green-layer-3-color
$core-color-green-light-alpha-green-a3
spread
$elevation-effects-glow-green-layer-3-spread
$spacing-unit-none
x
$elevation-effects-glow-green-layer-3-x
$spacing-unit-none
y
$elevation-effects-glow-green-layer-3-y
$spacing-unit-none
Glow / green / layer 4
Name
Token
Value
blur
$elevation-effects-glow-green-layer-4-blur
1.5
color
$elevation-effects-glow-green-layer-4-color
$core-color-green-light-alpha-green-a3
spread
$elevation-effects-glow-green-layer-4-spread
$spacing-unit-none
x
$elevation-effects-glow-green-layer-4-x
$spacing-unit-none
y
$elevation-effects-glow-green-layer-4-y
$spacing-unit-none
Glow / red / layer 1
Name
Token
Value
blur
$elevation-effects-glow-red-layer-1-blur
10
color
$elevation-effects-glow-red-layer-1-color
$core-color-red-light-alpha-red-a4
spread
$elevation-effects-glow-red-layer-1-spread
$spacing-unit-none
x
$elevation-effects-glow-red-layer-1-x
$spacing-unit-none
y
$elevation-effects-glow-red-layer-1-y
$spacing-unit-none
Glow / red / layer 2
Name
Token
Value
blur
$elevation-effects-glow-red-layer-2-blur
5
color
$elevation-effects-glow-red-layer-2-color
$core-color-red-light-alpha-red-a4
spread
$elevation-effects-glow-red-layer-2-spread
$spacing-unit-none
x
$elevation-effects-glow-red-layer-2-x
$spacing-unit-none
y
$elevation-effects-glow-red-layer-2-y
$spacing-unit-none
Glow / red / layer 3
Name
Token
Value
blur
$elevation-effects-glow-red-layer-3-blur
1.5
color
$elevation-effects-glow-red-layer-3-color
$core-color-red-light-alpha-red-a4
spread
$elevation-effects-glow-red-layer-3-spread
$spacing-unit-none
x
$elevation-effects-glow-red-layer-3-x
$spacing-unit-none
y
$elevation-effects-glow-red-layer-3-y
$spacing-unit-none
Glow / red / layer 4
Name
Token
Value
blur
$elevation-effects-glow-red-layer-4-blur
1.5
color
$elevation-effects-glow-red-layer-4-color
$core-color-red-light-alpha-red-a4
spread
$elevation-effects-glow-red-layer-4-spread
$spacing-unit-none
x
$elevation-effects-glow-red-layer-4-x
$spacing-unit-none
y
$elevation-effects-glow-red-layer-4-y
$spacing-unit-none