twc-029 / A study by Syafril · not client work
A fictional client desk for an agency or consultant: move opportunities through four stages, read each contact’s history, keep one next step per opportunity and count the pipeline. Every person, company and agreement is a practice sample in one browser; no prices, deal values, email or real accounts.
READ THE DESIGN
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
Four numbered lanes name the conversation, not a stack of statistic cards. On a phone a labelled stage picker shows one lane at a time; nothing requires a horizontal swipe.
Drag the handle, carry it with the keyboard, or use Move to…. All three run through one domain reducer, announce the stage and position in words and keep one undo for the session.
An 88px ink rail with labelled destinations leaves the width to the lanes; on a phone four destinations move to a bottom navigation and the rest stay in the header menu and ⌘K.
#eef2f6#203b61#ccdef3#ffffff#f0ddb5WHAT IS HERE / WHAT COMES NEXT
Decide which client conversation moves next.
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, not an operational CRM. No real clients, prices, deal values, contracts, email, calendar or reminders. Local storage is not shared across devices, has no cross-tab transaction and is not encrypted; do not enter real client data.
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 directionA relationship is kept in a folder, not a dashboard. Relasi’s artifact is the client file: a contact sheet, opportunity cards with an index tab, a history spine and a follow-up slip. The opening is the pipeline itself — Introduction, Discovery, Proposal, Agreed — so the first task is deciding which conversation moves next.
Ink blue, pale blue paper and a wheat marker for the reference day. A compact 88px ink rail and folders with a stepped tab edge set it apart from the brick book index of Saku Dapur. Cards have a 14px index-tab corner and 3px elsewhere; no photo avatars, stacked statistic cards or gradients.
Figtree 600 sets the wordmark, titles, lane numbers and counts; Figtree 400 carries cards, tables, labels and reading text. Both are static Latin WOFF2 files, one weight per file, with tabular figures and no synthesized bold or italic. Commissioner 600 stays an unused recorded fallback.
Ink rail, a white header with the desk name, the fictional-study line, then the task. The pipeline opens with a ruled summary strip and four numbered lanes; from 701 to 1100px the board is two by two, and on a phone a labelled stage picker shows one lane with a four-way bottom navigation. A contact opens as a full client file with a 310px follow-up margin.
A lifted card follows the pointer without spring or tilt; a dropped card settles within 160ms and the detail drawer slides within 180ms. Both disappear under reduced motion, which is read live. No confetti, sound or shimmering skeleton.
Static bilingual App Router pages. One versioned record, collection-relasi-crm-v1, is validated with zod/mini on every read and before every write: 64 KiB before parsing, 20 contacts, 20 opportunities, 60 history entries and 20 tasks, strict objects, calendar dates and relational checks. Drag, keyboard and the Move to… form share one pure domain reducer; another tab’s change is offered, never applied silently.
Lanes are headed sections with ordered lists of cards. A card is carried from its labelled handle with Space or Enter, arrows choose stage and position, Home/End jump, Enter drops and Escape returns it; every step is announced in words. Move to… is always available as a form. Dialogs trap focus and restore it, forms focus the first invalid field, tables keep captions and sort state, and both colour modes keep text at 4.5:1 or more.
From a shop note to the work behind it.
Independent spirit. Unmistakably graphic.