Shadows

Shadows provide shared effects for elements that need visual separation, depth, or an inset appearance.

The system includes three outer shadows and three inset shadows, ordered by visual strength.

Each token combines its shadow layers into a reusable value so repeated effects remain consistent.

Outer shadows

Outer shadows appear outside an element’s border box.

:root {
  --shadow-s:
    inset 0 1px 2px #ffffff30,
    0 1px 2px #00000030,
    0 2px 4px #00000015;

  --shadow-m:
    inset 0 1px 2px #ffffff50,
    0 2px 4px #00000030,
    0 4px 8px #00000015;

  --shadow-l:
    inset 0 1px 2px #ffffff70,
    0 4px 6px #00000030,
    0 6px 10px #00000015;
}

Each token combines multiple shadow layers:

• an inset highlight along the upper edge
• a darker, more defined outer shadow
• a softer outer shadow with a larger spread

The tokens increase in visual strength from s to l.

--shadow-s
--shadow-m
--shadow-l

Use the smallest shadow that creates the required separation.

.card {
  box-shadow: var(--shadow-s);
}

Inset shadows

Inset shadows appear inside an element’s border box.

:root {
  --inset-s: ...;
  --inset-m: ...;
  --inset-l: ...;
}

The tokens increase in visual strength from s to l.

--inset-s
--inset-m
--inset-l

Apply them with box-shadow:

.control {
  box-shadow: var(--inset-s);
}

Choosing a shadow

Choose a token according to the strength of the effect required by the design.

Small

Use --shadow-s or --inset-s for a subtle effect.

.example {
  box-shadow: var(--shadow-s);
}

Medium

Use --shadow-m or --inset-m when the small token does not provide enough visual distinction.

.example {
  box-shadow: var(--shadow-m);
}

Large

Use --shadow-l or --inset-l for the strongest available effect.

.example {
  box-shadow: var(--shadow-l);
}

The size names describe relative visual strength. They do not assign the tokens to particular components.

Adding or changing a shadow

Change an existing token when its visual strength needs adjustment throughout the project.

Add another token only when a recurring effect cannot be represented by the current small, medium, or large values.

When adjusting a token, test it:

• against every background on which it appears
• in both light and dark color schemes
• alongside borders and background changes
• at the actual size of the elements using it
• in hover, active, focus, and disabled states where applicable

A shadow that is visible against one background may disappear or become excessively strong against another.

Accessibility

Shadows can reinforce visual separation, but they must not be the only indication of information, state, or focus.

Use another visible property when an element must remain distinguishable, such as:

• a border
• a background change
• a shape change
• a visible focus indicator
• text or an icon

Interfaces must remain understandable when shadows are subtle, unavailable, or difficult for a user to perceive.