Tokens
Depth
Composed shadow shorthands for elevation, focus rings and status glows. The depth mode (Flat / Soft / Dramatic) changes shadow strength; the kit picks it (default here: Soft).
Shadows are composed from three places in Figma (offsets, depth colours, shadow colour) and published only as these shorthands — the layers are private. Use box-shadow: var(--beam-depth-*) or the .u-depth-* utilities; don’t build shadows by hand.
Depth
Each level is a cumulative octave ladder, matching the Figma effect styles depth/low|mid|high: depth-low stacks o2 + o1, depth-mid o4 → o1, depth-high o6 → o1, and every level ends with the hairline ring, so you never add depth-ring on top. Use depth-low for cards and controls resting on the page, depth-mid for menus and popovers, depth-high for dialogs and the highest floating layer. depth-ring on its own is an edge without lift.
depth-inset-low and depth-inset-mid (Figma depth/inset/*) recess a surface: wells, tracks, pressed states, code blocks. A focusable well needs a wrapper: the wrapper carries the focus ring and the well carries the inset.
- depth-low
0 3px 3px -1.5px var(--beam-shadow-o2-color), 0 1px 1px -0.5px var(--beam-shadow-o1-color), 0 0 0 1px var(--beam-shadow-ring-color)
- depth-mid
0 12px 12px -6px var(--beam-shadow-o4-color), 0 6px 6px -3px var(--beam-shadow-o3-color), 0 3px 3px -1.5px var(--beam-shadow-o2-color), 0 1px 1px -0.5px var(--beam-shadow-o1-color), 0 0 0 1px var(--beam-shadow-ring-color)
- depth-high
0 48px 48px -24px var(--beam-shadow-o6-color), 0 24px 24px -12px var(--beam-shadow-o5-color), 0 12px 12px -6px var(--beam-shadow-o4-color), 0 6px 6px -3px var(--beam-shadow-o3-color), 0 3px 3px -1.5px var(--beam-shadow-o2-color), 0 1px 1px -0.5px var(--beam-shadow-o1-color), 0 0 0 1px var(--beam-shadow-ring-color)
- depth-ring
0 0 0 1px var(--beam-shadow-ring-color)
- depth-inset-low
inset 0 1px 1px 0 var(--beam-shadow-o1-color), inset 0 0 0 1px var(--beam-shadow-ring-color)
- depth-inset-mid
inset 0 3px 3px 0 var(--beam-shadow-o2-color), inset 0 1px 1px 0 var(--beam-shadow-o1-color), inset 0 0 0 1px var(--beam-shadow-ring-color)
Rings
Focus and selection rings. Beam’s foundations already apply ring-brand to :focus-visible; use the status rings for invalid / warning / valid fields.
- ring-brand
0 0 0 var(--beam-ring-width) var(--beam-effect-ring-brand)
- ring-error
0 0 0 var(--beam-ring-width) var(--beam-effect-ring-error)
- ring-warning
0 0 0 var(--beam-ring-width) var(--beam-effect-ring-warning)
- ring-success
0 0 0 var(--beam-ring-width) var(--beam-effect-ring-success)
- ring-info
0 0 0 var(--beam-ring-width) var(--beam-effect-ring-info)
Glows
Coloured shadows for emphasis — e.g. a primary button on hover. Use sparingly.
- glow-brand
0 6px 6px -3px var(--beam-effect-shadow-brand)
- glow-error
0 6px 6px -3px var(--beam-effect-shadow-error)
- glow-warning
0 6px 6px -3px var(--beam-effect-shadow-warning)
- glow-success
0 6px 6px -3px var(--beam-effect-shadow-success)
- glow-info
0 6px 6px -3px var(--beam-effect-shadow-info)
Projection
Levels say how far a surface lifts; projection says which way its shadow falls. Plain depth-<level> is down. Add a projection when the light source would be hidden by where the surface sits: around for large floating surfaces centred on the page, up for things anchored to the bottom edge, start/end for drawers docked to a side. start and end follow the writing direction and flip under dir="rtl".
Geometry reuses the o1–o6 rungs and matches the Figma styles depth/<projection>/<level>; the ring stays put in every projection: up and start use Figma’s shadow/oN/reverse offsets (−y); around takes each layer’s offset and spread from two rungs lower and keeps its own blur. Utilities: .u-depth-<level>-<projection>.
| Projection | low | mid | high | Use it for |
|---|---|---|---|---|
| downdefault | Cards, buttons, menus, tooltips, toasts, stat tiles | |||
| around | Dialogs, command palette, big popovers, floating panels | |||
| up | Bottom sheet, sticky footer or action bar, mobile tab bar | |||
| start | End-docked drawer or side panel | |||
| end | Start-docked drawer (nav drawer) |
Ring width: --beam-ring-width: 1px
Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81