Patterns in practice

These are real screens from Space Works Events, built on Space Works UX and run with demo data. Each pattern links back to its number in the Space Works UX spec. Select any image to open it at full size.

A Citron sidebar with the workspace switcher on top, a text-only nav with one filled active item, then “View public page ↗” and the account chip at the bottom. On a phone it folds into a top bar and sheet.

Organisation dashboard in the app shell, light theme — The dashboard answers “what needs me?” first: the callout links straight to the approvals and the draft.

Organisation dashboard in the app shell, dark theme — The dashboard answers “what needs me?” first: the callout links straight to the approvals and the draft.

One identity block per page: name, meta and at most one filled primary action. A contextual callout carries the next step, and stat cards show real numbers.

Event detail with header, stat cards and readiness callout, light theme — Detail header with a date tile, status chips, underline tabs and a readiness checklist where every gap links to its fix.

Event detail with header, stat cards and readiness callout, dark theme — Detail header with a date tile, status chips, underline tabs and a readiness checklist where every gap links to its fix.

Lists with filter chips and bulk actions (P6, P8, P10)

Filter chips carry their counts. Selecting rows turns on the bulk bar. Every status is a word in a pill, never colour alone.

Member list with filter chips, search and status pills, light theme — Member IDs: All 10 · Waiting 2 · Approved 6 · Rejected 1 · Revoked 1, with a reason shown under a rejection.

Member list with filter chips, search and status pills, dark theme — Member IDs: All 10 · Waiting 2 · Approved 6 · Rejected 1 · Revoked 1, with a reason shown under a rejection.

Guest list with status chips and inline actions, light theme — Guests: the next step is inline in the row; rare actions sit in the row menu.

Guest list with status chips and inline actions, dark theme — Guests: the next step is inline in the row; rare actions sit in the row menu.

Tables inside a card (P14)

Dense data keeps the card chrome: a bordered card, sentence-case column labels and a hairline between rows.

Team table with roles and an invite card, light theme — Team members with roles, and the invite card on top.

Team table with roles and an invite card, dark theme — Team members with roles, and the invite card on top.

Settings rows, live preview and sticky save (P15, P16)

Settings are labelled rows with helper text beside each field. Changes collect in a sticky Discard / Save bar, and the danger zone sits at the very end.

Organisation settings with live public-page preview, light theme — The public-page preview updates as you type. Nothing is saved until you choose Save changes.

Organisation settings with live public-page preview, dark theme — The public-page preview updates as you type. Nothing is saved until you choose Save changes.

Create with a live preview (P18)

Create forms stay short, mark optional fields inline, and check the web address as you type.

Create an organisation form, light theme

Empty states and first-run (P17)

An empty workspace never just says “nothing here”. It names the next step, and the first-run checklist shows only one call to action at a time.

New organisation with the first-run checklist, light theme

New organisation with the first-run checklist, dark theme

Work in a focused flow (P21, P30)

High-frequency work gets its own focused surface: the scanner, search, live progress and an offline callout. Reversible actions offer Undo in place instead of asking “Are you sure?”.