Tend — v1 · The UI Lab

Purpose

A fresh take on a mobile-only CRM that reframes every contact as an unread message and the whole app as an inbox you triage to zero. It explores whether “relational debt” ranking, swipe-to-triage, and a diff-confirm micro-beat can make relationship upkeep feel like clearing email — all in pure CSS, sized for one-handed mobile.

Prompt

This experiment’s prompt was generated dynamically this session by a multi-agent judge-panel workflow (4 mobile-CRM concepts → scored → winner “Tend”). The verbatim build prompt given to the Builder:

Build a mobile-only CRM experiment called **Tend** — a "relationship inbox." This is the experiment content that lives INSIDE the `.window` element (device preview defaults to mobile, 375px). Pure HTML/CSS, NO JavaScript, no external dependencies beyond Google Fonts, fully self-contained, must render standalone. Do NOT touch the experiment sidebar — only build the content. Every interaction must be achievable with CSS-only patterns: radio/checkbox inputs, `:checked`, `:target`, sibling/`peer` selectors, `<details>`, `scroll-snap`, and transforms.

=== CONCEPT & METAPHOR ===
The core reframe: a contact is not a row in a database — it is an UNREAD MESSAGE. A relationship goes "unread" when it needs you (deal gone quiet, a promise owed, a follow-up due, a renewal looming). Home is a single descending feed of person-cards ranked by "relational debt" (days-since-last-touch × how much they matter). There is no list view, no table, no kanban. You don't manage records — you clear a feed of humans. Triage to zero = "relationship inbox zero." Reinforce the email metaphor throughout: an unread COUNT in the header IS the to-do list ("6 people need you"), section headers are temporal moods, and clearing the feed earns a genuine empty-state celebration. The whole concept must be honestly told on this ONE home screen.

=== 375px SCREEN LAYOUT (windshield / cockpit discipline) ===
Apply Thumbprint's thumb-zone discipline: the TOP ~60% is read-only "windshield" context (header + the scrolling feed of cards). The BOTTOM ~40% is the "cockpit" — all triage verbs and the context-aware compose bar live here, thumb-reachable, never a stretch. Concretely, top to bottom:

1. **Status header (sticky, top):** App wordmark "Tend" small. A large unread-count line as the hero of the header — e.g. "6 people need you" — styled like an inbox unread badge (this is the unread-count-as-todo framing). A thin progress meter beneath it showing how close you are to inbox zero (e.g. a hairline bar mostly empty). A small "Today's hand: 6 of 23" pill — this is Pile's smart pre-filter / daily-surfaced-card CEILING, the humane fix for the "anxiety engine" risk: only a capped set surfaces per day, never the full overdue mountain.

2. **The pressure-ranked feed (scrollable middle):** ONE vertical stream of person-cards, sorted in source-markup order by relational debt (most overdue + most valuable on top). Sticky section headers segment the feed by temporal mood, in this order: **OVERDUE**, **TODAY**, **COOLING**, **WARM & QUIET**. Each header shows a count chip. The amount of "OVERDUE" you scroll through before reaching "TODAY" IS the dashboard — scroll position communicates how behind you are. No sort/filter chrome; the ranking is the interface.

3. **Compose / triage bar (sticky, bottom — the cockpit):** A single persistent thumb-zone bar whose primary verb is context-aware. Show it reading "Triage 6" by default (count = remaining unread), with a secondary "Add someone" affordance. Make clear via copy that at inbox zero it would read "Add someone." Destructive actions (Archive/Delete a contact entirely) live at the awkward FAR edge of this bar (Thumbprint's friction-by-anatomy) — visibly placed where a thumb has to stretch, as a safety rail.

=== THE PERSON-CARD (the heart of the experiment) ===
Each card shows ONLY ONE line of context + ONE next action — never a profile dump:
- Avatar (CSS monogram circle), Name, and a single context line in the form: "9 days quiet · $40k renewal" or a copilot-style proactive line: "Maya's pricing is due today" (borrow Threadbook's proactive-copilot turns as the relational-debt context line — make it read like a smart assistant's text).
- A **heat edge:** a thin colored LEFT BORDER encoding urgency — cold blue → warm amber → urgent red (pure CSS border-color class per card).
- **Staleness / weight & memory (from Pile):** cold/ignored cards get a desaturated, slightly dimmed treatment via CSS `filter: grayscale()/opacity` and a subtle dog-eared corner (a small CSS triangle on the top-right). Hot cards get a faint glow/lift via box-shadow. Urgency must read VISUALLY before any text is parsed — the OVERDUE section cards look hot and saturated; WARM & QUIET cards look faded and dog-eared.
- A single tappable **verb chip** on the card front (e.g. "Nudge", "Reply", "Log call", "Send pricing").

=== INTERACTION MODEL (CSS-only) ===
1. **Swipe-to-triage** (email muscle memory, not pipeline drag): each card is a horizontal `scroll-snap` track with reveal-on-scroll action panels. Scroll/swipe RIGHT reveals a green "Logged / touched" panel; swipe LEFT reveals a "Snooze" panel with chips (Tomorrow / Next week / When they reply). This is the whole interaction model. At least the top 2-3 cards should be authored fully so a viewer discovers the panels by horizontal swipe; show one card pre-nudged into a "done sliver" collapsed state as proof of the loop.

2. **Diff-confirm micro-moment (grafted from Threadbook — the key blend):** when a card's verb chip is tapped, the card FLIPS (checkbox + `transform: rotateY`/translate) to reveal an inline DIFF of exactly what the action will write before it commits — green-add / amber-change rows, e.g. "Stage: Discovery → Negotiation" (amber change), "Last touch: today" (green add), "+ Logged: sent pricing deck" (green add). A "Confirm" affordance and a "Cancel" affordance sit in the thumb zone. This adds trust and a satisfying micro-beat to triage. Make the diff visually crisp: monospace-ish field names, colored left ticks, strikethrough on the old value.

3. **Inbox-zero celebration:** include a hidden/toggleable empty-state "celebration" screen (radio or `:target` toggle, reachable from a small "preview zero" control) showing the reward payoff — "Inbox zero. 6 relationships tended today." with a calm illustration-via-CSS (e.g. a checkmark, soft gradient) and the bottom bar now reading "Add someone." This is the static payoff that proves the loop.

4. **Left-handed mirror (cheap no-JS a11y win from Thumbprint):** a single root-level CSS radio toggle backed by a `--grip-side` custom property that mirrors the compose bar's primary verb and the awkward-edge destructive action to the opposite side. Author the whole bottom bar against `--grip-side` so the flip is one custom-property swap. Expose it as a tiny "R / L" toggle in the header or compose bar.

=== SAMPLE DATA (make it feel real) ===
~9-11 person-cards across the four moods. Suggested:
- OVERDUE: "Maria Soto · 9 days quiet · $40k renewal" (red heat, chip "Nudge"); "Devon Park · pricing promised 4 days ago" (red, chip "Send pricing"); "Acme / Lena Ruiz · contract sent, no reply 6d · $120k" (red-amber, chip "Follow up").
- TODAY: "Maya Chen · pricing is due today" copilot line (amber, chip "Reply"); "Jordan Blake · intro call at 2pm" (amber, chip "Prep").
- COOLING: "Priya Nair · 18 days quiet · $15k expansion" (cool amber, chip "Check in"); "Sam Whitlock · demo no-show, 12d" (cool, chip "Reschedule").
- WARM & QUIET: "Tomás Vidal · all good · last touch 3d" (faded blue, dog-eared, chip "Note"); "Greenfield Co. · closed-won, nurture" (faded, dog-eared, chip "Thank-you").
Use realistic deal values, day counts, and one or two genuinely copilot-phrased proactive lines. The diff-confirm example should use Maria or Lena (a stage change reads well).

=== COLOR & MOOD DIRECTION (its own palette — NOT the Lab Instrument dark UI) ===
Warm, calm, humane — the OPPOSITE of a cold spreadsheet, deliberately fighting the "anxiety engine" risk. Soft off-white/parchment background (#faf7f2 range), warm near-black ink, generous rounded cards with soft shadows. Heat scale: cold = muted slate-blue (#6b8cae), warm = amber (#e0a23b), urgent = a warm coral-red (#e06a5b) — never a harsh alarm red; urgency should feel like a gentle nudge, not a klaxon. Green for "logged/done" and diff-adds (#3da06b), amber for diff-changes. Accent for primary actions: a friendly teal or sage. Typography: Inter or similar humanist sans for UI; consider a slightly warmer display weight for the unread-count hero. Lots of breathing room, large tap targets, friendly micro-copy ("tended", "needs you", "all good"). The empty state should feel like genuine relief, not a dead screen.

=== EXPLICIT MOBILE-ONLY CONSTRAINTS ===
- Design to exactly 375px wide; assume the 720px-tall mobile preview window. All layout, type sizes, and tap targets sized for a phone held one-handed.
- Everything actionable must sit in the bottom ~40% thumb zone; the top is read-only context.
- One decision per card, zero typing required to make progress.
- No desktop/multi-column fallback needed — this is mobile-native by definition. Do not build a responsive desktop view.
- Sticky header and sticky bottom compose bar; the feed scrolls between them.
- All gestures faked credibly with scroll-snap / checkboxes / radios / :target. Be honest that swipe-persistence is an illusion in no-JS — author convincing static states (one done-sliver, one flipped diff, the zero state) so the full loop is legible from a single screen without interaction.

Agent Trace

Lead → Builder (Opus) → Lead

Lead 6m high Opus 4.8

Ran /uiExperiment:new — scaffolded from the template, assembled the Builder’s content, wrote this sidebar, and registered the experiment in experiments.html + changelog.html.

Start 9:46:00 pm End 9:52:00 pm

↓

Builder 1m 51s high Opus 4.8

Built the full Tend experiment content (warm parchment UI, debt-ranked feed, swipe-to-triage, diff-confirm flip, inbox-zero screen, L/R grip mirror) as a self-contained, scoped CSS-only fragment.

Start 9:48:00 pm End 9:49:51 pm

Prompt ↓

Full Prompt

Build a mobile-only CRM experiment called **Tend** — a "relationship inbox." This is the experiment content that lives INSIDE the `.window` element (device preview defaults to mobile, 375px). Pure HTML/CSS, NO JavaScript, no external dependencies beyond Google Fonts, fully self-contained, must render standalone. Do NOT touch the experiment sidebar — only build the content. Every interaction must be achievable with CSS-only patterns: radio/checkbox inputs, `:checked`, `:target`, sibling/`peer` selectors, `<details>`, `scroll-snap`, and transforms.

=== CONCEPT & METAPHOR ===
The core reframe: a contact is not a row in a database — it is an UNREAD MESSAGE. A relationship goes "unread" when it needs you (deal gone quiet, a promise owed, a follow-up due, a renewal looming). Home is a single descending feed of person-cards ranked by "relational debt" (days-since-last-touch × how much they matter). There is no list view, no table, no kanban. You don't manage records — you clear a feed of humans. Triage to zero = "relationship inbox zero." Reinforce the email metaphor throughout: an unread COUNT in the header IS the to-do list ("6 people need you"), section headers are temporal moods, and clearing the feed earns a genuine empty-state celebration. The whole concept must be honestly told on this ONE home screen.

=== 375px SCREEN LAYOUT (windshield / cockpit discipline) ===
Apply Thumbprint's thumb-zone discipline: the TOP ~60% is read-only "windshield" context (header + the scrolling feed of cards). The BOTTOM ~40% is the "cockpit" — all triage verbs and the context-aware compose bar live here, thumb-reachable, never a stretch. Concretely, top to bottom:

1. **Status header (sticky, top):** App wordmark "Tend" small. A large unread-count line as the hero of the header — e.g. "6 people need you" — styled like an inbox unread badge (this is the unread-count-as-todo framing). A thin progress meter beneath it showing how close you are to inbox zero (e.g. a hairline bar mostly empty). A small "Today's hand: 6 of 23" pill — this is Pile's smart pre-filter / daily-surfaced-card CEILING, the humane fix for the "anxiety engine" risk: only a capped set surfaces per day, never the full overdue mountain.

2. **The pressure-ranked feed (scrollable middle):** ONE vertical stream of person-cards, sorted in source-markup order by relational debt (most overdue + most valuable on top). Sticky section headers segment the feed by temporal mood, in this order: **OVERDUE**, **TODAY**, **COOLING**, **WARM & QUIET**. Each header shows a count chip. The amount of "OVERDUE" you scroll through before reaching "TODAY" IS the dashboard — scroll position communicates how behind you are. No sort/filter chrome; the ranking is the interface.

3. **Compose / triage bar (sticky, bottom — the cockpit):** A single persistent thumb-zone bar whose primary verb is context-aware. Show it reading "Triage 6" by default (count = remaining unread), with a secondary "Add someone" affordance. Make clear via copy that at inbox zero it would read "Add someone." Destructive actions (Archive/Delete a contact entirely) live at the awkward FAR edge of this bar (Thumbprint's friction-by-anatomy) — visibly placed where a thumb has to stretch, as a safety rail.

=== THE PERSON-CARD (the heart of the experiment) ===
Each card shows ONLY ONE line of context + ONE next action — never a profile dump:
- Avatar (CSS monogram circle), Name, and a single context line in the form: "9 days quiet · $40k renewal" or a copilot-style proactive line: "Maya's pricing is due today" (borrow Threadbook's proactive-copilot turns as the relational-debt context line — make it read like a smart assistant's text).
- A **heat edge:** a thin colored LEFT BORDER encoding urgency — cold blue → warm amber → urgent red (pure CSS border-color class per card).
- **Staleness / weight & memory (from Pile):** cold/ignored cards get a desaturated, slightly dimmed treatment via CSS `filter: grayscale()/opacity` and a subtle dog-eared corner (a small CSS triangle on the top-right). Hot cards get a faint glow/lift via box-shadow. Urgency must read VISUALLY before any text is parsed — the OVERDUE section cards look hot and saturated; WARM & QUIET cards look faded and dog-eared.
- A single tappable **verb chip** on the card front (e.g. "Nudge", "Reply", "Log call", "Send pricing").

=== INTERACTION MODEL (CSS-only) ===
1. **Swipe-to-triage** (email muscle memory, not pipeline drag): each card is a horizontal `scroll-snap` track with reveal-on-scroll action panels. Scroll/swipe RIGHT reveals a green "Logged / touched" panel; swipe LEFT reveals a "Snooze" panel with chips (Tomorrow / Next week / When they reply). This is the whole interaction model. At least the top 2-3 cards should be authored fully so a viewer discovers the panels by horizontal swipe; show one card pre-nudged into a "done sliver" collapsed state as proof of the loop.

2. **Diff-confirm micro-moment (grafted from Threadbook — the key blend):** when a card's verb chip is tapped, the card FLIPS (checkbox + `transform: rotateY`/translate) to reveal an inline DIFF of exactly what the action will write before it commits — green-add / amber-change rows, e.g. "Stage: Discovery → Negotiation" (amber change), "Last touch: today" (green add), "+ Logged: sent pricing deck" (green add). A "Confirm" affordance and a "Cancel" affordance sit in the thumb zone. This adds trust and a satisfying micro-beat to triage. Make the diff visually crisp: monospace-ish field names, colored left ticks, strikethrough on the old value.

3. **Inbox-zero celebration:** include a hidden/toggleable empty-state "celebration" screen (radio or `:target` toggle, reachable from a small "preview zero" control) showing the reward payoff — "Inbox zero. 6 relationships tended today." with a calm illustration-via-CSS (e.g. a checkmark, soft gradient) and the bottom bar now reading "Add someone." This is the static payoff that proves the loop.

4. **Left-handed mirror (cheap no-JS a11y win from Thumbprint):** a single root-level CSS radio toggle backed by a `--grip-side` custom property that mirrors the compose bar's primary verb and the awkward-edge destructive action to the opposite side. Author the whole bottom bar against `--grip-side` so the flip is one custom-property swap. Expose it as a tiny "R / L" toggle in the header or compose bar.

=== SAMPLE DATA (make it feel real) ===
~9-11 person-cards across the four moods. Suggested:
- OVERDUE: "Maria Soto · 9 days quiet · $40k renewal" (red heat, chip "Nudge"); "Devon Park · pricing promised 4 days ago" (red, chip "Send pricing"); "Acme / Lena Ruiz · contract sent, no reply 6d · $120k" (red-amber, chip "Follow up").
- TODAY: "Maya Chen · pricing is due today" copilot line (amber, chip "Reply"); "Jordan Blake · intro call at 2pm" (amber, chip "Prep").
- COOLING: "Priya Nair · 18 days quiet · $15k expansion" (cool amber, chip "Check in"); "Sam Whitlock · demo no-show, 12d" (cool, chip "Reschedule").
- WARM & QUIET: "Tomás Vidal · all good · last touch 3d" (faded blue, dog-eared, chip "Note"); "Greenfield Co. · closed-won, nurture" (faded, dog-eared, chip "Thank-you").
Use realistic deal values, day counts, and one or two genuinely copilot-phrased proactive lines. The diff-confirm example should use Maria or Lena (a stage change reads well).

=== COLOR & MOOD DIRECTION (its own palette — NOT the Lab Instrument dark UI) ===
Warm, calm, humane — the OPPOSITE of a cold spreadsheet, deliberately fighting the "anxiety engine" risk. Soft off-white/parchment background (#faf7f2 range), warm near-black ink, generous rounded cards with soft shadows. Heat scale: cold = muted slate-blue (#6b8cae), warm = amber (#e0a23b), urgent = a warm coral-red (#e06a5b) — never a harsh alarm red; urgency should feel like a gentle nudge, not a klaxon. Green for "logged/done" and diff-adds (#3da06b), amber for diff-changes. Accent for primary actions: a friendly teal or sage. Typography: Inter or similar humanist sans for UI; consider a slightly warmer display weight for the unread-count hero. Lots of breathing room, large tap targets, friendly micro-copy ("tended", "needs you", "all good"). The empty state should feel like genuine relief, not a dead screen.

=== EXPLICIT MOBILE-ONLY CONSTRAINTS ===
- Design to exactly 375px wide; assume the 720px-tall mobile preview window. All layout, type sizes, and tap targets sized for a phone held one-handed.
- Everything actionable must sit in the bottom ~40% thumb zone; the top is read-only context.
- One decision per card, zero typing required to make progress.
- No desktop/multi-column fallback needed — this is mobile-native by definition. Do not build a responsive desktop view.
- Sticky header and sticky bottom compose bar; the feed scrolls between them.
- All gestures faked credibly with scroll-snap / checkboxes / radios / :target. Be honest that swipe-persistence is an illusion in no-JS — author convincing static states (one done-sliver, one flipped diff, the zero state) so the full loop is legible from a single screen without interaction.

Overdue

3 these are aching

Maria Soto

9 days quiet · $40k renewal

Nudge

✓Logged · touched today

Snooze until… Tomorrow Next week When they reply

Devon Park

pricing promised 4 days ago

Send pricing

✓Logged · touched today

Snooze until… Tomorrow Next week When they reply

Lena Ruiz · Acme

contract sent, no reply 6d · $120k

Follow up

Lena Ruizreview change

stage ~~Discovery~~ → Negotiation

last_touch + today

activity + Logged: followed up on contract

Cancel Confirm

Today

2 on the calendar

Maya Chen

Maya's pricing is due today

Jordan Blake

intro call at 2pm

Prep

Cooling

2 drifting away

Priya Nair

18 days quiet · $15k expansion

Check in

✓

Sam Whitlock — rescheduledtended a moment ago · undo

Warm & Quiet

2 all good — just resting

Tomás Vidal

all good · last touch 3d

Note

Greenfield Co.

closed-won · nurture

Thank-you

that's today's hand. the rest can wait. 🌿