Materials
Surfaces, shape, elevation
Use the lowest elevation that communicates hierarchy. Controls are pills; panels are soft rectangles. Shadows come from the four-step ladder and adapt to dark mode.
Card appearances
Set with appearance. Never nest a card in a card.
Card tones
Status cards: tone swaps the ring and background for the role's soft pair; text stays on foreground.
Elevation
Four steps. shadow-xl / 2xl collapse onto lg. Read from theme.css.
shadow-xsHairline lift on hovered chips
shadow-smCard appearance=raised
shadow-mdPopovers, menus, floating panels
shadow-lgDialogs, sheets
| Token | Light | Dark |
|---|---|---|
| --elevation-xs | 0 1px 2px rgb(0 0 0 / 0.04) | 0 1px 2px rgb(0 0 0 / 0.35) |
| --elevation-sm | 0 1px 3px rgb(0 0 0 / 0.07), 0 1px 2px rgb(0 0 0 / 0.04) | 0 2px 8px rgb(0 0 0 / 0.38) |
| --elevation-md | 0 8px 24px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.05) | 0 12px 32px rgb(0 0 0 / 0.48) |
| --elevation-lg | 0 18px 48px rgb(0 0 0 / 0.14), 0 4px 12px rgb(0 0 0 / 0.07) | 0 24px 64px rgb(0 0 0 / 0.58) |
Shape
Radius roles map to what the element is.
rounded-controlEvery control: buttons, inputs, selects, toggles, badges, pill tabs
rounded-panelCards, popovers, menus (rounded-xl resolves the same)
rounded-dialogDialog, AlertDialog, Sheet
rounded-lgMenu items, small inner boxes, code, textareas
rounded-mdCompact inner boxes
| Token | Value |
|---|---|
| --radius | 0.625rem |
| --shape-control | 9999px |
| --shape-panel | 0.875rem |
| --shape-dialog | 1rem |