Shadow Tokens

Soft, diffused shadows using brand indigo (#0B0620) at low opacity for light mode. Violet and mint glows replace shadows in dark mode.

Light Mode Shadows

Drop shadows using #0B0620 at 5-10% opacity per brand guidelines. Creates the premium “floating” effect.

Shadow SM

Subtle elevation for small interactive elements

0 1px 2px rgba(11, 6, 32, 0.05)

Shadow MD

Default floating panel shadow — creates the "float in space" effect

0 4px 6px -1px rgba(11, 6, 32, 0.07), 0 2px 4px -2px rgba(11, 6, 32, 0.05)

Shadow LG

Elevated elements like dropdowns and popovers

0 10px 15px -3px rgba(11, 6, 32, 0.08), 0 4px 6px -4px rgba(11, 6, 32, 0.05)

Shadow XL

Modals, dialogs, and top-level floating surfaces

0 20px 25px -5px rgba(11, 6, 32, 0.10), 0 8px 10px -6px rgba(11, 6, 32, 0.05)

Dark Mode Glows

Instead of shadows, use subtle outer glows (Indigo) to separate dark objects from the dark background.

Glow Indigo

Dark mode: subtle outer glow to separate dark objects from the dark background

0 0 20px rgba(99, 102, 241, 0.3)

Glow Mint

Dark mode: success / data flow indicator glow

0 0 20px rgba(44, 182, 125, 0.2)

Glassmorphism (Dark Mode)

Frosted glass surface with indigo underglow. Needs a colored backdrop — rendered here over the brand aurora.

Glass Surface

Indigo Underglow

Semi-transparent surface with a soft indigo halo at the bottom edge. Dark mode only.

backdrop-blur-xlvar(--primary)