Shadows & Effects
Six elevation levels (xs–custom), five blur tiers, two gradient styles, and the OTP focus ring — all defined as CSS tokens in Layer 0.
Drop Shadows
Six elevation levels from tight hover state to deep floating panel. Each box below is rendered with the actual box-shadow token.
shadow.xs
--shadow-xs
0px 2px 4px 0px
rgba(16,16,19, 0.16)
rgba(16,16,19, 0.16)
Tight hover elevation
shadow.sm
--shadow-sm
y:2 rgba(0.04) +
y:16 spread:-4 rgba(0.10)
y:16 spread:-4 rgba(0.10)
Cards, dropdowns
shadow.md
--shadow-md
y:2 rgba(0.04) +
y:24 spread:-8 rgba(0.12)
y:24 spread:-8 rgba(0.12)
Modals, dialogs
shadow.lg
--shadow-lg
y:2 rgba(0.04) +
y:40 spread:-16 rgba(0.16)
y:40 spread:-16 rgba(0.16)
Floating panels
shadow.xl
--shadow-xl
y:2 rgba(0.04) +
y:56 spread:-20 rgba(0.18)
y:56 spread:-20 rgba(0.18)
Deep elevation
shadow.custom
--shadow-custom
1px border ring +
8px ambient glow
8px ambient glow
Subtle containers
Input & Focus Shadows
Two dedicated shadows for form inputs. The focus ring color is always rgba(53,46,255,0.4) — fixed across both themes.
Default input
--shadow-input
0px 1px 0px -1px rgba(0,0,0,0.05)
0px 1px 2px -1px rgba(0,0,0,0.05)
0px 2px 4px -2px rgba(0,0,0,0.05)
0px 3px 6px -3px rgba(0,0,0,0.05)
0px 1px 2px -1px rgba(0,0,0,0.05)
0px 2px 4px -2px rgba(0,0,0,0.05)
0px 3px 6px -3px rgba(0,0,0,0.05)
Focus state
--shadow-focus
0 0 0 3px rgba(53, 46, 255, 0.4)
⚠ Never use dark accent (#a1ff5b) for focus rings
⚠ Never use dark accent (#a1ff5b) for focus rings
Backdrop Blur
Five blur tiers for frosted glass effects on nav bars, modals, and overlays. Apply via backdrop-filter: var(--blur-*).
| Preview | Name | Token | CSS value | Figma ref | Usage |
|---|---|---|---|---|---|
|
|
blur.xs | --blur-xs | blur(4px) | Blur/xs · b:8 | Hover tooltips |
|
|
blur.sm | --blur-sm | blur(8px) | Blur/sm · b:16 | Nav bar, tab bar |
|
|
blur.md | --blur-md | blur(16px) | Blur/md · b:32 | Modals, sheets |
|
|
blur.lg | --blur-lg | blur(24px) | Blur/lg · b:48 | Full overlays |
|
|
blur.xl | --blur-xl | blur(32px) | Blur/xl · b:64 | Hero glass panels |
Gradients
Two system gradients. Use background: var(--gradient-*) — never hardcode gradient colors.
Bubble From Bot
--gradient-bubble-bot
linear-gradient(142deg,
rgba(181,210,243,0.10) 0%,
#1a5896 100%)
rgba(181,210,243,0.10) 0%,
#1a5896 100%)
AI chat bubble backgrounds (bot side)
Brand Gradient
--gradient-brand
linear-gradient(135deg,
var(--bc-primary-soft) 0%,
var(--bc-dark-primary-soft) 100%)
var(--bc-primary-soft) 0%,
var(--bc-dark-primary-soft) 100%)
Hero sections, onboarding backgrounds
Token Reference
All effect tokens from Layer 0 of the MaV token architecture.
| Preview | Token | CSS value | Usage |
|---|---|---|---|
| --shadow-xs | 0px 2px 4px 0px rgba(16,16,19,0.16) | Hover state elevation | |
| --shadow-sm | two-layer y:2/16 | Cards, dropdowns | |
| --shadow-md | two-layer y:2/24 | Modals, dialogs | |
| --shadow-lg | two-layer y:2/40 | Floating panels | |
| --shadow-xl | two-layer y:2/56 | Deep elevation | |
| --shadow-custom | border-ring + glow | Subtle containers | |
| --shadow-input | 4-layer inset depth | Input fields (default, hover) | |
| --shadow-focus | 0 0 0 3px rgba(53,46,255,0.4) | Input focus ring — fixed value, both themes | |
| --gradient-bubble-bot | 142deg → #1a5896 | Bot chat bubble | |
| --gradient-brand | 135deg primary-soft tones | Hero & onboarding | |
| --blur-xs | blur(4px) | backdrop-filter: tooltips | |
| --blur-sm | blur(8px) | backdrop-filter: nav bar | |
| --blur-md | blur(16px) | backdrop-filter: modals | |
| --blur-lg | blur(24px) | backdrop-filter: overlays | |
| --blur-xl | blur(32px) | backdrop-filter: glass panels |