Components

Primary, secondary, outline, plain, and color variants.

Text inputs with optional invalid and disabled states.

Multiline text input.

Native select wrapper, styled.

Single and grouped checkboxes with labels.

Radio groups with labels and descriptions.

Toggle switch for boolean state.

Fieldset, legend, field, label, description, error.

Searchable single-select dropdown.

Headless UI listbox-based select.

Card-styled single-select with in-place selection motion.

Pill segmented control with a sliding active pill (hairline inset stroke, canvas pill, spring). Shared by the log-hours toggles and three Console scheduling surfaces.

Email / phone account-identifier toggle.

Map + list store chooser in a modal: matte Google map, distances when located, and a use-my-location trigger.

Search-first address entry (Uber pattern): typed query → mock autocomplete suggestions + use-my-current-location + manual entry. No map (no geocoding). No product surface takes an address since pick-up came out; kept as a built control.

Purpose-optimised masked fields: card number (with live brand detection), expiry, phone, numeric.

The shared payment primitives behind checkout and the in-app payment sheet: the radio-dot indicator, the accepted-cards strip (with overflow popover), the card-on-file network mark, and the card-entry fieldset — one source so the two surfaces can’t drift.

Password field with a show/hide eye toggle.

Click-or-drag upload zone, plus the badge and button that overlay a media preview (fixed dark scrim, legible in both themes).

Drawn ("wet") signature canvas for documents that need a hand signature rather than the typed e-signature; strokes survive a resize and the ink follows the theme.

Copy-to-clipboard control with the house green-success beat (icon cross-fade + label rise); shared by the invite dialog and the referral link field.

Matte-styled Google map (with keyless fallback) plotting selectable SafeWay locations; the map half of Location Picker.

Image, initials, square or round.

Colored status badges.

Data table with striped, bleeding edge, and dense variants.

Label/value pairs.

Horizontal rule, soft or strong.

Quiet placeholder for empty tables, lists, and search results.

KPI metric card with a delta badge; StatGroup lays a row out in a responsive grid.

Animated expand/collapse (accordion).

The address/place results list — hairline rows, capped height with the overlay scroll cue; shared by the booking route picker and AddressSearch.

The generic surface shell — hairline ring + soft radius; composition-first (the base for cards/panels).

A driving-ed enrollment package for the catalog — includes, location-aware price, Enroll CTA.

Task list with per-row status (done / to-do) and actions — the setup-dashboard core.

The on-brand per-package "SEAT TIME TRAINING" medallion; the hours numeral is the only variable.

The student-home progress tracker — a cyclic deck of status-striped folders; tap a header (or swipe the front card on mobile) to flip through, the next card previewing as it rises.

The billing signature object — a plan card + payment card in a slot, with the update-payment dialog.

The Online course signature object — a bound spiral workbook: a Driver Education cover with a session-progress ring, the graded assessments (Reality Checks + Final Exam), and a foot-anchored "Continue in the classroom" launch.

The Driving-lessons signature object — a permit-style card (brand-yellow band over the state, or the student’s name on a guardian’s). One template for every viewer: two stacked zones that both FILL — an hours meter (observation + practice, 37h) over a “Your SafeWay package” punch-card that stamps as each prepaid drive is used, with the use-by date beneath. Only the label and the foot change: a TEEN sees “Practice hours” and just books; a GUARDIAN sees “Hours you log” (their responsibility — students can’t log) and gets Log hours beside Book; an ADULT (credit-based, no logged-hours requirement) drops the meter and shows just the package + book/buy. The identity fields and the old serif ring were dropped for this clearer two-zone read.

The imagery language — fanned decks of the product’s own UI fragments as die-cut stickers that deal in on entry; the stage-hero scenes and the invite header share it.

Inline, non-modal feedback banner (neutral / success / warning / critical).

Transient bottom-center confirmation receipt for a completed async action; auto-dismissed.

The quiet inline help affordance: a muted circle-i on a group / section / field label that opens a small self-contained popover with one short answer (~40 words, no “learn more”). Anchored to labels only — never page titles, values, buttons, or Notices — and held to a strict density budget (explain once, one dot per glance). The on-demand sibling to Notice. See THEME.md §16.

Small indeterminate spinner in the current text colour, for standalone busy states outside a Button.

Heading and subheading levels.

Body, code, and strong text styles.

Styled inline link.

One step of a multi-step dialog: the standard cross-dissolve plus the focus handoff a face swap needs.

In-app payment sheet for a transactional charge (outstanding balance, late-cancel fee): pay with the card on file or a different card, on the same picker as checkout. Not for purchases that need a selection step first.

The buy-drive-hours flow: single-select one of three preset packages (with a "Save X%" cue on the bigger bundles), then morph into the shared payment sheet. Paying adds the drive hours to the package. Opened app-wide via openBuyDrives().

The two pieces a surface needs when its floating cards are one Popover per trigger: OnlyOne keeps a single card open across all of them, and PopoverTrigger forwards the ref Headless anchors against.

Modal confirmation dialog.

Larger modal dialog.

Menu dropdown with sections and icons.

The scroll cue for padded, rounded surfaces — painted over the content so it costs no layout width, keeping the gutter symmetric and the panel from shifting when it becomes scrollable.

Underline tabs for in-page navigation and filtering.

Previous / next / page links.

Top navigation bar — consumed inside a layout.

Sidebar navigation — consumed inside a layout.

Animates a container’s height as its content changes, so multi-step panels morph instead of snapping.

A soft gradient fade at the bottom of a bounded, scrolling list, so the last rows dissolve into the surface below instead of ending on a hard cut. The house treatment for every capped list (location picker, booking route/times lists, AddressSearch); pairs with OverlayScrollbar.

App shell with sidebar (this page is rendered inside one).

App shell with a top navbar only.

Centered layout for login / register screens.

Split-screen (form + brand panel) for enrollment-process screens.