FoundationsElevation
Lines, then shadows, in that order.
The system uses lines more than shadows. A 1 px line is a quieter, more readable form of depth than a box-shadow. Shadows exist for the moments when a line won't do — overlays, modals, and search palettes.
The four elevation tokens
The scale is flat-baseline, subtle, overlay, modal. Each step is meant to read as visibly different from the one below it; if you can't tell the difference, the right answer is to drop a level.
box-shadow: none;
0 1px 2px rgba(26,24,22,0.04), 0 1px 1px rgba(26,24,22,0.04)
0 12px 24px -8px rgba(26,24,22,0.16), 0 4px 8px rgba(26,24,22,0.06)
0 24px 48px -24px rgba(26,24,22,0.32)
What goes where
The four roles, in order of how much they should be used.
| Token | Use |
|---|---|
elevation-0 | Default page state, no shadow, lines only |
elevation-1 | Cards, popovers, dropdowns (subtle, in-flow) |
elevation-2 | Dialogs, tooltips, command palettes (above flow) |
elevation-3 | Modal dialogs, full-screen overlays |
Three rules of shadow use
- Default to no shadow. If a card, an input, or a popover can read correctly with a 1 px
--line-subtleborder, do that instead. Shadows are louder than lines. - Never use elevation-1 on a card inside a card. The compound effect reads as "broken" — the inner card looks like it has been pressed into the outer one. Use a line on the inner card.
- Shadows go in one direction. Every shadow in the system has a positive Y offset and a small ambient component. The direction is not arbitrary; it matches the direction of the page (light from above).
The recipe
The exact CSS, copied from the design-system stylesheet.
/* Lines, not shadows */
:root {
--line-subtle: rgba(26, 24, 22, 0.08);
--line-strong: rgba(26, 24, 22, 0.16);
}
/* Shadows, when lines won't do */
.ds-card { box-shadow: 0 1px 2px rgba(26, 24, 22, 0.04), 0 1px 1px rgba(26, 24, 22, 0.04); }
.ds-overlay { box-shadow: 0 12px 24px -8px rgba(26, 24, 22, 0.16), 0 4px 8px rgba(26, 24, 22, 0.06); }
.ds-modal { box-shadow: 0 24px 48px -24px rgba(26, 24, 22, 0.32); }Why this restraint
The site reads as editorial. A heavy shadow on a card pulls the eye away from the prose and onto the chrome. By keeping shadows small and using lines for most of the depth, the content gets to be the most prominent thing on the page.