Default
Use --sp-shadow-1 for regular cards and shells.
Shadows
Back to docsSpectra uses a small elevation ladder: three surface shadows and three text shadows. Keep the scale tight so raised UI still feels related.
Shadow tokens
| Preview | Token | Type | Used for | Value |
|---|---|---|---|---|
Spectra | --sp-shadow-1 | Surface shadow | Default cards and grounded surfaces | — |
Spectra | --sp-shadow-2 | Raised shadow | Elevated cards, stronger shells | — |
Spectra | --sp-shadow-3 | Deep shadow | Hero moments or heavy overlays | — |
Spectra | --sp-text-shadow-1 | Text shadow 1 | Readable glow on dense backgrounds | — |
Spectra | --sp-text-shadow-2 | Text shadow 2 | Stronger display text lift | — |
Spectra | --sp-text-shadow-3 | Text shadow 3 | Dramatic headlines only | — |
How to use the scale
Raised
Use --sp-shadow-2 when a surface needs to step above the page.
Deep
Reserve --sp-shadow-3 for special moments.