Design System v1.0

Page header

A breadcrumb above the H1, plus optional tab and toolbar rows. Any crumb — including the current page — can open a dropdown to pivot between peers.

Breadcrumb + title

The baseline every page should have: an ancestor breadcrumb above the H1. Any crumb can carry a dropdown (here 'Downtown Plant') for switching between sibling pages.

Meter 12

Electricity submeter · 3-phase · 400A

Breadcrumb + title + tabs

Adds a tab row beneath the title for switching between views of the same resource.

Meter 12

Electricity submeter · 3-phase · 400A

Breadcrumb + title + tabs + toolbar

The full pattern: also a right-aligned toolbar with an 'updated' meta, a date-range picker, export, and a primary action.

Meter 12

Electricity submeter · 3-phase · 400A

Updated 2m ago

Command Palette

Search for a command to run...