Surfaces components

Try the canonical surfaces families. Each specimen keeps its anatomy and behavior across all eight moods.

Surfaces / Canonical family

Tonal Card

A contained group separated through tone.

A considered grouping

One clear task, contained by tone.

Add a surface only when grouping or interaction requires it.

Keep readable text contrast; preserve a meaningful heading and reading order.

States: default, focus

Subtle authored presentation; Base UI and native HTML behavior.