Styleguide
The tokens and reusable building blocks that ship with the PadZero UI shell.
Notifications
The snackbar and dialog services are registered by AddMudServices()
and rendered by their providers in the main layout.
Palette
Plane's Propel
semantic roles, translated in PadZeroTheme: canvas, surfaces,
the text ladder, borders, the Plane-blue accent and the status colours.
Switch between the light and dark palettes with the app bar toggle.
Stat tiles
StatTile shows a headline number and, given Previous,
its change from an earlier period. The analytics dashboard uses it.
Page views
1,284
+22% vs previous 30 daysSign-ins
87
-22% vs previous 30 daysNew tenants
3
New vs previous 30 daysActive users
42
Section headers
SectionHeader introduces a block inside a page, one rung below
PageHeader: a title, an optional Caption, an optional
Count and an Actions slot at the end of the row.
Company details
Tasks
Typography
Propel's type scale: headings from 32px to 16px on 1.2 leading, body on 1.54, and buttons that are never upper-cased.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 6
Body 1 — the quick brown fox jumps over the lazy dog.
Body 2 — the quick brown fox jumps over the lazy dog.
Caption — supporting metadata.