BELL · AI WORK ASSISTANT
Bell — An AI work assistant that respects how you actually work.
A self-initiated prototype exploring three patterns most AI assistants still get wrong — source-first streaming, inline source pills, and action handoff. Designed, built and shipped in a week.
Role
Self-initiated
Year
2026
INSIGHT
Most AI assistants in 2026 share the same shape — a generic orb, a single blinking cursor, sources buried two clicks away. They feel impressive on first run, but the more you use them the less you trust them. The friction isn't intelligence; it's the absence of provenance.
APPROACH
I treated this as a design problem first, a build problem second. Five HTML iterations to lock the design language — Instrument Serif italic for warmth, a lavender used only as accent, sidebar in neutral near-white so the brand colour doesn't bleed. Then Claude Design rendered the hi-fi Scene 2, and Lovable turned it into a working React app in three rounds.
3 PATTERNS
Source-first streaming places the source pill before the answer begins, so you can see where it's coming from while it's still being written. Inline source pills let you click any reference to swap the side panel context. Action handoff turns a soft suggestion ("I can schedule this for you") into a structured card with Accept / Decline / Edit — the AI never assumes consent.
CRAFT
The strict constraint: lavender lives in seven places only — the orb, the greeting, Send, Accept, the active sidebar item, the card hover edge, the input focus ring. Everything else is black, white, or blue-grey. Brand tone borrowed from an old rotary phone: present, but never demanding.
The source appears before the answer does.
In most assistants, the answer streams in first and the citation lands at the end — by the time you see where it came from, you've already half-believed it. If the source turns out to be weak, the trust damage is already done. Reversing the order changes the whole reading experience: you see "Notion · Phoenix prep doc · updated 2 days ago" first, then the summary streams in below it. You're calibrating credibility while you read, not after.
WHY THIS MATTERS
Provenance isn't a footnote, it's a frame. Putting the source first acknowledges that in 2026 the question users want answered is no longer "what does this say" but "can I trust what this says".
Click any pill to swap the side panel context.
Side panels in AI tools usually hold one stable context — your last query, the active document, a fixed reference. But the moment an answer cites three sources, you want to be able to dive into any of them without losing the conversation. So each inline pill ("Notion · Phoenix doc", "Linear · ENG-247", "Slack · #marketing") is a tap target: clicking swaps the side panel to that source's preview, without scrolling, without breaking the conversation flow.
WHY THIS MATTERS
Most assistant UIs treat the answer and the source as two separate places. Inline pills collapse the distance — the source is one click away, the conversation is never lost.
The assistant suggests. It never assumes consent.
When an AI tool offers to "schedule this for you" in plain prose, users either ignore it (because they don't trust soft language to actually take action) or fear it (because they don't know if it already did). The action handoff pattern materialises the offer as a structured card — title, context, and three buttons: Accept (filled lavender), Decline (mid-weight ghost), Edit (weakest ghost). The hierarchy makes the default choice readable at a glance; the Edit escape hatch makes it safe to engage without losing control.
WHY THIS MATTERS
The hierarchy is deliberate: Accept carries the only filled weight, Decline sits beside it as a true ghost, and Edit retreats to an icon. Bell treats the choice as binary first (yes / no), with Edit as the escape hatch — which mirrors how people actually decide.
✦PROCESS GLIMPSE — A WEEK FROM SKETCH TO LIVE DEMO
Seven days from blank page to live demo. Five HTML iterations to lock the visual language before a single line of code was generated. Two AI tools — Claude Design for hi-fi rendering, Lovable for production React — working in handoff, not in competition. The decisions-per-square-inch ratio is what matters at this scale; the speed is a byproduct.
✦ BRAND & SYSTEM
Lavender lives only as accent.
A single brand colour applied to large surfaces starts to feel cheap. Bell's lavender (#6B5CD0) appears in exactly seven places — every one of them earning the weight by being scarce. Everywhere else is black, white, or a neutral blue-grey. The sidebar — the largest stable surface in the product — is intentionally a neutral near-white (#F8F8F8), so the brand colour never bleeds into the chrome.
The constraint is enforced at the design-system level, not the page level. Lavender tokens are scoped to accent roles only; surface tokens default to neutrals. When a future contributor reaches for lavender to "make the panel feel more on-brand", the system has already said no.
THE MECHANIC
Scarcity creates weight. If lavender were available on every panel, the Send button would lose its readability as the primary action. By forbidding the colour from 95% of the surface, the 5% where it lives starts to mean something.
How a bell rings — quietly, with intent.
Bell's mark is a hand-drawn ink ring — a wispy main ring inside a soft mist halo, an inner ring, a centre dot, three splatter dots. Five layers, one breath. It is deliberately not a glossy chat orb: the ink keeps it human, the single centre grounds the composition, and the whole mark holds the room without filling it — like the old telephone the brand tone is borrowed from.
WHY THIS MATTERS
An assistant's mark earns trust the way the assistant does — by restraint. A mark that spends almost all its time still, and moves only with intent, says more about how Bell behaves than any wordmark could.
✦ OUTCOMES — IN PRACTICE, NOT IN PRODUCTION
~12h
From design language locked to a live demo URL
3
Novel interaction patterns shipped in the prototype
5 · 3
No production metrics here. Bell is a prototype, not a product — these are the numbers that describe the craft and the velocity, not the user impact. If you want to see what the patterns feel like at speed, the live demo is one click away.
REFLECTION
A1 · What worked
Locking the visual language in HTML before touching Lovable was the highest-leverage decision of the week. Five low-cost iterations let me decide what Bell should feel like — Instrument Serif's warmth against DM Sans's restraint, lavender as accent and not as wash — without spending Lovable credits on aesthetic debate. By the time Claude Design rendered Scene 2, both tools were working against a fixed brief, not negotiating taste. The 90% first-shot fidelity from Claude Design wasn't luck; it was the dividend on the HTML investment.
A2 · What also worked
Constraints as a design tool. Lavender was forbidden from the sidebar; the sidebar is the largest stable surface in the product. Forbidding the brand colour from that surface forced the lavender to do real work in the seven places it was allowed, and protected the brand from being diluted by sheer area. Similarly, the action card's hierarchy — Accept as the only filled button, Decline as a true ghost, Edit folded into an icon — was a constraint chosen against convention because the underlying decision is binary, not ternary. Picking constraints in advance, and defending them under iteration pressure, is what gave Bell a coherent voice in seven days.
B · What I'd do differently
The other lesson came from the logo. I let three candidate directions run in parallel without an elimination criterion — and none of them survived. The final ink-ring mark didn't come from the candidates at all; it came from returning to the brand tone ("an old rotary phone — present, but never demanding") and letting it disqualify everything that didn't ring true. Next time I'd write the rejection rule before drawing the first line.