Foundations
Material
Surfaces separate by tone and shadow, never by outline. Glass is for layers that float; controls are flat tints.
Colour.
Everything is OKLCH and derives from two hues: --ae-hue for the accent and --ae-neutral-hue for the greys. Light and dark follow the system; force one with data-theme.
Glass.
Frost is a translucent fill, blur and saturation, with one specular on the top edge. Cards use a 66–72% mix; modal layers use 82–88% so content stays legible over anything. It falls back to solid surfaces without backdrop-filter, under reduced transparency or forced colours.
Card · 66 / 72%
Inline surface.
Popover · 88 / 82%
Floating layer.
Solid
data-solid, or any control.
Tint.
Controls answer the pointer with tone, never movement. Each state is one step down a φ ladder: rest 7%, hover 7·φ, press 7·φ². Tinted and solid controls mix their tone by the same steps; hover and press the buttons to walk it.
rest · 7%hover · 11.3%press · 18.3%Depth.
Shadows are layered: a contact, a key and an ambient layer, large blur, low alpha. Key and ambient offsets sit on the space scale, each blur two steps above its offset; contact layers are whole pixels. Never a stroke.
--ae-shadow-s--ae-shadow-m--ae-shadow-l