BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Elevation

Things that float cast shadows; things that sit do not. Cards and panels are flat plates with a hairline edge. Only popovers, menus, dialogs, drawers and toasts get elevation, and dark mode uses darker, tighter shadows so edges stay visible.

Updated Oct 16, 2026

Edit in Studio

Select a token to see where it is used and its history. Click a name to copy it.

Copy names as

Levels

elevation 3 tokens

Shadows that lift surfaces. raised for cards, overlay for menus and dialogs. Stronger in dark mode so edges stay visible.

Light
Flatno shadow
Raisedelevation.raised
Overlayelevation.overlay
Modalelevation.modal
Dark
Flatno shadow
Raisedelevation.raised
Overlayelevation.overlay
Modalelevation.modal
  • Interactive cards on hover, sticky headers. shadow 1 · dark-1
    4 components

    Components
  • Popovers, menus, listboxes, tooltips. shadow 2 · dark-2
    5 components

    Components
  • Dialogs, drawers, toasts. shadow 3 · dark-3
    3 components

    Components

Shadow primitives

shadow 6 tokens

The raw two-layer shadows. The dark variants exist because a light shadow disappears on a dark surface.