Dashboard Patterns
The vocabulary the shell’s home dashboard (/app/) is drawn with. These are candidate components: they live in app/css/dashboard.css under the .dash__* prefix, not yet in components.css as ws_* helpers. This page is the promotion ledger — a pattern that earns a second consumer graduates; one that stays dashboard-only stays here.
ws_* component or uses one. The dashboard deliberately ran ahead of that rule while its patterns were still moving; registering them here is the decision that they are now design-system material rather than private CSS. Every colour was measured, not assumed: worst text contrast on the page is 5.30:1 (tinted pills), and the sizes are stated in px because the platform’s 80% root font-size renders the rem type tokens a fifth small.
Quick action
The .dash__q pill is retired. It was a tinted, borderless shortcut, deliberately quieter than the hero beneath it, and it held three actions. At two — New workshop and Run a session — they are the only ways into the day the page offers, which makes them its calls to action rather than shortcuts past it. So they are ws_button primary now, and the dashboard carries no bespoke button CSS at all. .dash__quick survives as the layout that lays them out.
Attention row
One stuck workshop per row: what it is, why it is stuck, and the single action that moves it on. The whole row is one link and the pill is decoration inside it — a nested anchor for the same destination would be a second tab stop going nowhere new.
Hero card
The one card on the page that is not white — it carries the single decision the dashboard exists to make. Brand gradient, white content, action chips at 95% white. The decorative shapes sit at z-index: 0 under the content on purpose: ::after paints over children at auto, which put a blob over the title the moment it wrapped.
Innovation Spark for Engineers
Designed · not run yet
Funnel card
Three bars off a shared zero, one hue, the value stated at the end of each. Not stacked and not three colours: the point is the drop between stages. The bars are aria-hidden because each is a second rendering of the number beside it.
Your workshop funnel
of the workshops you ran got synthesized. The number worth moving.
Promotion ledger
| Pattern | Overlaps | Status |
|---|---|---|
.dash__q quick action | ws_button primary | Retired — never found a second surface, and at two actions the row wanted a call to action rather than something quieter. Deleted; the dashboard uses ws_button |
.dash__row attention row | ws_listing_card | Candidate — differs in being a single-link row with an inline verb |
.dash__hero hero card | ws_hero | Dashboard-only for now; ws_hero is a page hero, this is a card |
.dash__viz funnel / trend | ws_stat, ws_progress | Candidate — ws_stat shows one number, these show a shape |