twc-030 / A study by Syafril · not client work
A one-page business card for a fictional alterations stall, Permak Jarum Tiga: tilt the card, flip it to a QR code of this page, save the contact as a vCard, follow its links and see whether it is open now. Every number and address is a labelled sample; there are no prices, reviews or followers.
READ THE DESIGN
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
A printed card’s 1.75:1 face with a stitched edge carries the name, the trade and three contact lines — not an imitation social profile. A visitor’s name and logo replace the sample’s; the contact lines stay labelled samples.
Flip card turns it to a QR code made in the browser from the page address, with the address in text beside it. The card leans toward a pointer or finger and stays flat under reduced motion.
Each framed row names its destination or says it is not linked; the price list is left empty rather than invented. The hours table says in words whether the stall is open now, from Jakarta time.
#f3eee7#3b1d3f#9e2f65#e6d6e0#fffdf9#6b5a6dWHAT IS HERE / WHAT COMES NEXT
One page to hand over, instead of a card.
This tool includes a working workspace and its own component book. Its controls operate on local state.
Exports are generated in your browser. No account, cloud storage or external service is connected.
Fictional design study. Permak Jarum Tiga does not exist: its WhatsApp number is from a range reserved for drama, its email domain is reserved for examples, it has no address, prices, reviews or followers, and the vCard says it is a fictional sample.
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 directionHand over a card. A small trade is often met through a printed business card passed across the counter; Sapa makes that card the page. Its front carries the name, the trade and three contact lines inside a stitched edge; its back is a QR code of the page itself. Under it sit the trade’s own links and a table of hours that says whether the stall is open now — not an imitation social profile.
Plum ink and a mulberry thread on warm card stock: the card face is a shade lighter than the page, with a 1.75:1 printed-card ratio, a dashed stitch inside its edge and a needle-and-thread mark. Links are framed rows, the hours a ruled table; mulberry marks the main action, the stitch and today.
Hanken Grotesk 700, a compact neutral grotesque like the lettering of a printed card, sets the name, the section titles and the sign, so any visitor’s name still reads. DM Sans carries contact lines, links, hours and buttons with tabular figures. Schibsted Grotesk 700 stays an unused recorded fallback.
One page. On wide screens the card and its two actions sit left, the links and the hours right. On a phone it reads card → actions → links → hours, with nothing to swipe sideways. Without JavaScript both sides of the card follow each other, the back as the page address in text.
The card leans toward the pointer or a finger (at most 8°) and settles back when released; Flip card turns it once to the QR side. The thread of the mark is sewn once as the page loads. With reduced motion the card stays flat, flips without turning and the mark appears whole.
A static bilingual Next.js page. The QR code is encoded in the browser by the theme’s own encoder (byte mode, level M, versions 1–10) from the page address and drawn as SVG in the card’s ink; the vCard 3.0 file is assembled locally. Opening hours are computed from Jakarta time with Intl. No storage beyond the visitor’s brand, no server.
Flip card is a toggle button with aria-pressed; both sides stay in the reading order. The QR has a text alternative and the address beside it, so nothing depends on scanning. Links say where they go or that they are not linked; the open-now line is a polite status; today’s row is named in words, not colour.
Pick the goods, ask in one note.
Choose a lane, keep the ticket.