Space Works UX spec
Space Works UX. This is our own interaction system: the patterns (P1–P30), layouts (L1–L10) and screen specs that every Space Works product follows. It was inspired by Yuyu, whose screens we studied as reference boards R1–R28 (kept in
references/yuyu/). The visual identity comes only from the Space Works brand guidelines.
Status: research input for docs/design-revamp/PLAN.md Phases 0 and 2–6. No app code is changed here.
Scope: layout, information architecture, interaction, states and copy structure. Colour, type
families, logo and icons come from the brand spec (PLAN §3.1–3.3). Where this document says
“primary fill” it means whichever token wins PLAN open question 3 (teal or Deep Ink). The reference boards use a
near-black pill.
Sources: 28 reference screens (R1–R28) in 4 boards, each cropped one per file into the scratchpad
crops/ folder (full-org1..6, full-mgr1..4, full-auth1..7, full-att1..8,
top-att3..11). All app screens are 1280 px wide (the attendee ticket is 390 px), so every
measurement below is a native pixel count read off the crop. Treat values as ±2 px. SpaceWorks
components were read in this worktree at d3e5ed29.
| Ref | Reference screen | Board |
|---|---|---|
| R1 | Organiser home (“Good morning, Priya”, org cards, Coming up, Recent activity) | Organiser workspace |
| R2 | Org Events list (callout, 4 stat cards, tabs, date-chip rows, activity rail) | Organiser workspace |
| R3 | New organisation form + live public-page preview | Organiser workspace |
| R4 | Members (invite-link card, table, dashed empty state) | Organiser workspace |
| R5 | Settings › General (settings rows, Discard/Save, danger zone) | Organiser workspace |
| R6 | Settings › API access (form card, checkbox cards, code block, accordions) | Organiser workspace |
| R7 | Event › Overview (detail header, 8 tabs, stat cards, latest list, At a glance, CTA card) | Managing an event |
| R8 | Event › Check-in (progress stat, offline callout, camera, find, toggles, recent + Undo, door station) | Managing an event |
| R9 | Event › Page & programme (segmented control, track chips, session cards, delay stepper) | Managing an event |
| R10 | Series › Overview (upcoming-date cards, details form, radio chips, agenda, danger zone) | Managing an event |
| R11 | Sign in (split screen) | Sign in, invites & account |
| R12 | Set a new password (centred card, strength meter) | idem |
| R13 | Confirm your email (centred card) | idem |
| R14 | Org invite accept (avatar pair, role pill) | idem |
| R15 | Event co-organiser invite (banner card) | idem |
| R16 | Account › Profile (settings rows, verified pill) | idem |
| R17 | Account › Security (big callout with button, destructive outline) | idem |
| R18 | Public event page with cover + sticky “Join this event” card | Attending an event |
| R19 | Same page, no cover, tenant accent colour | idem |
| R20 | Public programme (time grid, track filter pills) | idem |
| R21 | Public session detail (right rail “Next on main stage”) | idem |
| R22 | Speaker page | idem |
| R23 | Series event page (inline register form inside sticky card, date pills) | idem |
| R24 | Live running order (NOW / NEXT / LATER, delay pill) | idem |
| R25 | Feedback form (rating tiles) | idem |
| R26 | Mobile ticket with QR (390 px) | idem |
| R27 | Kiosk: enter station PIN (digit boxes + keypad) | idem |
| R28 | Kiosk: door check-in station (camera + big result card + Undo + recent) | idem |
On this topic
Section titled “On this topic”- Patterns: shell, headers and navigation Observed scale, app shell, page and detail headers, stat cards, callouts, list rows, tabs and pills.
- Patterns: buttons, cards, tables and forms Buttons, activity rail, key–value cards, tables, settings rows, empty states and forms.
- Patterns: auth, public pages and kiosk Auth split screen, centred cards, account tabs, public pages, tickets, kiosk and undo.
- Interaction model and microcopy The interaction model summary and the microcopy style.
- 1A. Reusable layouts (closed set — every screen composes exactly one) Shared slot types, AppShell, dashboard, list and detail layouts.
- Layouts: settings, forms, flows, auth, public and kiosk The remaining layouts and the pattern-to-layout map.
- 2. Staff console sidebar IA Navigation rules, sections, collapse rules and narrow consoles.
- Screens: home, requests and handout Dashboard, requests, request detail with issue and return, direct handout.
- Screens: inventory, members and settings Inventory list and item, members, staff and roles, makerspace settings.
- Screens: machines, events, bookings, reports and audit Machines, events, bookings, reports and the audit log.
- Screens: member area and public pages Member home, public catalogue, item and event pages.
- Screens: sign-in, invitations, kiosk and the rest Staff and member sign-in, invitations, kiosk and the remaining staff tabs.
- 4. UX quality bar (every screen, app-wide; implementation must pass every applicable item) The checks every screen must pass.
- 5. Where the reference boards don’t scale, and our adaptation Where the reference boards do not scale, and what we do instead.
- 6. Items that need a decision or data before implementation What still needs a decision or data.