Borders & Elevation

Tokens for border radius, border width, box shadows, and the z-index scale.

Border radius

--hz-radius-none 0

--hz-radius-sm 0.25rem

--hz-radius-md 0.5rem

--hz-radius-lg 1rem

--hz-radius-full 9999px

Border width

--hz-border-width-thin 1px

--hz-border-width-thick 2px

--hz-border-width-heavy 6px

Shadows

Never let elevation carry meaning by itself

"The elevated one is selected" is invisible to anyone who cannot perceive the shadow. Pair elevation with a state the theme also announces (aria-selected, a border, an icon).

--hz-shadow-sm

--hz-shadow-md

--hz-shadow-lg

Token	Value
`--hz-shadow-sm`	`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`
`--hz-shadow-md`	`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`
`--hz-shadow-lg`	`0 20px 25px -5px rgb(0 0 0 / 0.18), 0 8px 10px -6px rgb(0 0 0 / 0.18)`

Token values are identical in both modes. What changes under the dark toggle is the demo treatment above: shadows lose contrast over dark surfaces, so the cards lift their surface and gain a soft halo instead (see Accessibility below). The treatment as consumer CSS:

/* Dark mode: convey depth by lifting the surface and adding a
   soft halo. The token shadow stays as a secondary cue. */
[data-theme='dark'] .card {
	background: color-mix(in srgb, var(--hz-intent-neutral) 14%, var(--hz-color-surface));
	border: 1px solid color-mix(in srgb, var(--hz-intent-neutral) 30%, transparent);
	box-shadow:
		var(--hz-shadow-md),
		0 0 30px rgb(255 255 255 / 17%);
}

Z-index

Token	Value
`--hz-z-base`	`0`
`--hz-z-raised`	`1`
`--hz-z-dropdown`	`10`
`--hz-z-sticky`	`100`
`--hz-z-tooltip`	`150`
`--hz-z-popover`	`200`
`--hz-z-overlay`	`1000`
`--hz-z-modal`	`1100`

Override radius, border width, shadow, or z-index tokens with a plain CSS custom property, or set radius, border, shadow, and zIndex in the hyzer config; see Theming → Tokens & Overrides.

A tooltip, popover, or dropdown menu mostly skips this scale. See Positioning for why the top layer makes --hz-z-* matter only on the older fallback path.

Elevation communicates stacking: what floats above what. Reach for it where surfaces really do layer (dropdowns, dialogs, sticky headers, cards over a page), and keep the scale's order honest: a modal casts more than a card.

A shadow is decoration, never a boundary. A soft shadow rarely reaches the 3:1 non-text contrast minimum (WCAG 1.4.11) against the surface behind it, and none of the shadow tokens here are drawn to reach it. So anything interactive still needs a border, a background change, or spacing to mark its edge. Forced-colors mode removes shadows entirely.
Over dark surfaces black shadows lose contrast. Dark UIs convey depth by lightening the elevated surface, optionally with a soft halo (the shadow cards above do both under the dark toggle, keeping the token shadow as a secondary cue). A glow alone is a weak boundary, because the card interior matches the page. A brand-tinted glow collides with the focus ring's color language, so keep halos neutral and subordinate to the surface change. The tokens stay identical in both modes; the treatment is the theme's call.
Stacking is visual only. z-index never reorders the DOM, so reading and focus order are untouched by elevation. The tiers still carry focus consequences: a bar pinned on the sticky tier can cover a focused element that scrolls beneath it (WCAG 2.4.11, so keep pinned bars short), and layers that appear on hover or focus (the dropdown and popover tiers) must be dismissible, hoverable, and persistent per WCAG 1.4.13.