Relasi

01 / Foundations

Ink blue, pale paper, one wheat marker.

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.

• Pale blue paper#eef2f6
• Ink blue#203b61
• Blue label#ccdef3
• Folder sheet#ffffff
• Wheat marker#f0ddb5

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.

02 / Moving a card

One move, three ways in.

A 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 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.

1. Pointer: press the handle and move 8px (touch: hold 200ms). The card follows the pointer and a named slot shows where it lands; Escape, leaving the window or releasing outside a lane cancels.
2. Keyboard: focus “Move …”, press Space or Enter, choose a stage with ←/→ and a position with ↑/↓, Home or End; Enter drops, Escape returns the card and focus.
3. Move to…: a labelled form with stage, position and a preview, always available — on phones, while sorted or filtered, and for screen readers.

All three run one pure domain reducer. A move is one revision, announced as “stage, position n of m”, with one Undo for the session. Agreed with an open task asks whether to keep it or mark it done; nothing ever creates a contract. The drag behaviour is shared application code with no Relasi styles in it.

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.

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.

Your brand changes the name, logo, ink and label colour through the existing Customize panel; label text is measured against the brand’s own colour. The rail ground, the wheat marker and its ink, the structure and the fictional limits stay authored, in both modes and in every portal.

03 / Limits & provenance

A fictional client desk.

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.

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.

The folder, the two-sheet mark, the lanes, the history spine and the chart were made for this study from the work of a service agency, not from a reference CRM. All eight people, companies, opportunities, histories and dates are invented practice data; addresses end in example.invalid and link nowhere. Icons are Lucide, as installed in the project.

Figtree 400/600 are self-hosted static Latin WOFF2 files from Fontsource 5.3.0 under OFL 1.1, with no declared Reserved Font Name; their SHA-256 were checked against the approved proposal. Commissioner 600 remains an unused fallback. Read Figtree’s license

04 / Actual capture

The implemented pipeline.