Design system · Lane A0

Julie Ann's Training

Every components/ui primitive, styled from the approved Oct 18 mockup. Compare side by side.

Tokens

Defined once in globals.css (@theme). Archivo 600–900 uppercase for headlines, Source Sans 3 for body.

brand#E73D2E
brand-dark#C9311F
brand-soft#FDEBE8
ink#23211D
muted#847E72
cream#FBF3E3
cream-line#EFDFBE
stone#F1EEE7
line#E3DFD4
dark#2B2924
ok#2E8B57
warn#E8960C
scale-introduced#9C958A
scale-practicing#E8960C
scale-moderate#D97C21
scale-trained#2E8B57
Archivo 900 — Badge Names
Archivo 800 — Screen titles
Source Sans 3 regular — all reading text and quiz answers. Semibold for emphasis. Italic available.

ScreenTitle + ModuleNumber

Red eyebrow, uppercase title, red rule — the manual's title treatment.

05 · Bag Check / Expo

Bag Check & Customer Handoff

Nikki · 9:12 · captions always on
0103A08C

TipCard

Cream callout with red label, from the manual's PURPOSE / TRAINER RULE boxes.

Why it matters
Bag check is the last set of eyes before an order leaves. One melted concrete or missing spoon undoes everything the line did right.
Work on next · from Nikki, Oct 16
Custard pulls — smooth wrist turn, 10 clean pulls in a row.

StatusScale

Introduced · Practicing · Moderate · Trained — grey → amber → orange → green. Tap to rate.

Stocks the station before the rush
Checks every item against the ticket before lidding
IntroducedPracticingModerateTrained

BigCheck

≥48px rows, gloved-finger friendly. Tap to toggle.

ProgressRing

Red while in progress, green ✓ complete, locked state.

✓75%40%🔒100%

BadgeTile

Earned · in progress (dashed) · locked. Chip colors are Sling placeholders until the Phase 0 test captures the real ones.

1stFirst ShiftSep 12
SCScooperIn Sling ✓
RGRegisterIn Sling ✓
EXBag Check / ExpoQuiz ✓ · Skill Check left
CUCustardAfter Module 5
CECore EmployeeFoundation + one Big Three

VideoPlayer (stub)

Portrait 3:4, CC chip, always-on caption bar. Real YouTube/Storage player lands with the screens.

CC0:00 / 9:12
Stock gloves, spoons, straws, napkins, lids and freezer bags before the rush.

StatusPill + CountBadge

The visual form of the verified rule, plus count bubbles.

PublishedDraftNot readyApprovedRejectedRetired
Approvals 2Overdue 3

FilterBar

Team Board filters — horizontal scroll, one active.

PrimaryAction

One per screen: admin top-right or full-width phone button.

Learn / Trainings

TrainingCard

Admin library card: thumbnail, pill, counts, completion.

Published05
Bag Check & Customer Handoff1 video · 4 quiz Qs · ~5 min
Completed38 of 49
Draft07
Flavor of the Day Setup1 video · 3 quiz Qs · captions in review
Not visible to crew yet
Not ready03
Menu & Front CounterNo video yet — on the section 22 shot list
Manual pages only

AdminSidebar

The Navigation menu, role-trimmed: shift leads get Home + Learn (minus Setup), managers add People, Automation is owner-only.

Active item: trainings