Patterns and layouts
Every original ID remains intact. The names below are stable entry names alongside the IDs, not renumbering or replacements. Entries link to the exact original heading and the components they compose. Product screens remain S1–S24 in the source and long-tail screens. These are an index and condensed entry cards, not claims that new pattern code is shipped.
Pattern index
Section titled “Pattern index”| ID | Stable named entry | Layout |
|---|---|---|
| P1 | App shell and sidebar | L1 |
| P2 | Page header | L3 |
| P3 | Detail header and section navigation | L4 |
| P4 | Stat-card row | L2 |
| P5 | Contextual callout | L3 |
| P6 | Bordered list rows | L3 |
| P7 | Identity and date tile | L4 |
| P8 | Underline tabs and inline counts | L3 |
| P9 | Same-object view switch | L8 |
| P10 | Status, metadata and choice chips | L4 |
| P11 | Action hierarchy | L5 |
| P12 | Recent-activity rail | L2 |
| P13 | At-a-glance key–value card | L4 |
| P14 | Tabular records in a card | L3 |
| P15 | Settings rows and page save | L5 |
| P16 | Danger zone and consequence | L5 |
| P17 | Empty and filtered-empty results | L3 |
| P18 | Create form with live preview | L6 |
| P19 | Checkbox-card form and developer reference | L6 |
| P20 | Session and track board | L4 |
| P21 | Check-in workspace | L7 |
| P22 | Split authentication screen | L8 |
| P23 | Centred task card | L8 |
| P24 | Account sections | L5 |
| P25 | Public event detail | L9 |
| P26 | Live status and feedback | L9 |
| P27 | Mobile ticket | L9 |
| P28 | Kiosk PIN unlock | L10 |
| P29 | Kiosk station work | L10 |
| P30 | Confirmation and awaited Undo | L7 |
Layout index
Section titled “Layout index”| ID | Stable named entry |
|---|---|
| L1 | AppShell |
| L2 | DashboardLayout |
| L3 | ListLayout |
| L4 | DetailLayout |
| L5 | SettingsLayout |
| L6 | FormPageLayout |
| L7 | FlowLayout |
| L8 | AuthLayout and CenteredCardLayout |
| L9 | PublicLayout and PublicDetailLayout |
| L10 | KioskLayout |
Entry contract
Section titled “Entry contract”Owner: Space Works design-system owner; maturity: source-reference index. Added for planned v2.1.0; verified 2026-11-13. A new detailed pattern page must use the same 12 sections as component contracts. The canonical P/L paragraphs, tables, typed slots, breakpoints, code, S mappings and wireframes remain at the links below. This index does not extract them away or substitute for their full contract.
Compose exactly one layout per screen and fill its slots with already-gated actions/data. Inherited states: initial loading, ready, empty, filtered-empty, error/Retry, offline last-known/queued, pending mutation, success and interrupted work. These belong to the task; individual primitive N/A states remain explicit in component pages. Preserve draft/query/URL state after errors, never infer empty from a failed fetch and announce completion once. See UX quality bar and accessibility test scripts.
Named entries
Section titled “Named entries”P1 — App shell and sidebar
Section titled “P1 — App shell and sidebar”Canonical P1 contract. User task: app shell and sidebar. Compose inside L1.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P2 — Page header
Section titled “P2 — Page header”Canonical P2 contract. User task: page header. Compose inside L3.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P3 — Detail header and section navigation
Section titled “P3 — Detail header and section navigation”Canonical P3 contract. User task: detail header and section navigation. Compose inside L4.
Components: Link · Tabs · Drawer / Sheet. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P4 — Stat-card row
Section titled “P4 — Stat-card row”Canonical P4 contract. User task: stat-card row. Compose inside L2.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P5 — Contextual callout
Section titled “P5 — Contextual callout”Canonical P5 contract. User task: contextual callout. Compose inside L3.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P6 — Bordered list rows
Section titled “P6 — Bordered list rows”Canonical P6 contract. User task: bordered list rows. Compose inside L3.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P7 — Identity and date tile
Section titled “P7 — Identity and date tile”Canonical P7 contract. User task: identity and date tile. Compose inside L4.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P8 — Underline tabs and inline counts
Section titled “P8 — Underline tabs and inline counts”Canonical P8 contract. User task: underline tabs and inline counts. Compose inside L3.
Components: Tabs. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P9 — Same-object view switch
Section titled “P9 — Same-object view switch”Canonical P9 contract. User task: same-object view switch. Compose inside L8.
Components: SegmentedControl. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P10 — Status, metadata and choice chips
Section titled “P10 — Status, metadata and choice chips”Canonical P10 contract. User task: status, metadata and choice chips. Compose inside L4.
Components: StatusPill. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P11 — Action hierarchy
Section titled “P11 — Action hierarchy”Canonical P11 contract. User task: action hierarchy. Compose inside L5.
Components: Button · Link · IconButton. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P12 — Recent-activity rail
Section titled “P12 — Recent-activity rail”Canonical P12 contract. User task: recent-activity rail. Compose inside L2.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P13 — At-a-glance key–value card
Section titled “P13 — At-a-glance key–value card”Canonical P13 contract. User task: at-a-glance key–value card. Compose inside L4.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P14 — Tabular records in a card
Section titled “P14 — Tabular records in a card”Canonical P14 contract. User task: tabular records in a card. Compose inside L3.
Components: IconButton · Checkbox · Menu · Table · Pagination · Skeleton / Loader. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P15 — Settings rows and page save
Section titled “P15 — Settings rows and page save”Canonical P15 contract. User task: settings rows and page save. Compose inside L5.
Components: TextField and SearchField · Switch · Select. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P16 — Danger zone and consequence
Section titled “P16 — Danger zone and consequence”Canonical P16 contract. User task: danger zone and consequence. Compose inside L5.
Components: Dialog · Menu. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P17 — Empty and filtered-empty results
Section titled “P17 — Empty and filtered-empty results”Canonical P17 contract. User task: empty and filtered-empty results. Compose inside L3.
Components: EmptyState · Skeleton / Loader. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P18 — Create form with live preview
Section titled “P18 — Create form with live preview”Canonical P18 contract. User task: create form with live preview. Compose inside L6.
Components: TextField and SearchField · Select. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P19 — Checkbox-card form and developer reference
Section titled “P19 — Checkbox-card form and developer reference”Canonical P19 contract. User task: checkbox-card form and developer reference. Compose inside L6.
Components: Checkbox · Radio. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P20 — Session and track board
Section titled “P20 — Session and track board”Canonical P20 contract. User task: session and track board. Compose inside L4.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P21 — Check-in workspace
Section titled “P21 — Check-in workspace”Canonical P21 contract. User task: check-in workspace. Compose inside L7.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P22 — Split authentication screen
Section titled “P22 — Split authentication screen”Canonical P22 contract. User task: split authentication screen. Compose inside L8.
Components: Radio · SegmentedControl. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P23 — Centred task card
Section titled “P23 — Centred task card”Canonical P23 contract. User task: centred task card. Compose inside L8.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P24 — Account sections
Section titled “P24 — Account sections”Canonical P24 contract. User task: account sections. Compose inside L5.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P25 — Public event detail
Section titled “P25 — Public event detail”Canonical P25 contract. User task: public event detail. Compose inside L9.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P26 — Live status and feedback
Section titled “P26 — Live status and feedback”Canonical P26 contract. User task: live status and feedback. Compose inside L9.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P27 — Mobile ticket
Section titled “P27 — Mobile ticket”Canonical P27 contract. User task: mobile ticket. Compose inside L9.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P28 — Kiosk PIN unlock
Section titled “P28 — Kiosk PIN unlock”Canonical P28 contract. User task: kiosk pin unlock. Compose inside L10.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P29 — Kiosk station work
Section titled “P29 — Kiosk station work”Canonical P29 contract. User task: kiosk station work. Compose inside L10.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
P30 — Confirmation and awaited Undo
Section titled “P30 — Confirmation and awaited Undo”Canonical P30 contract. User task: confirmation and awaited undo. Compose inside L7.
Components: Button · Dialog · Drawer / Sheet · Toast. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L1 — AppShell
Section titled “L1 — AppShell”Canonical L1 contract. User task: appshell. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L2 — DashboardLayout
Section titled “L2 — DashboardLayout”Canonical L2 contract. User task: dashboard layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L3 — ListLayout
Section titled “L3 — ListLayout”Canonical L3 contract. User task: list layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Components: IconButton · Menu · Table · Pagination · EmptyState · Toast · Skeleton / Loader. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L4 — DetailLayout
Section titled “L4 — DetailLayout”Canonical L4 contract. User task: detail layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Components: Link · Tabs · Drawer / Sheet · StatusPill. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L5 — SettingsLayout
Section titled “L5 — SettingsLayout”Canonical L5 contract. User task: settings layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Components: Button · TextField and SearchField · Switch · Select · Dialog. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L6 — FormPageLayout
Section titled “L6 — FormPageLayout”Canonical L6 contract. User task: formpage layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Components: Checkbox. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L7 — FlowLayout
Section titled “L7 — FlowLayout”Canonical L7 contract. User task: flow layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L8 — AuthLayout and CenteredCardLayout
Section titled “L8 — AuthLayout and CenteredCardLayout”Canonical L8 contract. User task: auth layout and centeredcard layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Components: Radio · SegmentedControl. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L9 — PublicLayout and PublicDetailLayout
Section titled “L9 — PublicLayout and PublicDetailLayout”Canonical L9 contract. User task: public layout and publicdetail layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.
L10 — KioskLayout
Section titled “L10 — KioskLayout”Canonical L10 contract. User task: kiosk layout. Use the original typed slot API and breakpoint table; this entry does not invent a second layout implementation.
Composition: use the canonical source’s named slots, plus actions, field controls, status and feedback where the task calls for them. Inherit the entry state contract; keep the exact source’s task-specific data, safety, keyboard and responsive constraints.