Shadows & elevation

Shadows are how a flat 2D layout signals depth. A consistent elevation scale keeps the visual language honest — every floated element shares the same shadow grammar.

The default scale

shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
shadow-3: 0 10px 30px rgba(0, 0, 0, 0.12);

Three steps cover most needs:

• shadow-1 — hairline elevation for buttons, inline chips, small cards.
• shadow-2 — visible elevation for cards, popovers, dropdowns.
• shadow-3 — heavy elevation for modals and floating panels above page content.

Brutalist alternative

Some brand systems use hard offset shadows instead of soft blur:

shadow-1: 2px 2px 0 var(--ink);
shadow-2: 4px 4px 0 var(--ink);
shadow-3: 8px 8px 0 var(--ink);

This is the canonical Neo-brutalist look. The editor lets you switch shadow style globally: pick Soft or Hard in the panel and the scale flips wholesale.

Dark theme shadows

In dark mode, traditional drop shadows almost disappear (dark-on-dark = nothing visible). Two options:

1. Inset shadows that highlight the top edge of an element (inset 0 1px 0 rgba(255, 255, 255, 0.1)).
2. Border-only depth — drop the shadow entirely and use a 1 px lighter border to signal elevation.

The editor exposes both per-theme so you can pick the right model for each.