Token reference

Box shadow

Elevation and separation tokens for layered surfaces.

5 tokensglobal · 5Reference category

Overview

Elevation and separation tokens for layered surfaces. Values come from canonical DTCG JSON or are derived from governed responsive and preference contracts. Published names are versioned APIs. This page is a structural counterpart of the audited reference information architecture.

Token Reference

Token path	Set	Type	Canonical value	CSS custom property
`shadow.sm`	global	`string`	`0 1px 3px rgba(7,27,43,0.12)`	`--he-shadow-sm`
`shadow.md`	global	`string`	`0 8px 24px rgba(7,27,43,0.14)`	`--he-shadow-md`
`shadow.lg`	global	`string`	`0 20px 48px rgba(7,27,43,0.16)`	`--he-shadow-lg`
`shadow.xl`	global	`string`	`0 28px 80px rgba(7,27,43,0.18)`	`--he-shadow-xl`
`shadow.focus`	global	`string`	`0 0 0 3px rgba(20,120,184,0.30)`	`--he-shadow-focus`

Usage

Consume semantic or component aliases in application code.
Use global values only to author or review foundation aliases.
Keep responsive and preference behavior aligned across Web and Flutter.
Do not edit generated outputs or introduce an unregistered literal.

Open related foundation guidance

Accessibility

Changes require cross-theme contrast, text-scaling, reflow, forced-colors, reduced-motion, and input-modality review where applicable. A token cannot make essential meaning depend on color, opacity, motion, elevation, or viewport size alone.

Web and Flutter API

/* Web */
color: var(--he-shadow-sm);

// Flutter
final value = HeTokens.shadowSm;

The example uses an exact generated name. The table is the complete Web reference; global and semantic Flutter constants are generated in he_tokens.g.dart, while component contracts own component-level values.