SafeWay

Design system

Every component, token and rule behind the student portal and the Console, shown exactly as they should be built.

ComponentsAll 92, each with live examples, the file it lives in, and every page that uses it.
PrimitivesColor, type, spacing, radius and motion: the tokens every component is drawn with.

Principles

Seven rules every screen is judged against.

  1. 01Make the gate legibleEvery step says what unlocks next and why. Never a dead end.
  2. 02Three surfaces, not sevenSeven roles, three products, one foundation.
  3. 03Celebrate the milestonesA long, regulated journey; passing should feel like it.
  4. 04Trust through transparencyWho did what, and when, on every record.
  5. 05Built for the fieldIn the car: big targets, glanceable state, few taps.
  6. 06Operators move fastDense, scannable, keyboard first. Never a wizard.
  7. 07Let them taste it firstThe locked experience sells the value, not the gate.

Products

Three surfaces on one foundation.

  • Student portalStudents and guardians, from enrollment to the road test.Uses 65 components
  • ConsoleCorporate, franchise owners and operators, running the business daily.Uses 81 components
  • Instructor appIn the car, on a tablet or a phone.Not started

Recently decided

The latest rows of the decision log.

All decisions
  • Nov 5An adult on a teen package needs no guardian: the Overview shows their emergency contact, with Add guardian beside it.
  • Nov 4A package chosen for a student who pays later is held seven days; Change package takes an adjustment; Billing charges the Catalog's fees on the fly.
  • Nov 4A move inside a franchise keeps the certificate's number; a move to another franchise transfers it.
  • Nov 4A student's legal name is held in four parts: first, middle initial, last and suffix.
  • Nov 4An offer paid for at checkout reaches the student portal, and Payment history names it under the enrollment.