Foundations

Surface

Depth in Luc UI is a luminance step plus a hairline. The stack is ordered, and components occupy a defined level rather than picking a grey at random.

The stack

Each level is a real component in this page — hover the nested cards to see how hairlines behave between levels.

surface.canvas

level 0

Card on canvas

surface-default

One hairline, a small shadow, one luminance step above the canvas.

Nested well

surface-sunken

Inputs and code sit *below* their container. Never go deeper than this.

Raised region

surface-raised

Used by stat cards, popovers and anything that must clearly sit on top.

surface.overlay — dialogs & tooltipssurface.interactive — controls

Reference

Surface tokens
Token	Utility	Use for
`surface.canvas`	`bg-surface-canvas`	Page background. One per view.
`surface.sunken`	`bg-surface-sunken`	Inputs, code blocks, inset wells.
`surface.default`	`bg-surface-default`	Cards and panels resting on the canvas.
`surface.raised`	`bg-surface-raised`	Stat cards, popovers, active segments.
`surface.overlay`	`bg-surface-overlay`	Dialogs, tooltips, floating menus.
`surface.interactive`	`bg-surface-interactive`	Buttons, hoverable rows, segmented tracks.
`surface.inverse`	`bg-surface-inverse`	Inverted chips and counters.

Rules

Stop at three nested levels: canvas → card → well.
Use a hairline (border-line-subtle when two levels are close in luminance.
Let overlays use the deepest shadow in the system.

Don't

Add a fourth nesting level — flatten the content instead.
Put an overlay surface inline in a page.
Rely on a big shadow to separate two surfaces in dark mode.