Canvas
Page. No shadow.
Elevation
A short ladder. Most of the dashboard lives at 0–1. If everything is raised, nothing is.
On paper, elevation is hairline plus shadow. On ink, elevation is a lighter surface. Dark-on-dark shadow reads as dirt. Do not mix the two recipes on one surface.
Ladder
| Level | Job | Paper | Ink |
|---|---|---|---|
| 0 Canvas | The page | Paper #F6F3EE, no shadow | #0E141B, no shadow |
| 1 Panel | Bounded region, one job | Hairline + 0 1px 2px rgb(14 20 27 / 6%) on surface #FFFCF7 | Surface #161E27, hairline, no shadow |
| 2 Raised | Sticky, dropdown | 0 4px 12px rgb(14 20 27 / 8%) + hairline | #1C2630, hairline |
| 3 Overlay | Dialog, command palette | 0 16px 40px rgb(14 20 27 / 18%) + hairline | #222C38, hairline |
| 4 Toast | Must win over overlay | As 3; z-index wins | #2A3542, hairline |
Level 4 uses the same shadow recipe as 3. It wins with --z-toast, not a heavier blur.
Why no shadow in ink
A drop shadow on #0E141B is a smear, not a lift. Lighter surface is the elevation. If two ink layers share a fill, they are the same level — add a hairline or step the surface token.
Z-index
Named layers. Never 9999. Never a magic number because a dropdown “lost.”
| Token | Value | Layer |
|---|---|---|
--z-base | 0 | Canvas, panels |
--z-sticky | 100 | Sticky raised (level 2) |
--z-rail | 200 | Rails, outside the canvas |
--z-dropdown | 300 | Menus, typeahead |
--z-overlay | 400 | Dialog, command |
--z-toast | 500 | Toast, must win |
--z-skip | 600 | Skip link |
A rail is not an overlay. A toast is not a dropdown. If a component needs a new band, it is probably the wrong level.
CSS custom properties
| Token | Paper | Ink |
|---|---|---|
--shadow-0 | none | none |
--shadow-1 | 0 1px 2px rgb(14 20 27 / 6%) | none |
--shadow-2 | 0 4px 12px rgb(14 20 27 / 8%) | none |
--shadow-3 | 0 16px 40px rgb(14 20 27 / 18%) | none |
--shadow-4 | var(--shadow-3) | none |
--elev-0-bg | var(--bg-canvas) | var(--bg-canvas) |
--elev-1-bg | var(--bg-surface) | var(--bg-surface) |
--elev-2-bg | var(--bg-raised) | var(--bg-raised) |
--elev-3-bg | var(--bg-overlay) / raised | #222C38 |
--elev-4-bg | var(--bg-toast) / raised | #2A3542 |
Z-index tokens are in the table above. On paper, overlay and toast sit on --bg-raised and lift with shadow. On ink they are lighter fills.
Live values are in site/css/tokens.css.
Live ladder
Live surfaces. Ink drops the shadow and steps the fill. Toggle Paper / Ink to see both recipes.
Panel
Hairline. Most of the dashboard.
Raised
Sticky, dropdown.
Overlay
Dialog, command.
Toast
Must win. Same shadow as 3; z-index is the difference.