Design · Handoff guidance

What we need from design.

We already own function (the working prototype + the user-flow board) and the design tokens (extracted from the live code). What we need from the designer is the presentation / UX layer — how it looks, lays out, flows, and adapts.

Function

What each screen contains and does.

Done

Tokens

Color, type, spacing, dark mode.

Done

Designer

Presentation / UX

Layout, hierarchy, wizards, responsive behavior.

The deliverable

Functional spec = the prototype (safeway-drivecenter.vercel.app, compare /v1 + /v2) + the User Flows board. Designer owns visual/UX + Safeway sign-off; we own architecture + implementation. Handoff = approved screens + a short spec each — no code, no repo access.

★ North star

Make the UI so a toddler could use it.

The owner's standing directive. The lens for every screen and control — foolproof, controls-first, impossible to get wrong:

One obvious action per screen — a single clear primary; everything else quieter.
Prevent mistakes, don't report them — disable or hide invalid options instead of erroring (don't offer a slot the scheduler would reject; keep the button disabled until valid; hide actions a role can't take).
Big, obvious controls — ≥44px targets, real labels, no mystery-meat icons.
Plain language — "Schedule a drive," not "Create booking record."
Progressive disclosure — show only what's needed now; the rest behind a step or a "more."
Forgiving — confirm anything destructive, always a way back, no dead ends.
Wizards over dense forms — one decision at a time, impossible to get lost.

"Done" = a non-technical stakeholder finishes the flow on the first try, with no help.

What we need — the presentation layer

In priority of what's undecided. UI-controls best practices throughout.

Wizards / multi-step flows

Most of this product is wizards (enroll, schedule a drive, generate a cert, road-test forms). For each: the step breakdown, a progress/stepper, per-step content, validation + error placement, Back / Next / Confirm, and the success state.

Responsive — "what changes on mobile"

For every screen and wizard, the explicit desktop 1440 → mobile 390 transform: nav → drawer, data tables → stacked cards (the ops dashboards matter most), wizard → full-screen steps with a sticky footer. Not just a reflow.

Layout, hierarchy & density

The shell per role (top-nav vs. sidebar), what's primary on each screen, and compact vs. comfortable density — compact for the data-heavy operator/corporate dashboards, comfortable for student/parent.

States

Empty / loading / error / success — designed for every screen, not implied.

Hard constraint: design within Catalyst

We build on Tailwind + the Catalyst UI kit — a fixed set of production components (button, input, fieldset, table, dialog, dropdown, navbar, sidebar, badge…). Reskin and compose from Catalyst's parts; don't invent new component patterns. If a screen genuinely needs something Catalyst lacks, build it but flag it explicitly. Reference: catalyst.tailwindui.com. Type = Inter; icons = Heroicons.

Tokens — your starting seed (yours to change)

Extracted from the live codebase so you're not on a blank page — but these are the designer's layer to own and change. Every token is a light + dark pair (dark mode is in scope, client asked). The primary action color is already ink (passes AA in both modes), so the yellow stays an accent.

Brand

#FFCB05 *

Action / ink

#111111

Canvas

#FFFFFF

Surface-soft

#F7F7F7

Muted

#525252

Success

#15803D

Warning

#B45309

Danger

#DC2626

Info

#0369A1

* Resolve the brand yellow first. The Catalyst app currently uses #ffed00; the homepage uses #FFCB05 (the real safewaydriving.com yellow). Pick one canonical value — we recommend #FFCB05. Either way, neither yellow can carry text/buttons on white — which is exactly why the action color is ink, and stays ink.

These are yours to change. We only ask you keep styling tokenized (centralized, not hardcoded per screen) and build screens from Catalyst's components — that's what lets our side map your work 1:1 into production. ↓ Download tokens.css · light + dark, every semantic token.

Delivery format (no Figma) & sequence

Per screen, a handoff packet generated with the designer's Claude (reference/approval artifacts, not production): screenshots at desktop 1440 + mobile 390, light + dark; a spec.md (route, layout shell, the wizard step-flow, the desktop→mobile transform, Catalyst component per region, states, real copy, anything non-Catalyst flagged); and the reference markup labeled REFERENCE — NOT PRODUCTION. Plus one global tokens.css.

1 · Confirm tokens — resolve the brand yellow; every token light + dark. (Fast — mostly done.)
2 · Entry flow — signup → sign-in, with empty/loading/error states.
3 · Portals, one role at a time — Corporate → Franchise → Operator → Instructor → Student → Parent.

First milestone: tokens confirmed + the signup/sign-in flow (presentation + responsive + states). The marketing homepage is a separate Safeway scope call — the brand foundations come regardless.

Ready-to-paste prompt for the designer's Claude

You are designing the presentation/UX layer for SafeWay DriveCenter, a driver-training
operations platform. The function is already defined by a working prototype — your job is how it
looks, lays out, flows, and adapts. Mockups are for approval + a build spec, NOT the production app.

Overriding principle — "a toddler could use it": every screen so simple a non-technical person
finishes it first-try with no help. Foolproof, controls-first — one obvious primary action per
screen; prevent mistakes by disabling/hiding invalid options instead of erroring; big controls
(>=44px); plain language; progressive disclosure; wizards over dense forms.

Design within the stack: Tailwind v4 + the Catalyst UI kit (compose from its components;
don't invent patterns — flag anything net-new). Inter type, Heroicons. Use the provided tokens.css
(light + dark defined; action color is ink — keep it; resolve the brand yellow to the value given).
Light and dark are both in scope.

Lead with UX: design multi-step tasks as wizards (steps, stepper, validation, Back/Next/confirm,
success). For every screen + wizard show the desktop 1440 -> mobile 390 transform (nav->drawer,
tables->cards, full-screen steps), not just a reflow. Specify density (compact for ops dashboards).

For each screen produce: (1) a clean Catalyst mockup; (2) screenshots desktop 1440 + mobile 390,
light + dark; (3) a spec.md (route, layout shell, wizard step-flow, desktop->mobile transform,
Catalyst component per region, states, real copy, non-Catalyst flagged); (4) the reference markup,
labeled REFERENCE - NOT PRODUCTION. Plus one global tokens.css. Confirm the screen list and the
canonical brand-yellow before starting.