Elevation

Bumi uses a four-level shadow system to create depth. Shadows are warm and subtle --- they suggest physical elevation without drawing attention to themselves.

Shadow Levels

Level	CSS box-shadow	Usage
0	none	Flat elements, inline text, within-card content
1	0 1px 3px rgba(0,0,0,0.04)	Cards, panels, table containers
2	0 4px 16px rgba(0,0,0,0.06)	Hover-lifted cards, dropdowns, popovers
3	0 8px 32px rgba(0,0,0,0.08)	Modals, sheets, dialogs
4	0 16px 48px rgba(0,0,0,0.12)	Floating shell container

Light Mode Shadows

Level 0

none

Level 1

Cards, panels

Level 2

Dropdowns, popovers

Level 3

Modals, dialogs

Level 4

Floating shell

Dark Mode Shadows

In dark mode, shadows need higher opacity to be visible against dark backgrounds.

Level	Dark Mode box-shadow
0	none
1	0 1px 3px rgba(0,0,0,0.20)
2	0 4px 16px rgba(0,0,0,0.25)
3	0 8px 32px rgba(0,0,0,0.30)
4	0 16px 48px rgba(0,0,0,0.40)

Dark Mode Shadows

Level 0

none

Level 1

Cards

Level 2

Dropdowns

Level 3

Modals

Level 4

Shell

The Floating Shell Shadow

The floating shell uses Level 4 shadow to make the entire app container appear to hover above the body background.

.floating-shell {
  margin: 12px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.dark .floating-shell {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.40);
}

Backdrop Blur

Modal overlays use a semi-transparent backdrop with blur to create depth separation.

Backdrop Blur Preview

Background content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. Duis aute irure dolor in reprehenderit. Background content continues here with more text visible underneath the overlay.

Modal Content

.modal-overlay {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

CSS Custom Properties

:root {
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.12);
  --backdrop-blur: blur(6px);
}

.dark {
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.30);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.40);
}

Elevation Hierarchy

Level 4  ─── Floating Shell (the app container itself)
Level 3  ─── Modals, sheets, dialogs (above the page)
Level 2  ─── Dropdowns, popovers, hover cards (above the surface)
Level 1  ─── Cards, panels (the content surface)
Level 0  ─── Inline elements (on the surface)

DO and DON'T

DO

• Use Level 1 for standard cards and content containers
• Use Level 3 for anything that overlays the page (modals, sheets)
• Increase shadow opacity in dark mode
• Combine backdrop blur with semi-transparent overlay for modals

DON'T

• Never use colored shadows (no 0 4px 16px rgba(45,107,74,0.2) green glow)
• Never use more than one shadow level on the same element
• Don't add shadows to elements inside cards --- the card provides the elevation
• Don't use drop-shadow filter --- always use box-shadow for consistency