Surfaces
Surfaces are the containers that hold your content. They define the background color, border color, and text context for everything inside them.
The Canvas
Section titled “The Canvas”These surfaces form the backdrop of your application.
surface-page
Section titled “surface-page”The infinite background. This is usually applied to the <body> tag.
This is the Page surface.
surface-workspace
Section titled “surface-workspace”A slightly elevated area, often used for sidebars, navigation rails, or the main content area in a dashboard.
This is the Workspace surface.
The Containers
Section titled “The Containers”These surfaces sit on top of the canvas.
surface-card
Section titled “surface-card”The primary container for grouped content. It has a distinct background color that separates it from the canvas.
surface-tinted
Section titled “surface-tinted”A subtle grouping mechanism. It usually has a slight tint of the brand color (or another semantic color) to highlight a section without a hard boundary.
This is a Tinted surface inside a Card.
The Spotlights
Section titled “The Spotlights”These surfaces demand attention. They often use Inverted Polarity (Dark on Light, or Light on Dark) to stand out.
surface-spotlight
Section titled “surface-spotlight”High contrast. Used for tooltips, toasts, and primary call-to-actions.
This is a Spotlight.
surface-soft-spotlight
Section titled “surface-soft-spotlight”A softer version of the spotlight. Useful for badges or indicators that need to be distinct but not shouting.
This is a Soft Spotlight.
Elevation (Shadows)
Section titled “Elevation (Shadows)”Shadows provide depth and hierarchy. The system generates a semantic scale of shadows that are subtle in Light Mode and stronger in Dark Mode to ensure visibility.
Token Reference
Section titled “Token Reference”Every surface exposes a standard set of CSS variables (tokens) that adapt to the surface’s background.
| Token Variable | Description | Usage |
|---|---|---|
--surface-token | The background color of the surface. | background: var(--surface-token) |
--text-high-token | High contrast text color. | color: var(--text-high-token) |
--text-subtle-token | Medium contrast text color. | color: var(--text-subtle-token) |
--text-subtlest-token | Low contrast text color. | color: var(--text-subtlest-token) |
--border-dec-token | Decorative border color (low contrast). | border-color: var(--border-dec-token) |
--border-int-token | Interactive border color (higher contrast). | border-color: var(--border-int-token) |