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 Violet

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

0 0 20px rgba(127, 90, 240, 0.3)

Glow Mint

Dark mode: success / data flow indicator glow

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

Glassmorphism (Dark Mode)

Semi-transparent layers with background blur for depth.

Glass Panel

Semi-transparent #1B0F3A with backdrop-blur-xl and a subtle border.

background: rgba(27, 15, 58, 0.5);
backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.1);