Surface

The base elevation primitive. Surface handles background, shadow, dark-mode overlay, and border — nothing else. Card, Dialog, Drawer, and Popover all build on top of this single foundation.

Variant Comparison

Elevation Scale (0–24)

Radius Scale

Padding Scale

Color Scoping

Polymorphic Element

Card At A Glance

Card gives you a compact API with broad visual range. You can move from simple structural containers to branded, expressive surfaces without changing architecture or adding custom one-off wrappers.

Variant Gallery

Keep the same content structure and switch visual tone by variant. This makes it easy to create hierarchy and emphasis in the interface while preserving consistency in spacing, composition, and behavior.

Shape, Depth, and Density

Refine how a card feels by tuning only three dimensions: corner shape, elevation depth, and internal spacing density. These controls are enough to shift from technical and tight to soft and editorial.

Composable Anatomy

Compose cards with predictable regions for title, body, and actions. This keeps the UX stable for users and fast for developers while still allowing rich, custom content inside each section.

Responsive Real-World Layout

This example shows the same card ecosystem adapting across breakpoints: single-column flow on mobile, split panels on tablet, and dashboard-level composition on desktop with explicit grid spans.