Patterns: shell, headers and navigation

1. Pattern catalogue

1.0 Observed scale (use these, not ad-hoc values)

Current rule (v2.0.1, 2026-11-13): Despite the retained heading, this section records measured inspiration-board styles. Product defaults use CR-RADIUS-01/CR-SIDEBAR-01/CR-TYPE-01: 10 px controls, 16 px cards, text-only Citron/neutral sidebar and shipped font roles. Cream/white describes light mode; dark uses CR-DARK-01. Reference shadows do not override the explicit floating-layer exception. (1A-N20) — supersedes the line above; see docs/current-rules.md#cr-scope-01.

Spacing steps actually used: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40. Card-to-card gap is 12; section-to-section gap is 32–40; page gutter beside the sidebar is 36.
Radii: nav pill 8 · input, card, table container, stat card 12 · callout 14 · camera and large blocks 16 · centred auth card 20 · kiosk panels 24 · auth brand panel 28 · buttons, chips and pills fully round.
Type sizes (px): 11 caps (date-chip month, ticket labels) · 12 caps with +0.08em tracking (eyebrows such as “ORGANISATIONS”, “PUBLIC PAGE PREVIEW”, “RECENT”) · 13 small meta and helper · 14 meta lines, table cells, sidebar sub-items · 15 nav items, buttons, tab labels, body UI · 16 row titles and settings labels · 20 section headings (“Coming up”, “Recent activity”) · 22 sticky-card title · 32–40 page titles (bold, tight tracking about −0.02em) · 52 kiosk and centred-hero titles · ~70 public event title.
Weights: only regular, semibold and bold. Bold is reserved for titles, numbers and the name inside an activity sentence.
Borders: 1 px warm hairline everywhere. Shadows only on floating things (auth hero cards, segmented thumb, sticky join card, very soft). Cards are flat, bordered and white on an off-white app canvas. The sidebar is a slightly darker off-white with a right hairline.
Control heights: header buttons 44 · auth and full-width buttons 50–52 · inputs 48–50 · inline pill actions 28 · status pills 20–22 · nav items 40 · table rows 64 · list-card rows 82 · kiosk keys 76.

Current rule (v2.0.1, 2026-11-13): The P1 drawing and measurements are research. Current product sidebar is 256 px with text-only navigation, Citron in light, neutral in dark and a teal current item; keep the user-menu theme choices. Logo sizes come from brand F.3, not the 30 px reference tile. Apply this visual precedence also to L1 and §2. (1A-N21) — supersedes the line above; see docs/current-rules.md#cr-sidebar-01.

┌──────────── 240–300 ────────────┬───────────────────── main ─────────────────────┐
│ [S] Space Works                  │  36px gutter                                   │
│ ┌─────────────────────────────┐ │                                                │
│ │[SD] Screenshot Demo Coll… ⇕ │ │                                                │
│ │     Owner                    │ │                                                │
│ └─────────────────────────────┘ │                                                │
│ ▣ Events            (active)    │                                                │
│ ◌ Series                         │                                                │
│ ◌ Members                        │                                                │
│ ◌ Settings                       │                                                │
│     General      (sub-items     │                                                │
│     API access    when active)  │                                                │
│                                  │                                                │
│ View public page ↗               │                                                │
│ (PO) Priya Organiser             │                                                │
│ Sign out                         │                                                │
└──────────────────────────────────┴────────────────────────────────────────────────┘

Width: 240 on the cross-org home and 298 inside an org. The settings and account crops show 380–400, which is a screenshot artefact rather than a rule. Spec: 264 fixed at ≥1024 px. That leaves 1280 − 264 − 72 = 944 px of content.
Logo row: a 30 px rounded tile plus an 18 px bold wordmark. Top and left inset 22.
Workspace switcher card: 14 px side inset, 58 px tall, radius 10, 1 px border, white fill. It holds a 30 px rounded-6 avatar tile (org colour, initials), the name at 14 semibold (truncated with an ellipsis), the role at 12 muted, and an up-down chevron on the right. The whole card is one button that opens a menu.
Nav item: 40 tall with a 43 px pitch (3 px gap), radius 8, 14 px inset from the sidebar edge, 10 px text padding. An 18 px line icon, 10 px gap, then the 15 px label. Active: a filled warm-grey pill and a semibold label; no accent bar and no coloured text. The home sidebar (R1) has no icons. The org sidebar has icons on the four top items only.
Section label: “ORGANISATIONS”, 12 caps tracked and muted. 24 px above, 8 px below.
Sub-items appear only under the active parent: 14 px labels indented 24, with the same active pill. R5 and R6 show Settings › General / API access.
Bottom block, pinned with margin-top:auto: a “View public page ↗” text link (14), a user chip (24 px initials circle plus name; it becomes a filled pill while on Account), then “Sign out” as plain text. There is no theme toggle and no help item in the sidebar.
Interaction: the sidebar never scrolls on the reference boards because they have 4 items. SpaceWorks needs its own scroll region (see §2). The active state comes from the route.

Good morning, Priya                       ← 15 muted (greeting or date line)   y+40
Events                         [ New series ] [■ + New event ]  ← title 40 bold; buttons 44h
People who can work on this organisation's events.   ← optional 15 muted subtitle, 8 below

Eyebrow line, above the title: either a date (“Wednesday, 14 October”) or a greeting (“Good morning, Priya”). It appears only on landing screens (home, events). Inner pages use a subtitle under the title instead: one sentence that names the scope and what saving does (“How Screenshot Demo Collective appears to the public. Changes go live when you save.”).
Actions sit right-aligned on the title baseline row: at most one filled primary pill plus one outline pill. Primary text is 15 semibold with 20 px horizontal padding. A “+” glyph prefixes create actions. The secondary pill is an outline on white.
24 px from the header block to the first content element.

P3. Detail header with back link, identity chip and underline tabs (R7–R10)

← All events                                              13 semibold link
┌OCT┐ Demo Summit 2026                     [ View page ↗ ] [■ Open check-in ]
│14 │ (Published) Public · Tomorrow, 9:30 AM
└───┘
Overview  Guests  Page & programme  Registration form  Invites  Check-in  Feedback  Settings
━━━━━━━━──────────────────────────────────────────────────────────────────────── (full bleed)

Back link: “← All events” at 13 semibold. It is the only breadcrumb, 32 px above the title.
Identity chip: 52×52 (see P7). The title is 34 px bold. 14 px gap between chip and title.
Meta line: the status pill (P10) first, then “Public · Tomorrow, 9:30 AM” at 14 muted, separated by “ · “.
Contextual primary: “Open check-in” on Overview. On the Check-in tab the primary disappears (R8) and only “View page ↗” stays. On Page & programme it becomes “View programme ↗” (R9). Rule: the header primary never points at the screen you are on.
Tabs: 15 px labels, 12 px horizontal padding, a 40 px tall bar. The active tab is ink and semibold with a 2 px ink underline as wide as the label plus its padding. Inactive tabs are muted. A 1 px hairline runs full bleed across the main area, not just the content column. Tabs are links (URL-addressable). With 8 tabs on 944 px they fit on one line; below that they must scroll horizontally with edge fades (the reference boards do not show this).
Series uses a coloured icon tile (a recurrence glyph on a purple 52 px tile) instead of a date chip. Generalisation: every detail page has an identity tile; a date where one exists, otherwise a type icon or initials.

P4. Stat-card row (R2, R7, R8)

Grid: 4 equal columns with 12 gaps, 102 tall, radius 12, 1 px border, 16 px padding.
Anatomy: label at 14 muted on top, number at 28–30 bold 12 px below. Variants:
- Fraction: “5 / 120” with the denominator at 16 semibold muted.
- Progress: a 4 px track (8 px on check-in) with the fill in the accent colour, 12 px below the number.
- Wide stat: spans 1.5–2 columns (R8 “Checked in 2 of 5 · 40%”) with a callout beside it.
Not clickable on the reference boards. SpaceWorks deviation: stat cards that represent a queue are links to the filtered list (the dashboard does this today). Keep the card flat but give it a hover border and focus ring.
Zeros are shown as “0”, not hidden (R7 “Waiting for approval 0”).

P5. Contextual callout (R2, R6, R8, R17, R7 CTA card)

Three sizes, all in warm-yellow fill with dark-brown text, radius 14, no border:

Banner (R2): one line, 50 tall, full content width, 16 px padding. A circled “!” icon, then a bold lead clause (“Demo Summit is tomorrow.”) and a regular follow-on (“Download the guest list for offline check-in before you leave.”). A right-aligned underlined bold link with “→” (“Prepare check-in →”).
Panel with button (R8, R17): two lines, about 105 tall. A bold title (“Not ready for offline yet”, “Two-step sign-in is off”), one sentence of consequence, and a filled dark-brown pill button on the right (“Download guest list”, “Set up authenticator”).
CTA card (R7 “Get the door ready”): sits in a side column, the whole card is a link, with a bold title, a body line and a “→” at the right.
Inline advisory (R6): one line, “!” plus text, no action (“Keep keys in a secret manager. Never put them in browser code, URLs, source control or logs.”).

Rules observed: a callout exists only when something is time-sensitive or unsafe and the user can act now. There is never more than one on a screen. It always names the consequence. There are no info-blue “tips”. A callout replaces a toast or banner for standing conditions.

P6. List rows as bordered cards (R1, R2)

┌──────────────────────────────────────────────────────────────────────────┐
│ ┌OCT┐  Demo Summit 2026                                   5 / 120 going   │ 82 tall
│ │14 │  Tomorrow, 9:30 AM · Bangalore International Centre ▬───────────    │
│ └───┘                                                                     │
└──────────────────────────────────────────────────────────────────────────┘ 12 gap
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐
  ┌NOV┐  Volunteer onboarding                              (Finish & publish)   ← draft: dashed,
  │12 │  Draft · only your team can see it                                        grey fill/chip
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘

Card: radius 12, 1 px border, 16–18 px padding. The whole row is a link to the detail page.
Left: an identity chip. Middle: the title at 16 semibold and a meta line at 14 muted with “ · “ separators and relative time words (“Tomorrow”, “In 9 days”, “Every Tuesday”).
Right slot holds exactly one thing, chosen by state:
- progress: “5 / 120 going” with a 110 px × 4 px bar;
- a yellow action pill (28 tall, 13 semibold, brown text): “Prepare check-in”, “Finish & publish”. This is the row’s next step;
- a two-line nudge: muted state (“No guests yet”) over a teal text link (“Send invites”).
Drafts: dashed border, off-white fill, grey chip, and meta that says who can see it (“Draft · only your team can see it”).
R1 “Coming up” uses the same row with the action pill only on the most urgent item.

P7. Date chip / identity tile

Size: 52×52 in rows and headers (54 on the event list), radius 8, 1 px border.
Top band: 18 px, coloured fill, month at 11 caps bold white. Body: white, day at 20 bold ink.
Band colour is stable per event (identity hash): orange, indigo, teal. Drafts get grey.
Variants: initials tile (org avatar: rounded square, coloured fill, white initials), person avatar (circle, pastel fill, coloured initials at 11 bold), icon tile (series).

P8. Underline tabs with inline counts (R2, R7, R16)

On list pages the tabs are the filter (“Upcoming · Drafts 1 · Past”). The count follows the label in the same muted weight with no badge background. A count is shown only where it is actionable (Drafts) or small, never on “Past”.
Tabs sit between the stat row and the list, aligned to the main column (not full bleed on list pages; full bleed on detail pages).

P9. Segmented control (R9, R11)

A grey track pill 44–50 tall with a white thumb, soft shadow and semibold active text.
Use: two to three mutually exclusive views of the same object (“Page content | Programme”; “Sign in | Create account”). It never replaces navigation tabs.

P10. Pills and chips

Current rule (v2.0.1, 2026-11-13): The tinted measurements below are research. Current status marks use the named tone classes and a word; success/warn/info remain solid in both themes. Accent/danger/neutral exceptions and the corrected matrix are in brand C. (1A-N22) — supersedes the line above; see docs/current-rules.md#cr-status-01.

Status pill: 20–22 tall, 8 px horizontal padding, 12 semibold, tinted fill with dark text in the same hue. Observed: Published, Going, Verified and Unused in green; Waitlist and “Running 5 min late” in yellow; Owner and “as a Member” in grey; Live in green with a 6 px dot.
Meta chips (R6, R18): grey tint, 26–28 tall, 13 regular (“Bearer auth”, “In person”, “3 sessions · 2 speakers”). The first chip may carry the brand tint (“Free”).
Choice chips (R10 “Who can join”; R20 track filter; R23 dates): 36 tall outline pills. The selected one has a 1.5 px dark border (R10) or a dark fill with white text (R20 “All tracks”).
Track tag (R18 schedule): a tinted pill aligned right in the row.

Part of Space Works UX spec, published from docs/ux-spec.md. Edit it there.