feat(design)!: Servizio's structure in Bottega's printed matter (v7.0.0)

[JanWelker]

Servizio's structure (#298) wearing Bottega's printed matter (#297).

The layout of one and the style of the other. This branch was cut from design/servizio-flow and Bottega's design system ported onto it deliberately, file by file, rather than merged — the two branches touch 33 of the same files and a merge would have been hand-resolved into something worse.

The split: structure, routing, view logic and composition from #298; tokens, palette, type, borders, shadows and the whole component layer from #297. Where both had restyled the same component, Bottega's treatment is re-fitted into Servizio's composition. Its two best pieces — the numbered job-ticket schedule and the deli-ticket ingredients — survive intact. Servizio's limewashed plaster and Bottega's two-column page are both gone.

This is 7.0.0. The default experience is a different app — anyone returning to a bookmark meets a question flow and a job ticket where a form and a table used to be, which is a user contract break by CLAUDE.md's definition. The major version is pinned to CURRENT_VERSION, so v=7 follows: it adds no key and no gate, both existing gates (al at v < 5, fw at v < 6) sit below it, and two tests hold that — the encoded key set is unchanged, and the same query decodes identically at v=6 and v=7. Every v=1…v=6 link still reproduces its recipe exactly.

One commit, no screenshots committed. The development history is squashed and the docs/redesign/ folder removed, so this merges as a single change with nothing but source in it.

---

What a user sees

The ask flow — 72 px of Anton on paper stock, one question per sheet. The progress marker is the tricolore being printed across the sheet, not five grey dots: the flag stretches to whatever has been answered and the remainder is hatched. The forming plan sits beside it as a ticket stub — facts on dotted leaders above a real punched perforation, with the mode seal on the counterfoil below the tear.

The plan — the bake moment set as the sign, its name reversed out of an ink band. Every editable value is a .chip-field: a blank on a printed order form, name stamped above a ruled line. Tapping one opens the adjust sheet focused on that field. Not a web link and not a button — a plan full of buttons is a form again. The schedule is a numbered job ticket where the line number is the rail node; the weights beside it are the deli ticket, dotted leaders to a punched tear-off and a double-ruled total.

The adjust sheet — the order pad. Bottom sheet under lg, right-hand drawer above it, so the ticket stays live behind it. One press to twenty numbers; this is the expert's door.

The library — three sheets on a rack, each closed with its heading as the ink band you press.

The masthead — the shop's sign as an enamel plaque over a tricolore hairline, the same flag closing the colophon. That is what holds three views together as one publication, which is why the third colour is spent there and on the progress rule and nowhere else.

What holds it together

• Three views, one mounted at a time, with the place in the URL fragment (#ask/<step>, #plan, #library) — linkable, reload-proof, back-button-correct, and no new query key, so the recipe schema is untouched and hasRecipeParams needs no exception.
• A share link or a remembered recipe goes straight to the plan, never through the questions. Pinned by test; it was the fatal failure mode of a question flow.
• Every control sits with the thing it acts on. The buttons live under the flag with the values they change; the mode and fit seals sit on the schedule's lede line, each opening what its mark means. Language, theme and step detail are choices in one menu — which is why SegmentedControl and the pill strip are deleted.
• The mode and the fit are drawn guild seals, not outlined boxes carrying ASCII stars. Captions stay outside and horizontal, because text on an arc cannot survive "Cold ferment" against "Kühlschrank-Gare".
• Type: Anton for the sign, Archivo's width axis for the condensed caps, loaded as a preload that promotes itself to a stylesheet so a slow font server can never block first paint or hydration.

What is untouched

src/lib/dough/**, the .ics builder, the TRMNL payload and /print/[[locale]]. No ingredient mass and no step time changed.

Testing

953 unit at 100 % coverage, 122 browser (from 940 / 90). No assertion was weakened and no test deleted to fit the new structure — specs were rewritten to reach the same rules through it.

Bugs found and fixed on the way, each with its own regression test:

• a question's slide-in painting 2 rem past the sheet, putting a horizontal scrollbar under every move between questions at 390 px;
• the tricolore's middle panel vanishing on the dark press — the flag's white is the stock, so a 4/5-answered rule read as 2/5;
• a dotted leader stranded as a four-dot stub beside a flour name that wrapped, because a flex item cannot sit on the last line of a sibling that wrapped;
• a seal's panel losing its position, border, fill and shadow at once because @apply reached for another @layer components class — Tailwind drops the whole declaration and the build stays green;
• an open menu painting behind the schedule card and swallowing every click, after a transform wrapper trapped its stacking context;
• a text-metrics test that raced the webfonts, passing alone and failing under parallel load.

Checks: lint, check, test:coverage, test:baseline, test:e2e, plus verify / e2e / preview / CodeQL in CI.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-09-07 15:57 UTC