Toko Saku: Toko Saku

The idea

Ask before you pay. A small shop that sells over chat does not need a checkout; it needs a clear list to ask about. Toko Saku makes the shop’s note the interface: a pocket mark and a counter nameplate, a shelf of goods with item codes, and a narrow note with dashed rules that counts kinds and items — never money — and becomes one message. The note always says it is not sent and not a proof of payment.

Visual language

Warm note paper, petrol ink and a yellow shop label, like a counter pad and its price tags without the prices. Square corners, 1px rules and a 2px rule around the count, dashed lines between items and a serrated foot on the note. Six flat drawings made for this shop on peach, butter and sage grounds. Yellow marks the way to the note, never a control by colour alone.

Typography

Barlow Semi Condensed 700, dense like a shop’s nameplate and its labels on a narrow strip, sets the wordmark, titles, product names and the item count. DM Sans carries the note’s lines, labels, buttons and the message; counts use tabular figures.

Layout & composition

A thin demo line, the nameplate, then a page bar with the way to the note that stays at the top while scrolling. On wide screens three columns of goods sit beside a narrow note; the note page sets the editable note left and the message right. On a phone the goods take two columns and the note follows them; its page reads note → message → copy and download → link → save, with the message folded.

Motion & interaction

Almost none: a line that changed is marked briefly and the note never scrolls itself. No confetti, no counters rolling; reduced motion removes the mark’s transition.

Under the surface

Static bilingual Next.js pages; the goods and their detail pages are prerendered. The cart — IDs and quantities only — stays in this browser for seven days, size-checked and validated with Zod on every read; names always come from the catalogue. The message, its TXT and the click-to-chat link come from one pure serializer. An explicit “save as sample order” writes a bilingual, price-less snapshot to a shared browser key that a later back-office can read. No account, payment, stock or server.

Designed for everyone

Categories are pressed buttons and the search has a label and a clear button. Each quantity is three separate controls — minus, a labelled number field and plus, 44px each — and minus is disabled at one rather than removing; removing is its own named button with a one-step undo. Changes are announced by one status line near the note, without moving focus. The message preview is a native disclosure; copy says “copied” only after the browser confirms.

Inside the experience

• Shelf of six illustrated goods with categories and search
• Separate minus, number and plus controls; 1–99 per item, up to 12 lines
• A note that counts kinds and items, never money, and is never “sent”
• One message: preview, copy, TXT and a sample WhatsApp link
• Sample orders saved for a later back-office
• Own component and state book; local brand personalization

A good fit for

• Small shops and home businesses that introduce their goods in a simple catalogue and agree on price and delivery in a chat — before any online checkout exists.