Back to demoTHIS THEME’S OWN COMPONENT BOOKID

Roti Pagi / DESIGN & COMPONENTS

Roti Pagi
Made of its own parts.

The counter follows how bread is chosen: laminated croissant layers, a sourdough loaf to slice, a cinnamon spiral to pull apart. Names, example ingredients and quantities lead to a local pickup note, with no order sent.

01 / Palette & type

Wine ink on cream, golden crust, curved photo edges, circular dough illustrations and a quiet paper list.

Cream#fff6e7
Wine#702b36
Crust#dba15d
Dough#f3e5cb

Fraunces, a soft old-style serif with a real italic, gives headings the warmth of a bakery label; DM Sans carries ingredients, quantities and actions.

02 / Composition & behavior

A curved bakery portrait faces a serif introduction. A horizontal bread counter separates choice, original drawing and ingredients; the pickup paper follows below.

Slow bounded pastry-photo movement, spring continuity for the selected bread and a tactile add button. Basket controls stay mounted so keyboard focus survives quantity changes.

Server-visible content, labeled keyboard controls, scoped focus/portals and readable mobile flow. Motion respects reduced-motion preferences and avoids automatic loops.

03 / Controls, including the edges

A curved bakery portrait faces a serif introduction. A horizontal bread counter separates choice, original drawing and ingredients; the pickup paper follows below.

Component inventory (scroll to inspect)

  1. 01
    Three original bread drawings

    A curved bakery portrait faces a serif introduction. A horizontal bread counter separates choice, original drawing and ingredients; the pickup paper follows below.

  2. 02
    Illustrative bread ingredients and allergen notes

    Server-visible content, labeled keyboard controls, scoped focus/portals and readable mobile flow. Motion respects reduced-motion preferences and avoids automatic loops.

  3. 03
    Quantity controls and pickup TXT

    Static bilingual Next.js pages with local React state, Motion route boundaries and a real downloadable planning artifact. No account or external submission.

  4. 04
    Bread-counter design book with the working picker and pickup list

    Static bilingual Next.js pages with local React state, Motion route boundaries and a real downloadable planning artifact. No account or external submission.

  5. 05
    Select, tooltip & scroll area

    Keyboard behavior is shared; this theme owns the popup colors, border, radius, type and focus.

  6. 06
    Export & limits

    Planning only: no prices, stock, confirmed order or pickup time. Recipes are illustrative; real ingredients and allergen information need bakery verification.

04 / Form & feedback contract

A local preparation note. Try an empty submission, correct it, then export your actual input.

10–1,000 characters. Kept in this page.

Your prepared note will appear here.

At the bread counter

Name the bread before the mood: croissant layers, sourdough crust, cinnamon swirls. Each choice leads to example ingredients, a quantity and the pickup list. The photograph is a reference; the drawings describe three example breads, not today’s stock.

The pickup note

Use “pickup list” and “save”, never “order confirmed”. No opening hours, baking schedule, price or availability is implied. The working counter below uses the same copy and components as the demo.

05 / Actual working components

Activate the full workspace when you want to inspect it. Its interaction code loads on demand.