Patterns: buttons, cards, tables and forms

P11. Buttons

Current rule (v2.0.1, 2026-11-13): The near-black fully round reference buttons below are historical visual examples. Product buttons use a 10 px control radius and semantic action tokens, Outfit 600 labels and the explicit opaque disabled state; round status tags remain round. Use brand B/E for canonical roles. (1A-N23) — supersedes the line above; see docs/current-rules.md#cr-radius-01.

• Primary: filled near-black pill, white 15 semibold, 44 tall in headers and 50–52 full width in auth. One per view region.
• Secondary: a white outline pill with a 1 px border and the same height.
• Tertiary: an underlined text link (13–15 semibold), used for “Forgot?”, “Back to sign in”, “Switch account”, “Undo”, “All guests →”.
• Destructive: red text (“Revoke”, “Turn off station”) for low-stakes reversible actions; a red outline pill with a trailing “…” (“Delete organisation…”, “Delete series…”, “Sign out everywhere”) for actions that open a confirmation. Destructive is never filled.
• Callout button: a filled dark-brown pill inside a yellow callout.
• Disabled: a grey fill with grey text (R27 “Open check-in”), not reduced opacity.
• Paired form footer: “Discard” (outline) and “Save changes” (primary), right-aligned at the end of the form. On a create form the pair is “Create organisation” (primary, left) and “Cancel” (plain text, right of it).

P12. Recent-activity rail (R1, R2)

• A right column 260 wide with a 28 px gap from the main column (main is 622). Heading “Recent activity” at 20 bold.
• Item: a 32 px pastel initials circle, 12 px gap, then a sentence at 14 with the actor’s name in bold and the target after “ · “ (“Kiran Reddy joined the waitlist · Demo Summit”), with the relative time at 14 muted on the next line. 77 px pitch. No dividers.
• Footer link: “See all activity →”, underlined 14 semibold.
• The rail sits beside the list, not above it, and starts level with the tab bar (R2) or the first section heading (R1). It drops entirely on narrow screens (inferred).

P13. Key–value “At a glance” card (R7)

• A bordered card 280 wide with 42 px rows split by hairlines. Label at 14 muted on the left, value at 14 ink right-aligned. Below it, the CTA card (P5.3).

P14. Tables inside a card (R4, R8, R10)

• One bordered card radius 12. Header row 40 tall with labels at 13 muted, sentence case, no uppercase. Body rows 64 tall with hairlines.
• Person cell: a 36 px initials circle, name at 15 semibold plus “(you)” muted, and email at 14 muted below.
• The last column is a row menu (“—”/“⋯”) or an inline text action (“Undo”, underlined). The agenda table (R10) puts the status pill right-aligned.

P15. Settings rows (R5, R16, R17)

Logo                               [SD]  ( Upload logo )
Square works best. JPEG, PNG or…
───────────────────────────────────────────────────────────────── hairline
Name & description                 Name
Shown at the top of your public    [ Screenshot Demo Collective          ]
page.                              Description
                                   [ A demo organisation used to…        ]
───────────────────────────────────────────────────────────────── hairline
Web address                        [ space-works.tech/  shots-org   Copy ]  (read-only: grey fill)
Set when the organisation was created.
─────────────────────────────────────────────────────────────────
                                              ( Discard ) [■ Save changes ]
┌───────────────────────────────────────────────────────────────────────────┐
│ Delete organisation                                 ( Delete organisation… )│ red border
│ Permanently removes every event, registration and membership. This can't  │
│ be undone.                                                                 │
└───────────────────────────────────────────────────────────────────────────┘

• Columns: left 290–310 (label at 16 semibold and a helper at 14 muted that explains the effect), right is the remaining width. 24 px vertical padding per row, hairlines between rows.
• Read-only values use a grey-filled field with an inline action (“Copy”) or a status pill (“Verified”). A lock-style icon marks one that cannot be edited, and the helper says why (“Changing email is coming in a future update.”).
• Footer: one Discard/Save pair for the whole page. The account page puts a meta fact on the left of the save row (“Member since 13 October 2026”).
• Independent action rows (R17 password) carry their own button inside the right column (“Update password”), because they are not part of the page save.

P16. Danger zone (R5, R10)

• Always last, 40 px below the save row. A card with a 1 px pale-red border, radius 14 and 20 px padding. Title at 16 semibold red (“Delete organisation”), one sentence of consequence at 14 ink, and a red outline pill with “…” on the right. One danger card per irreversible action.

P17. Empty states (R4, R6, R3 preview)

• A dashed-border card (1 px dashed, radius 12, 20–24 px padding) with one centred sentence at 15 muted. No illustration and no heading. The sentence states the situation and the next step by pointing at a control already on screen: “It’s just you so far. Copy the invite link above to bring in your team.” / “No clients yet. The secret key appears once, right after you create one.” / “Your events will appear here”.
• The same dashed treatment marks “+ Add session” and “+ New organisation” placeholders. The “add” affordance sits where the next item will appear.

P18. Create form with live preview (R3)

• Form column 636 wide and preview column 300, gap 32. The preview is labelled with an eyebrow (“PUBLIC PAGE PREVIEW”) and updates as you type.
• Prefixed URL input: a grey static prefix segment (“space-works.tech/”) joined to an editable segment, with an inline availability check underneath (“✓ Available” at 13 green).
• Optional fields are marked inline (“Logo Optional”, “Optional · shown on your public page”). Required fields carry no asterisk.
• Dropzone: dashed card with a 56 px icon tile, “Drop an image here, or choose a file” and the constraints line “Square, JPEG, PNG or WebP, up to 5 MB”.

P19. Form card with checkbox cards and developer reference (R6)

• A “New API client” form inside a bordered card with 3-column inputs.
• Checkbox cards: a 3-up grid, each a bordered card with a checkbox, a 15 semibold label and a monospace scope underneath. The selected card gets a 1.5 px dark border.
• Code block: dark fill, radius 12, monospace 13, with a “Copy” button inside on the right. Beneath it, meta chips.
• Accordion rows: a disclosure triangle, the label and a monospace hint, at 52 tall with hairlines. This is progressive disclosure for reference material.

P20. Session/track board (R9)

• Track columns are tinted panels (off-white fill, radius 16, 16 px padding) with a header (“Main stage” plus “2 sessions” right-aligned and muted).
• Session cards inside: time at 13 semibold, title at 16 semibold, people at 14 muted, and a “⋯” menu. A hairline footer row holds an inline control (“Running late? [ − On time + ]”) as a stepper pill.
• The dashed “+ Add session” sits at the end of each column. Track chips at the top carry a drag handle and an edit pencil, plus “+ Add track”. A right-aligned muted hint explains the rule (“Delays only move later sessions in the same track.”).

P21. Check-in workspace (R8)

• Top: a progress stat (2 cols) plus the “Not ready for offline yet” callout (2 cols).
• Left (446): the camera block (dark, radius 16, 240 tall, centred “Camera is off”) with a full-width primary “Start scanning” (46) underneath. The camera does not start until asked.
• Right: “Find a guest” with a pill input, an outline “Find” button and a helper (“You can also paste a ticket link.”). Below it, a settings card of toggle rows (label, helper, switch).
• “Recent check-ins” table: name and email, “10:57 PM · QR” (the method is recorded), and an inline “Undo”. “Export CSV” outline is right-aligned on the section heading.
• “Door station for volunteers” card: QR thumbnail 112, title, explanation of scope (“they can only check people in — no guest lists or exports”), then the buttons “Copy link” (primary), “Show PIN”, “New PIN” and “Turn off station” (red text).

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