Controls · calibration
Depth you can press.
Eight constructions, one depth language. Hover them, press them, tab through them — every specimen below is the real component.
Surface scale
The five semantic levels. Everything else is composed from these.
Eight constructions
Each answers the pointer differently: rise, collapse, recess, separate, widen, travel, divide, approach.
Hairline Circle
rise and return
Extruded
collapse
Inset
toward flush, then deeper
Layered
separate, recombine
Expand
change of silhouette
Directional
semantic travel
Split Action
independent chambers
Double-Ring
response to approach
Same family, different jobs
Sizes, directions and tones side by side.
Modern surfaces
Current treatments — glass, a travelling edge, pointer-tracked light, a pass of sheen, a keycap chamber.
Glass
light before matter
Border Beam
a lap of light
Spotlight Edge
light follows the pointer
Sheen
one pass across the face
Command Chip
the keycap answers first
Hairline Chamber
opposing surfaces
Gradient on transition
No colour at rest — the gradient exists only while something is changing, then it is gone. Flip them.
Liquid
wipes along the track
Liquid · fluid
more overshoot
Bloom
bursts from the thumb
Trail
a wake behind the travel
Bloom Button
colour at the touch point
Disabled
no bloom
Menu triggers · Signatures
The clearest Pinky constructions: each has a different close-mark signature and a direct action path.
Floating Lines
depth separation → offset cross
Bracket Menu
convergence → framed cross
Split Rail
counter-slide → recombine
Text Menu
rule draws, word travels
Bento Menu
gutter breathes → block turns
waffle · Microsoft
Inset Menu
opposing depths → minus + dot
Expandable Menu
silhouette → word travel
Panel Toggle
rail redraws the layout
sidebar · VS Code / Linear
Menu triggers · Presets & utility marks
Familiar marks and secondary variants remain live for comparison, but do not compete with the signature set above.
Sliding Stack
shear → parallel diagonals
Double-Line Ring
staged: ring, then lines
Elastic Lines
length in place
Dot Grid
radial stagger → cross
app launcher · Google
Meatball
spread → diagonal fold
overflow · iOS / Notion
Kebab
column merges to a bar
overflow · Material
Plus
arms extend → 45°
create · Notion / Linear
Avatar
ring opens, caret turns
account menu
Focus is part of the construction: tab through this page and every control lifts exactly as it does under the pointer, with a 2px ink outline offset clear of its own shadow. With reduced motion enabled the depth stays and only the travel goes.