canon-depth

CANON · Depth and Elevation

Depth communicates layering and importance. Most AI-generated UIs either flatten everything (no hierarchy) or shadow everything (visual noise). The rules below produce restrained, intentional depth.

Quantified Rules

Shadow Construction

A real shadow has multiple layers. Single-shadow elements look CSS-generated.

/* Wrong: flat, single-layer */
.card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

/* Right: layered, soft */
.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.08);
}

Layer	Purpose
Tight (0 1px 2px)	Defines edge contact
Medium (0 4px 8px)	Hints at lift
Wide (0 16px 32px)	Carries the perceived height

Shadow color is never pure black. Use a tinted color from the same hue as your primary, with very low opacity.

Elevation Tokens

:root {
  --elevation-0: none;
  --elevation-1:
    0 1px 2px rgba(0, 0, 0, 0.04);
  --elevation-2:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.04);
  --elevation-3:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.04);
  --elevation-4:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.08);
  --elevation-5:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.08),
    0 32px 64px rgba(0, 0, 0, 0.10);
}

Elevation	Use case
0	Page background, flush content
1	Resting card, input
2	Hovered card
3	Dropdown, popover
4	Modal
5	Notification, toast (above modal)

Maximum 5 elevation levels. More than that is noise.

Z-Index Scale

:root {
  --z-base:        0;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-fixed:       300;
  --z-modal-bg:    400;
  --z-modal:       410;
  --z-popover:     500;
  --z-tooltip:     600;
  --z-toast:       700;
  --z-notification: 800;
}