Elevation & Depth
Surface color plus subtle shadow creates visual hierarchy. Cards sit on tinted backgrounds with shadows reinforcing the lift.
Elevation Levels
0
--elevation-0
Flat, disabled
1
--shadow-xs
Inputs, subtle lift
2
--shadow-sm
Cards at rest
3
--shadow-md
Cards, panels
4
--shadow-lg
Card hover, dropdowns
5
--shadow-xl
Modals, popovers
| Level | Token | Shadow Value | Usage |
|---|---|---|---|
| 0 | --elevation-0 |
none |
Flat, disabled |
| 1 | --shadow-xs |
0 1px 2px rgba(0,0,0,0.04) |
Inputs, subtle lift |
| 2 | --shadow-sm |
0 1px 3px rgba(0,0,0,0.06) |
Cards at rest |
| 3 | --shadow-md |
0 4px 6px rgba(0,0,0,0.07) |
Cards, panels |
| 4 | --shadow-lg |
0 10px 15px rgba(0,0,0,0.08) |
Card hover, dropdowns |
| 5 | --shadow-xl |
0 20px 25px rgba(0,0,0,0.10) |
Modals, popovers |
Colored Shadows (CTAs)
Each app has a colored shadow token for call-to-action buttons.
Main Site
--mainsite-shadow
Planner
--planner-shadow
Coach
--coach-shadow
Interactive Elevation Pattern
Cards lift on hover using a combination of shadow increase and Y translation.
At Rest
shadow-sm
On Hover
shadow-lg + translateY(-2px)
.card {
box-shadow: var(--shadow-sm);
transition: box-shadow 200ms ease, transform 200ms ease;
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
Focus Rings
All interactive elements get a 3px focus ring in the app's light accent color.
/* Standard focus ring (main site) */
box-shadow: 0 0 0 3px #FEE2E2; /* var(--phase-learn-light) */
/* Per-app focus rings */
box-shadow: 0 0 0 3px var(--planner-very-light); /* Planner */
box-shadow: 0 0 0 3px var(--coach-very-light); /* Coach */
Z-Index Scale
100
--z-dropdown
200
--z-sticky
400
--z-modal-backdrop
500
--z-modal
600
--z-tooltip
999
FAB
1000
Toast