Admin & instrumentation
Utility-first patterns for internal tools, ops dashboards, and live instrumentation. Pair with Forms, buttons & CTAs for filters and actions, and Data & tables for dense grids.
App shell
| Block | Class |
|---|---|
| Root | .sermona-admin-shell — flex row, full viewport height (100dvh). |
| Docs / embedded preview | .sermona-admin-shell--demo — drops fixed viewport height; optional border radius + border. Main column gets a minimum height for believable layout in prose. |
| Keep sidebar horizontal on narrow viewports | .sermona-admin-shell--force-sidebar — opt out of the ≤900px stack; use when you need a persistent rail (e.g. wide-only layouts). |
| Sidebar | .sermona-admin-sidebar — narrow rail with .sermona-admin-sidebar__brand. |
| Nav | ul.sermona-admin-nav → a.sermona-admin-nav__link. Mark the active route with aria-current="page" or .sermona-admin-nav__link--active (adds flanking dot affordance). Optional --mark for a single left rail dot on inactive entries. |
| Main column | .sermona-admin-main |
| Sticky header band | .sermona-admin-topbar + .sermona-admin-topbar__title |
| Scrollable content | .sermona-admin-body |
| Page stack | .sermona-admin-dash — vertical rhythm for dashboard sections. |
Responsive: At ≤900px the shell stacks (sidebar on top, nav becomes a 2×2 grid with centered links), unless --force-sidebar is on the shell.
Dashboard chrome
| Block | Class |
|---|---|
| Toolbar row | .sermona-dash-toolbar — space-between row for title/actions and filters. |
| Filter cluster | .sermona-dash-filters |
| Metric / card grid | .sermona-dash-grid — auto-fit tiles with a 12.5rem minimum track. |
Metrics & trends
| Block | Class |
|---|---|
| Tile | .sermona-metric-tile — __label, __value, __hint |
| Delta / comparison | .sermona-trend — --up, --down, --flat |
Status
.sermona-status-badge with optional .sermona-status-badge__dot. Modifiers: --neutral, --ok, --warn, --crit, --info.
Charts
.sermona-chart-slot — dashed placeholder with centered .sermona-chart-slot__label. Swap the interior for SVG/Canvas when you wire a chart library.
Instrumentation & logs
| Block | Class |
|---|---|
| Panel chrome | .sermona-instrument-panel — __header, __title |
| Structured log | ul.sermona-log-list → li.sermona-log-list__item with __time, __level (--info / --warn / --error), __msg (body copy), and code or span.sermona-log-list__token for path/service/deployment chips. |
Layout: Default is a stacked block per line (timestamp → level → message), matching dense instrumentation mocks. For a three-column row on wide viewports, add .sermona-log-list--tabular to the ul.
Semantics: Treat each li as one log line; keep levels in span.sermona-log-list__level so assistive tech can skim. For live regions, wrap the list in an element with aria-live="polite" when streaming (one new line at a time avoids noisy updates).
Demo
Production · us-east
Last 24 hours
Requests
1.24M
+12.4% vs prior window
p95 latency
186ms
−8ms after cache warm
Error budget
94.2%
Flat · SLO on track
Deploys
3
Canary on API
Mount your chart component here — this slot keeps rhythm and dashed affordance until data renders.
Structured logs
Paused- 14:02:01info
Edge cache warmed for
/api/v2/catalog - 14:02:44warn
Retry 2/5 — upstream
paymentstimeout 1500ms - 14:03:09error
Rollback marker written — deployment 7f3a9c aborted