twc-025 / A study by Syafril · not client work
A fictional small practice whose site is its queue counter: three sample lanes, one sample session with three slots, and a torn ticket with a large number to save as text or print. Every number is a fixed sample; nothing is booked or sent.
READ THE DESIGN
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
The opening is the counter form, not a welcome: the h1 names the task, the step marks say what is done, and the fictional line sits once under the nameplate. On a phone the form and its button come before anything else.
Services and slots are native radios in labelled groups. A choice shows a filled radio, a side rule and its lane letter; the slot group waits for a service and says so. An incomplete choice is named beside its group and takes the focus.
Beside the form the draft shows the lane letter and a dash until it is made; a made ticket shows its lane’s fixed sample number. The stub always says it is fictional and holds no personal data, and a brand cannot remove that line. On a phone a short summary stands in until the ticket page.
#eaf1ee#193a3a#bfe0cf#f8faf6#f3c5a9WHAT IS HERE / WHAT COMES NEXT
Show the queue before building the queue.
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. Gilir has no location, staff, schedule, quota or waiting times; every lane, slot and number is a fixed sample, nothing is booked or sent, and the ticket is valid for no visit.
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 directionTake a number. At a small practice the first thing in a visitor’s hand is a ticket from the counter; Gilir makes that ticket the interface. A notched g plate names the counter, the opening is the counter form itself — a service lane and a sample slot as plain radios — and the result is one torn ticket: a large lane number, three label–value lines and a stub that always says it is a fictional sample. No portraits, slogans, ratings or promises about waiting.
Enamel mint, deep green ink and bone paper, like a counter plate and the ticket in your hand; apricot only marks a choice that changed after the ticket was made, always with words. 1px ruled lines, square corners, a dashed tear with two punched notches. A choice shows a filled radio, a side rule and its lane letter — never colour alone.
Atkinson Hyperlegible Next 600, drawn to keep letters and figures apart, sets the wordmark, titles, lane letters and the ticket number, where A-014 must read at a glance (its zero is slashed). DM Sans carries labels, radios and notes.
Nameplate and three page links over one rule, then the one line that says the demo is fictional. On wide screens the form sits left with the draft ticket on the right; the ticket page widens the ticket. Below 700px the links take their own row, the form reads service → slot → summary → button, and the full ticket appears once it is made, after its title and actions.
No animation: choices, the number and the notices change instantly, with no rolling digits and no call sound; nothing moves on its own.
Static bilingual Next.js pages. One draft — the selection and at most one ticket, as IDs — stays in this browser under its own key, size-checked (2 KiB) and validated with Zod on every read; numbers and labels come from fixtures, never from storage. TXT and the browser’s print are made locally. No account, booking, queue system or server.
Services and slots are native radios in fieldsets with legends (Tab, Space, arrows); the slot group waits for a service and says so. An incomplete choice is named next to its group, linked with aria-describedby, and focus moves there. Step marks pair a tick or a number with words and aria-current; page links use aria-current. A new ticket is announced and its title takes focus; clearing asks first.
A good pause, in your own way.