Skip to content
Triargos Design

Surfaces

Surfaces sit on each other: sidebar → page panel → card shell → card → popup. Quiet fills are relative: the same class reads one step from whatever surface it sits on. Elevation says how high a surface sits.

Elevation

One edge at every level: a translucent ring outside the fill, so it takes the color of whatever sits behind it. Higher levels add drop; in dark the drops vanish and the white ring carries the edge.

flatPage content, shells
shadow-borderThe ring alone, no lift
shadow-fieldFields: a firmer ring, heavier at the bottom
shadow-raisedCards, raised buttons, tab chips
shadow-popupMenus, popovers, selects, tooltips
shadow-modalDialogs, sheets

Stack

Each layer shows the same fill classes.

Page panelMainLayout · bg-background
mutedfieldshellneutral-subtle

Card shell

The label strip sits on the shell, not on a second surface.

CardCardContent
mutedfieldshellneutral-subtle
PopupPopoverContent · shadow-popup
mutedfieldshellneutral-subtle