Signals preserved
- Kitchen operations, not a generic productivity app.
- Inventory, prep, ordering as the core loop.
- Speed under pressure as the value wedge.
Existing-site audit first
Run prep from the walk-in, not a spreadsheet.
This local clone turns the generic kitchen SaaS demo into a field-ready operations page with tokens, states, forms, charts, and recovery paths.
Ready for station check.
01 / audit
What the old page meant, before it drifted.
The source HTML had useful product intent: kitchen inventory, prep, and ordering. The drift was the default SaaS costume: centered gradient hero, emoji cards, vague trust claims, and no real journeys.
Drift removed
- Template gradient and pill-shaped CTA.
- Emoji feature cards with abstract benefits.
- Copy that could fit any B2B landing page.
Inferred system
Editorial kitchen field guide: warm paper, ledger rules, serif display, tabular numbers, grounded verbs, compact controls, and clear recovery states.
02 / system
Foundations made explicit.
OKLCH semantic tokens
A warm paper scale, one ingredient accent, and separate status colors.
paper
ink
accent
good
bad
Typography with a job
Serif headlines carry the field-guide voice; body text stays plain and readable at a 68ch maximum with fluid steps and no viewport-width font math.
Responsive layout
The page uses intrinsic grids, `minmax(0,1fr)`, wrapping nav, and mobile single-column flow. No fixed-width panels are allowed to overflow the viewport.
Motion with restraint
Hover lifts are short and functional. The prep meter animates once, then respects reduced-motion preferences.
03 / operator journeys
Real paths, not decorative modules.
Station check form
Prep list states
Loading, empty, error, and recovered states keep the same footprint so the layout does not jump.
Cold lineCheck herbs and pickled onions.10:30
GrillConfirm ribeye count before supplier cutoff.11:00
Waste trend with table fallback
| Week | Waste |
|---|---|
| 1 | 14% |
| 2 | 13% |
| 3 | 11% |
| 4 | 11.5% |
| 5 | 9.5% |
| 6 | 8.7% |
| 7 | 8% |
Copy made specific
This product helps kitchens do everything faster.
Count cold prep before the supplier cutoff. Send one order with substitutions already named.
04 / proof
Every skill has a live surface.
The map below is intentionally redundant: the static verifier checks it, and the browser test walks the controls and state changes.
Accessibility gate
Skip link, landmarks, one h1, named controls, visible focus, live regions, semantic buttons, table fallback, and reduced-motion support are present before shipping.
deslop-uiRemoved generic generated-site tells.
component-statesDefault, loading, success, focus, disabled.
form-uxLabels, hints, inline errors, live result.
empty-statesEmpty, error, retry, recovered list.
themingLight, dark, high contrast.
micro-motionHover lift plus reduced-motion guard.
responsive-layoutDesktop grid and mobile single column.
color-systemSemantic OKLCH token ramp.
web-typographyType scale, measure, rhythm, wrapping.
data-vizDirect labels and table fallback.
cognitive-a11yTL;DR, one idea per line, stable states.
humanize-copyConcrete kitchen verbs replace generic prose.
design-system-interviewCommitted direction and tokens.
improve-existing-websiteAudit signal, drift, inferred system.
a11y-passManual and runnable accessibility gates.