Foundations

Elevation

Elevation levels for depth and hierarchy—cards, overlays, dialogs, and focus.

Our elevation system is used to visually differentiate the hierarchy in the interface.

Usage

Level 1: Use for elements that sit directly on the surface, like Card
Level 2: Use for Toast, Popover, or other supplemental actions
Level 3: Use for large elements like a Dialog or Drawer that temporarily block or draw a user’s focus.

Colors

The Kindling color palette, pairings, naming conventions, and related resources.

Illustrations