7onicDESIGN SYSTEM

Shadows

Shadows add depth and hierarchy to UI, expressing element elevation. Opacity is automatically adjusted in dark mode.

Shadow Scale

5-level elevation scale for various use cases — automatically adapts to dark mode

1
level
xs
Subtle elevation
2
level
sm
Light elevation
3
level
md
Floating element
4
level
lg
High elevation
5
level
xl
Highest elevation
Preview
shadow-xsLv.1

Subtle elevation

BadgeTagInline element
Preview
shadow-smLv.2

Light elevation

CardSelected stateHover
Preview
shadow-mdLv.3

Floating element

DropdownPopover
Preview
shadow-lgLv.4

High elevation

ModalDialogToast
Preview
shadow-xlLv.5

Highest elevation

Large modalOverlay

Light / Dark Comparison

In dark mode, opacity automatically increases for better visibility.

Light Mode
xs
sm
md
lg
xl
Dark Mode
xs
sm
md
lg
xl

Hover Elevation

Change shadows on hover to express interactivity

xs → sm
sm → md
md → lg

Hover over the card to see the effect

Component Shadows

Recommended shadow tokens for common UI components

Recommended shadow tokens: A reference for the optimal shadow token for each UI component.

Card

shadow-sm

Light elevation for cards

Dropdown

shadow-md

Dropdown menus

Modal

shadow-lg

Modals, dialogs

Tooltip

shadow-sm

Tooltips

Popover

shadow-md

Popovers

Dark Mode Notes

✓ Automatic Dark Mode Support

Shadow tokens define optimal opacity values per theme. They switch automatically via CSS variables — no component code changes required.

Light Mode
xs
opacity: 0.05
sm
opacity: 0.1
md
opacity: 0.1
lg
opacity: 0.1
xl
opacity: 0.1
Dark Mode
xs
opacity: 0.2
sm
opacity: 0.3
md
opacity: 0.3
lg
opacity: 0.3
xl
opacity: 0.3
shadow-xs
0.05→0.2
4×
shadow-sm
0.1→0.3
3×
shadow-md
0.1 / 0.06→0.3 / 0.2
3×
shadow-lg
0.1 / 0.05→0.3 / 0.2
3×
shadow-xl
0.1 / 0.1→0.3 / 0.25
3×

Additional Dark Mode Techniques

Combined with shadows, these techniques make dark mode even more effective:

  • ✓Use subtle borders to define boundaries
  • ✓Lighten background of elevated elements (bg-elevated)
  • ✓Combine shadows and borders to express depth