Colors

Neutral scale + one semantic color per meaning. Money and status colors are intentionally the only saturated colors in the app.

Note: --accent/--bg/--card are no longer fixed — Pro Mode → Settings → General → Appearance has a 10-theme accent picker (Terracotta, Sage, Ocean, Plum, Gold, Indigo, Brick, Teal, Slate, Rose) that re-tints these three tokens across Easy Mode, Pro Mode, and Checkout at once. Terracotta (shown above) is the default. See Pro Mode extensions ↓.

Spacing scale

8px rhythm used across padding, gaps, and margins.

Border radius

Shadows

Borders do most containment work; shadow is reserved for buttons (tactile inset) and floating surfaces (modals, popovers).

Breakpoints

Icon sizes

Primary & ghost

Icon buttons

Segmented / filter pills

Full-width button

Search input

Text, select & textarea

Toggle switch

Bottom navigation

Underline tabs

List navigation

Pro Mode's fixed sidebar (.sidebar / .nav-item) and the Pro Mode topbar live inside an isolated Shadow DOM stylesheet, so they're intentionally not duplicated here — open Pro Mode from Profile to inspect them directly.

Session card

The big elapsed-time readout is color-coded by duration, not by status: white under the "full day" threshold, amber between full-day and the maximum, red past the maximum — configurable from Pro Mode → Announcements → Session timer colors (defaults: 24h / 36h). Same rule applies whether the session is active or paused (a paused timer freezes at whatever color it already was).

Paused-too-long badge

The small "Paused · 00:00" badge (next to the status label) turns red once a session has been sitting paused for more than 2 hours, independent of the big timer's own color above.

Customer row

Identity & settings containers

Empty state

Badges & chips

Attention pill

Auto-shows on the dashboard only when something needs review, cycling one item at a time (with a "+N more" count). Categories: long-running sessions, paused >2h, lockers expiring soon, today's room bookings, active manager announcements — each independently toggleable from Pro Mode → Announcements → Attention pill visibility. Clicking the pill body opens the relevant popup and dismisses that item automatically; the ✕ dismisses without opening anything.

Cafeteria welcome screen

Vertically centered in the viewport (not pinned to the top) on both web and mobile. The workspace name is live from Pro Mode → Settings → Workspace name, not hardcoded — defaults to "Kojo" if unset.

Checkout money states

Debt/change/warning colors inside the Checkout popup (Shadow DOM) — kept saturated on purpose since color is information in a payments UI, but fully theme-aware (each has a light + dark value; a real bug where these were hardcoded to light-mode-only hex values was found and fixed).

Toast

Notification row

Modal

Popover

Start Session modal (search step)

Customer identity + tabs

Assign Plan / Assign Locker are icon-only (tooltip, no visible label) at every screen size, so Start Session always has room to stay on one line. The session-status pill only renders when this customer currently has a live session anywhere in the app; it sits under the name on mobile and floats to the right of the row on wide screens (≥561px).

Accent theme picker

10 named themes, each pairing an accent color with a hue-matched background/card/surface set (same lightness & saturation as the original, only hue shifts). Lives in Pro Mode → Settings → General → Appearance only — removed from Easy Mode's Profile card so there's one control point. Picking a theme sets --accent/--accent-rgb/--bg/--card as inline styles on three hosts at once: document.documentElement, #proModeHost, #checkoutHost.

Control panel branding upload

Replaces two plain upload rows in Settings → General with live preview + upload + guidance cards. Fully wired: uploading actually updates the real Pro Mode sidebar logo and the browser's <link rel="icon">, not just a settings thumbnail.

In-place guided wizard

One question per screen, vertically centered, slim progress bar instead of a labeled stepper. Lives as a sibling view inside the panel it belongs to (list ⇄ wizard, toggled via hidden) rather than a stacked popup — avoids the .wide-modal-overlay z-index losing to .settings-modal-overlay. First used for Settings → Branches → "＋ Add branch".

My Tasks — team kanban board

Team-wide task board under Pro Mode → Team → My Tasks. Three columns (To do / In Progress / In Review), real native drag & drop between them. Each column has two ways to create a task: the header + and a bottom + Add Task row that expands into an inline quick-add (title, then optional assignee/date/priority pickers, Enter or Save to commit). Opening a card (click anywhere on it) or "+New task" opens a full task-detail panel — status, assignees, dates, priority, time estimate, a real start/stop time tracker, tags, description, subtasks, a checklist, file attachments, and an activity feed with comments. Card progress bars are computed live from subtasks+checklist completion, not a manual field. Reuses .priority-badge for High/Medium/Low.