Atmospheric depth system · 01 / 05

No origin. No direction.
Only depth.

The blur radiates from the element itself — centered at zero offset — because depth in Velora is atmospheric occlusion, not a shadow cast by a single light source.

Read the depth ladder Inspect the token DNA

Low · 20px / 4% Container Low

box-shadow:
0 0 20px
oklch(13% .015 145 / .04)

Medium · 30px / 6% Container

box-shadow:
0 0 30px
oklch(13% .015 145 / .06)

High · 40px / 8% Container High

box-shadow:
0 0 40px
oklch(13% .015 145 / .08)

Float · 48px / 10% Surface Bright

box-shadow:
0 0 48px
oklch(13% .015 145 / .10)

02 / 05 · Elevation hierarchy

Four planes of depth. Each one lighter, blurrier, more present.

As an element rises, its tonal background shifts toward Surface Bright and its shadow blur expands — depth without perspective tricks, without z-index games.

01 → 04 elevation scale

Blur range

20 → 48px

Alpha range

4 → 10%

Directional offset

none

OKLCH-tinted 4 tiers CSS-only

lightness climbssurface values step up as the plane rises.

alpha deepensambient opacity scales with visual priority.

offset stays zerono fake sunlight, just distributed occlusion.

01 Container Low

20px blur
alpha 4%

02 Container

30px blur
alpha 6%

03 Container High

40px blur
alpha 8%

04 Surface Bright

48px blur
alpha 10%

Rule

Zero offset. All axes.

x:0, y:0, spread:0. The shadow expands uniformly because occlusion has no preferred angle.

03 / 05 · Shadow recipes

Five recipes. One axis of control — blur and alpha only.

No angles. No spread. The demo box at the bottom of each column is rendered with the actual token value. Hover a column to isolate it.

Diffuse

vl-shadow-low
blur 20px · alpha 4%
Cards, secondary btns

Ambient

vl-shadow-medium
blur 30px · alpha 6%
Tooltips, nav clusters

Key

vl-shadow-high
blur 40px · alpha 8%
Modals, dialogs

Float

vl-shadow-float
blur 48px · alpha 10%
Hero elements

Glow

vl-shadow-glow
blur 56px · alpha 12%
Focus rings, active

recipe logic Blur is narrative distance The further the plane from the base substrate, the wider the atmospheric spread.

api fit Hover explains usage Each column isolates one token state the same way component hover isolates a surface state.

theme fit Noir and light stay coherent The recipe uses brand tokens, so the shadows remain legible across both palettes.

Tonal Tiers Tonal Stacking Color System

/* Apply any ambient shadow tier with one token */
.card    { box-shadow: var(--vl-shadow-low);    } /* blur 20px · alpha 4%  */
.tooltip { box-shadow: var(--vl-shadow-medium);  } /* blur 30px · alpha 6%  */
.modal   { box-shadow: var(--vl-shadow-high);   } /* blur 40px · alpha 8%  */
.hero    { box-shadow: var(--vl-shadow-float);  } /* blur 48px · alpha 10% */
.focus   { box-shadow: var(--vl-shadow-glow);   } /* blur 56px · alpha 12% */

Override --vl-kinetic-blur and --vl-ambient-alpha at :root to retheme the entire shadow family in one declaration.

04 / 05 · Token specification

Two variables govern the whole atmospheric stack.

Override --vl-kinetic-blur and --vl-ambient-alpha at root level; every derived tier recalculates. No GPU filters. No runtime cost.

GPU layer creation

0 layers

CSS filter usage

none

Paint performance

120fps

Runtime JS overhead

0ms

root2 operator tokens define the whole family.

derivedblur and alpha scale into tier recipes.

theme awaresame markup, different palette context.

no filterspaint stays cheap and predictable.

tokens/ambient-shadows.css

1/* root variables — override to retheme */

2:root {

3 --vl-kinetic-blur: 24px;

4 --vl-ambient-alpha: 0.05;

5}

tokens/shadows-derived.css

1/* derived tier stack */

2--vl-shadow-low: 0 0 20px oklch(13% .015 145 / .04);

3--vl-shadow-med: 0 0 30px oklch(13% .015 145 / .06);

4--vl-shadow-high: 0 0 40px oklch(13% .015 145 / .08);

5--vl-shadow-float: 0 0 48px oklch(13% .015 145 / .10);

6--vl-shadow-glow: 0 0 56px oklch(13% .015 145 / .12);

05 / 05 · Applied contexts

One token per elevation role. Nothing arbitrary.

Modal at vl-shadow-high. Popover at vl-shadow-medium. List card at vl-shadow-low. The recipe matches the element's distance from the base canvas.

High Shadow · 40px / 8%

Modal / Dialog

Maximum depth. Critical focal surface demanding full attention from the user.

Medium Shadow · 30px / 6%

Popover / Tooltip

Contextual depth. Floats above a sibling element without claiming the full scene.

Low Shadow · 20px / 4%

List Card / Item

Resting separation. Just enough depth to distinguish from the base canvas.