Foundations

Materials

Materials combine a surface, stroke, radius, and optional shadow. Use the least elevation that still makes the hierarchy obvious.

Card materials

Outline and filled cover most product UI. Raised is occasional; floating and overlay belong to menus and dialogs.

Filled

Default product information and grouped sections.

Outline

Selectable objects, tables, and previews.

Raised

A card that sits above a filled region.

Ghost

Layout grouping with no visual container.

Raised

Cards

Floating

Menus

Overlay

Dialogs

Controls are pills. Panels are softly rounded. Dialogs get one additional step—never arbitrary radii per page.

Control · full

Panel · xl

Dialog · 2xl