Primary shadows
Use primary shadows solely when needed: for navbars and cards leading to categories, or very peculiar CTA elements. Please use them wisely and remember that they can enlighten up to two elements in a single page.
Dark shadows
Prefer dark shadows over primary shadows and use them to catch your user attention on specific elements such as buttons or CTA elements.
Shadow token reference
| Figma variable | Token | Usage |
|---|---|---|
shadows/q-box-shadow-primary-sm | --q-box-shadow-primary-sm | Subtle elevation — chips, tags, small cards |
shadows/q-box-shadow-primary | --q-box-shadow-primary | Standard elevation — dropdowns, popovers |
shadows/q-box-shadow-primary-lg | --q-box-shadow-primary-lg | High elevation — modals, floating panels |
Shadow color always matches the active theme's primary at 25% opacity. The geometry (offset, blur, spread) is fixed across all themes.