the web
collection
EN ID

twc-012 / A study by Syafril · not client work

Roti Pagi: Roti Pagi

A bread counter for croissants, country sourdough and cinnamon buns. Compare three original drawings, read illustrative ingredients and allergen notes, then count pieces and download a pickup list.

Try the demoMake it your own
Actual desktop capture of the Roti Pagi demonstration.

At a glance

Headline type
Fraunces
Reading type
DM Sans
Try this interaction
Three original bread drawings
Cream#fff6e7
Wine#702b36
Crust#dba15d
Dough#f3e5cb
A schematic of the implemented composition.

WHAT IS HERE / WHAT COMES NEXT

Know what you are choosing.

Bread shops that need to explain their loaves and pastries before a pickup conversation.

Working in this demo

  • Three original bread drawings
  • Illustrative bread ingredients and allergen notes
  • Quantity controls and pickup TXT

This tool includes a working workspace and its own component book. Its controls operate on local state.

Production integrations to discuss

  • Real business content, verified photography, CMS and any booking or transaction service need a separately agreed production implementation.

Exports are generated in your browser. No account, cloud storage or external service is connected.

6 implemented pages in this theme

See the visual page index

A limit to plan around

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

Delivery & customization

Page scope, brand assets, content, handover, hosting, costs and support are discussed in a consultation before work begins. The demo is a reference for that conversation.

Prepare a brief for this direction

The idea

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.

Visual language

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

Typography

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.

Layout & composition

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

Motion & interaction

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.

Under the surface

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

Designed for everyone

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

Inside the experience

  • Three original bread drawings
  • Illustrative bread ingredients and allergen notes
  • Quantity controls and pickup TXT
  • Bread-counter design book with the working picker and pickup list

A good fit for

  • Bread shops that need to explain their loaves and pastries before a pickup conversation.

Across screens

Actual desktop capture of the Roti Pagi demonstration.
Actual desktop capture of the Roti Pagi demonstration.
Actual mobile capture of the Roti Pagi demonstration.
Actual mobile capture of the Roti Pagi demonstration.

A different perspective