Surfaces & depth

Soft depth, not frames

Depth comes from five surface utilities in globals.css: a faint top highlight, a hairline border and a drop of a few percent. Round the container, not the rows inside it; full-bleed layout regions (sidebar, top bars, split panes) stay square.

Surface vocabulary

Soft

soft

Content: cards, tiles, settings sections

Raised

raised

Controls: buttons, selects, the segmented chip

Raised primary

raised-primary

The one primary action in a view

Well

well

Recessed tracks: segmented controls, input groups

Floating

floating

Menus, popovers, dialogs, toasts

soft · raised · raised-primary · well · floating

Shadows

shadow-soft

Resting cards

shadow-raise

Controls, hovered cards

shadow-press

Pressed and recessed, inset

shadow-float

Anything above the page

shadow-soft · shadow-raise · shadow-press · shadow-float

Radius scale

Key caps, inline code

rounded-[6px] · 6px

Small buttons, menu items

rounded-[10px] · 10px

Buttons, inputs, nav items

rounded-[11px] · 11px

Code blocks, small cards

rounded-[14px] · 14px

Cards and panels

rounded-[18px] · 18px

Dialogs, sheets, the content panel

rounded-[22px] · 22px

controls 10–13px · cards 18px · dialogs 22px · pills rounded-full

Entrances

animate-fade-in

Content swapping in place

180ms · opacity

animate-rise-in

Panels and lists entering

220ms · 6px up + opacity

animate-pop-in

Popovers, chips, confirmations

180ms · scale 0.97 + opacity

animate-fade-in · animate-rise-in · animate-pop-in

Easing and press

Animate only transform, opacity, shadow and colour — never size or position properties that reflow. Buttons press to 0.97; clickable cards lift a pixel and take shadow-raise.

ease-out-soft · ease-spring · active:scale-[0.97] · 120–220ms

Hover lift

hover:-translate-y-px hover:shadow-raise hover:border-border-strong