Elevation you feel, not a shadow you notice.

The elevation ladder

Flat on the page, raised, overlay, floating. The taller a surface reads, the higher it sits, and lg is the ceiling every surface stays within.

Three levels, plus a ring

Each height is one token, shown on a real surface. The focus ring is the fourth token and the only one that is not elevation.

Two layers, tinted indigo

Real shadows are two things at once: a crisp contact shadow close to the object, and a soft ambient shadow far from it. Stacking one near layer and one far layer reproduces that falloff, so the surface reads as lifted, not pasted on. Tinting both with indigo lets the shadow belong to the surface instead of staining it.

Shadow is height

A shadow says one thing: this surface sits physically above another. Match that meaning and elevation stays a clean, single-purpose channel.

In the dark, tint carries height

Shadow is not the only way to say "higher". As a surface rises it can take a stronger indigo tint, and in dark themes a drop shadow nearly vanishes against a dark background. A lighter, more tinted surface is the clearer signal there. Prefer tint in the dark, shadow in the light, and the two can combine.

Dark surface rising through indigo-tinted levels with no shadow at all. Height reads from lightness, not from ink.

Token reference

Four tokens, the whole system. The scale stays closed at these four: lg is the top, and hover reuses the resting shadow, so every surface maps to one of the four.