Shadows

There are 5 sizes of shadows. The first level of each shadow enhances contrast and remains consistent across all sizes.

In dark mode, shadows get an additional lighter border, to ensure they are visible

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
shadows.xs.down ↦	shadows.xs.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px 2px 8px 0px hsla(216.67,29.51%,23.92%,0.04) ↵
shadows.s.down ↦	shadows.s.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px 4px 11px 0px hsla(216.67,29.51%,23.92%,0.05) ↵
shadows.m.down ↦	shadows.m.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 3px 10px 0px hsla(216.67,29.51%,23.92%,0.1), 0px 6px 14px 0px hsla(216.67,29.51%,23.92%,0.06) ↵
shadows.l.down ↦	shadows.l.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 4px 13px 0px hsla(216.67,29.51%,23.92%,0.12), 0px 8px 17px 0px hsla(216.67,29.51%,23.92%,0.07) ↵
shadows.xl.down ↦	shadows.xl.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 5px 16px 0px hsla(216.67,29.51%,23.92%,0.14), 0px 10px 20px 0px hsla(216.67,29.51%,23.92%,0.08) ↵
shadows.xlHover.down ↦	shadows.xlHover.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 6px 19px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 12px 23px 0px hsla(216.67,29.51%,23.92%,0.09) ↵

𐘂𐘂

Use xlHover exclusively as the hover state for size xl

Direction

Shadows can only have two directions, up and down. By default shadows point down.

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
shadows.xs.up ↦	shadows.xs.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px -2px 8px 0px hsla(216.67,29.51%,23.92%,0.04) ↵
shadows.s.up ↦	shadows.s.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px -4px 11px 0px hsla(216.67,29.51%,23.92%,0.05) ↵
shadows.m.up ↦	shadows.m.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -3px 10px 0px hsla(216.67,29.51%,23.92%,0.1), 0px -6px 14px 0px hsla(216.67,29.51%,23.92%,0.06) ↵
shadows.l.up ↦	shadows.l.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -4px 13px 0px hsla(216.67,29.51%,23.92%,0.12), 0px -8px 17px 0px hsla(216.67,29.51%,23.92%,0.07) ↵
shadows.xl.up ↦	shadows.xl.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -5px 16px 0px hsla(216.67,29.51%,23.92%,0.14), 0px -10px 20px 0px hsla(216.67,29.51%,23.92%,0.08) ↵
shadows.xlHover.up ↦	shadows.xlHover.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -6px 19px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -12px 23px 0px hsla(216.67,29.51%,23.92%,0.09) ↵

𐘂𐘂

Hover state

Each shadowed surface, when interactive, follows a hover effect rule: it moves up one level.

• xs hovered → s
• s hovered → m
• m hovered → l
• l hovered → xl
• xl hovered → xlHover

Loading...