Patterns: auth, public pages and kiosk

P22. Auth split screen (R11)

┌──────────────── 640 ────────────────┬──────────── 604 (16 inset) ────────────┐
│ [S] Space Works                      │  Free events.                           │
│                                      │  Your community's                       │
│        Welcome back.        (44 bold)│  data stays yours.        (40 bold)     │
│        [ Sign in | Create account ]  │                                         │
│        ( G  Continue with Google )   │        ╭ OCT 14 Demo Summit ╮ (rot −3°) │
│        ───── or with email ─────     │             ╭ OCT 20 Weekly call ╮ (+2°)│
│        Email                         │      (✓ Meera checked in)               │
│        [                        ]    │                                         │
│        Password            Forgot?   │                                         │
│        [                     👁 ]    │                                         │
│        [■■■■■■ Sign in ■■■■■■■]      │                                         │
│        By continuing you agree to…   │                                         │
└──────────────────────────────────────┴─────────────────────────────────────────┘

Form column 400 wide, starting at x=122 and vertically centred. Headline with a full stop.
Order is fixed: mode switch, then social, then “or with email” divider, then fields, then primary, then legal.
The “Forgot?” link sits on the password label row, right-aligned. There is a show-password eye inside the field.
The brand panel is a rounded (28) tinted panel inset 16 from the edges. It shows real product objects (date-chip cards, a check-in toast), slightly rotated with soft shadows. This is product proof, not stock art.

P23. Centred task card (R12–R15)

440 wide (480 for invites), radius 20, 32 px padding, 1 px border, on the off-white canvas with the logo top-left.
Anatomy: a 52 px tinted icon tile (lock, envelope) or an avatar pair, a 32 bold title, 15–16 muted body that names the identity in bold (“Confirming priya@example.test activates…”, “For priya@example.test. You’ll be signed out on other devices.”), a full-width primary, then a single underlined escape link (“Back to sign in”, “Not you? Use another account”).
Invite variant: org tile 64 overlapping the user circle 52, a muted “You’ve been invited to join”, the org name at 30 bold centred, a role pill (“as a Member”), one sentence on what that means and its constraints (“This invite link works once.”), the primary “Accept invite”, and a footer “Signed in as x · Switch account”.
Event-scoped invite: a coloured 110 px banner on top, left-aligned content, and the scope explanation in a grey inset box (“You’ll get the permissions the organiser chose for you on this event only.”).
Password strength: a 4-segment meter (4 px bars, 4 px gaps) plus a live rule list (“✓ At least 12 characters” in green).

P24. Account tabs (R16, R17)

Title plus subtitle, then a 2-tab underline bar (Profile / Security) at content width, then settings rows.
Security leads with a panel callout when a protection is off. Sessions use a destructive outline (“Sign out everywhere”).

P25. Public event page (R18, R19, R23)

[SD] Screenshot Demo Collective                     Discover events  ( Sign in )   48h header
──────────────────────────────────────────────────────────────────────────────────
┌──────────────────── cover 1110×316 r16 ───────────────────────┐
└───────────────────────────────────────────────────────────────┘
(Free)(In person)(3 sessions · 2 speakers)            ┌ Join this event ──────────┐ 318w
Demo Summit 2026              (~70 bold, brand ink)   │ 5 going      115 spots left│ sticky
Build the tools your community needs.  (20)           │ ▬──────────────────────── │
┌OCT┐ Wednesday, 14 October   [⌖] Bangalore Intl Ctr  │ (MN)(DP)(SK) Meera, Dev +3 │
│14 │ 9:30 AM – 5:30 PM IST       Domlur, Bengaluru   │ [■ Register — it's free ■] │
About  Schedule  Speakers  Venue  FAQ  (anchor tabs)  │ (Add to calendar)( Share ) │
━━━━━─────────────────────────────────────────        └───────────────────────────┘
body 17/1.6, max 600                                  ┌ Hosted by  [SD] Screenshot…→┐
[18 talks][Hands-on workshops][Free lunch]  3 highlight tiles, first brand-tinted
Schedule ............................ Live schedule →
9:30 AM  Opening keynote: tools that outlast…            (Main stage)
60 min   Asha Menon
Speakers (2-col cards) · Partners (2-col) · Venue (map | text, Get directions ↗) · FAQ (disclosure)
──────────────────────────────────────────────────────────────────────────────────
[S] Powered by Space Works                                Privacy · Terms

Container 1110 with 84 px gutters at 1280. Main column 545 and sticky card 318, gap 66.
Tenant theming (R19) recolours only the title, the chip tint, the date-chip band, the register button and the highlight tile. Everything else stays neutral, and the cover image is optional.
The sticky card carries the only primary on the page, and it changes with state: the price is folded into the label (“Register — it’s free”); a waitlist would read “Join waitlist”. Social proof (avatars plus “Meera, Dev and 3 others”) sits above the button; the capacity bar sits under the counts.
Inline-form variant (R23): the registration fields live inside the sticky card (“Join on 20 October”; name, email, helper “We’ll send your ticket and the call link here.”, register; “Have an account? Sign in to register faster”). A date-pill picker sits in the main column.
Secondary pages (R20–R22) move the primary into the header (“Register — free” pill) because there is no sticky card. They use a breadcrumb “Demo Summit 2026 / Programme”.

P26. Live and status pages (R24) and feedback (R25)

Running order: a “● Live · updates automatically” green pill in the header. A NOW card in solid brand fill (white text, title 36 bold, “6:30 – 6:40 PM · 4 min left”, white progress bar). A NEXT card in white with a yellow delay pill (“Running 5 min late”) and the old time struck through (“~~6:40~~ 6:45 – 7:10 PM”). A LATER eyebrow list. A footnote on freshness (“Changes from the organisers show up here within a few seconds.”).
Feedback: a 590 centred column. A context eyebrow in the brand colour (“Demo Summit 2026 · Wed 14 Oct”), the question as title (“How was it?”), and a reason with its payoff (“Two minutes of feedback… You’ll get your certificate right after.”). Rating tiles are 5 × 100×92 bordered cards with a number and a word (Poor, Meh, Okay, Good, Loved it); the selected tile gets a brand border and tint. Optional fields are marked “Optional”. A prefilled email carries a privacy helper. The full-width brand primary names both outcomes (“Send feedback & get certificate”).

P27. Mobile ticket (R26, 390 px)

“← Event page” sits beside a “✓ Confirmed” green pill. Title “You’re in, Meera!” at 32 bold.
Ticket card: a brand header band (org name small, event at 24 bold), a 2-column grid of caps labels (11) with bold values (14), a perforation (dashed line with half-circle notches), a 170 px QR, and the caption “Show this at the door. It only holds a private ticket link.” (privacy reassurance).
Two half-width buttons (primary “Add to calendar”, outline “Save ticket”) and an underlined destructive escape (“Can’t make it? Cancel registration”).

P28. Kiosk PIN (R27)

Two columns on a 1180 canvas. Left: org tile 64, a context line (“Demo Summit 2026 · Door check-in”), the title at 52 bold (“Enter the station PIN”), the helper (“Ask an organiser for the 8-digit PIN. It unlocks check-in on this device only.”), and 8 digit boxes (46×62, radius 8; filled boxes show a dot; the focused box has a 2 px dark border).
Right: a 3×4 keypad of 112×76 keys (radius 14, 12 gaps, digits 26 bold), with “Clear” and “⌫” on grey keys, and a full-width CTA “Open check-in” (58 tall) that stays disabled grey until all 8 digits are in.

P29. Kiosk station (R28)

A 100 px header: event name (22 bold), “Door check-in · Station 1”, and on the right a big count “3 / 5 checked in”, a “● Online” pill and an outline “Lock station”.
Left: the camera (dark, radius 24, about 590×614, white corner brackets, caption “Hold the ticket QR inside the frame”) with a search pill and a “Find” primary underneath.
Right: a full-bleed result card (solid green on success: 84 px check circle, “Checked in”, name at 52 bold, “email · just now”), with “Next guest” (white pill) and “Undo” (white outline). Below it a “RECENT” list (✓ name, relative time). The result is the screen; there is no modal.

P30. Undo and confirmation behaviour (R8, R28)

Inline Undo appears in the “Recent check-ins” rows and on the station result card. The reference boards show no toast and no “Are you sure?” for check-ins. Reversible high-frequency actions use do it now, offer Undo in place.
Irreversible actions use a danger card plus a “…” button that leads to a confirmation.
Toasts do not appear on any reference board. The closest artefact is the floating “✓ Meera checked in” chip on the auth hero, which is a reasonable visual model. SpaceWorks already has components/ui/toastStore.ts with an awaited undo compensation, used by inventory archive. Spec: toast = bottom-centre (mobile) or bottom-left of the main area (desktop), one line plus an optional “Undo”, success auto-dismisses after 8 s, errors persist. It is used only for confirmations of off-screen effects and reversible actions whose row leaves the current view (archive). Effects that stay visible confirm in place.

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