Shadows

Elevation tokens tuned to look right on both a white and a near-black background. Just three levels — resting, hover, and a subtle brand glow.

Elevation scale

Surfaces stay close to the page — card elevation tops out at 6px of blur. The brand glow spreads wider at 12px, but at barely a tenth of opacity.

card

--shadow-card

Default card resting state — hairline lift, barely visible.

card-hover

--shadow-card-hover

Card on hover / focus — one notch more elevation.

glow

--shadow-glow

Brand halo for decorative emphasis — a highlighted CTA, a selected card. Never as a focus indicator; that is what --ring is for.

Values

The CSS variables. Override to make everything softer or crisper.

app/globals.css

css

@theme {
  --shadow-card:       0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-glow:       0 0 12px oklch(0.62 0.14 255 / 0.12);
}

Guidance

Rules of thumb we follow when we build screens with these tokens.

Use sparingly

More than two elevation levels on a single screen usually means the hierarchy needs work. Reach for borders and background colour first, shadow last.

Dark mode

The two card tokens use rgba black, so they still work on a dark background — just far less visible. If you want more presence there, override them inside .dark. The glow is the exception: it is tinted brand blue rather than black, so it reads about the same in either theme.

Focus rings, not shadows

For focus indication use the --ring token, not the glow shadow. The glow is a decoration, not an affordance.

Elevation scale

Values

Guidance

Also see