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 — already built, refine don't reinvent

Extracted from the live codebase. 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) — confirm it.

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.

Full tokens.css (light + dark, every semantic token) is in the handoff packet.

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.