Chat — Echo AI

Echo AI is the product’s assistant, and a chat with it is nine components in one column: the card that holds them under its branded strip, the thread that scrolls, the turns in it, the bubbles they sit on, the ranked proposal and the projection chips that can sit inside Echo’s own bubble, the markers between turns, the attachments that travel with a message, and the composer at the bottom. The one rule above the parts is the Writing rules page’s: text a model wrote is marked where it appears.

Beta · Pattern · chat.css · badge.css · icon-button.css · drawn in the library as Echo inside MAFO, and built as the product kit’s Echo AI screen

Chat pattern · Message scroller · Message · Bubble · Suggestions · Projection · Marker · Attachment · Badge / Chip · Icon button

The chat pattern — a marker, three turns, a turn still thinking, the composerOpen in the workshop

The workshop's own story, rendered here. Echo's turns are marked by its own avatar and can carry a feedback row; the user's turn is its bubble, with its time inside it.

What it is for

Use when turns need to scroll under a fixed composer. Do not use when the whole conversation is short and static. The pattern is the conversation; what Echo answers with — a table, a chart, an action — is a card in the bubble, marked as the AI’s like the rest.

The components it is made of

One row per part: its job here, and when the part itself is the one to use. Its own page holds the rest — the markup, the modifiers, the measured rows.

Component	Its job in the arrangement	Use it when
Chat pattern	the card the whole conversation sits in: the branded strip above it, the thread, and the one-line composer under it	a chat accepts a message
Message scroller	the thread: it owns the scroll, the newest at the bottom, a pill to jump back down	turns need to scroll under a fixed composer
Message	one turn — whose it is and what was said; Echo’s avatar is the mark, and the feedback row sits under its answers	a conversation is rendered turn by turn
Bubble	the surface a turn sits on — the user’s a quiet card at the right with its time inside it, Echo’s white with a hairline	a turn of a conversation needs a surface
Suggestions	Echo’s ranked proposal inside its own bubble: a name, a measure, a confidence pill and a budget, one row each	the assistant proposes a ranked set a person can apply
Projection	the numbers Echo commits to, as chips under the answer that promised them	an answer promises numbers worth restating
Marker	a system line in the thread: a date, an attachment read, a context change	the thread changes state — a new day, an attachment read, a context change, a handover to a person
Attachment	a file or an image travelling with a message — in the composer before, in the message after	a file or an image travels with a message — in the Composer’s files row, and echoed in the sent Message
Badge / Chip	the follow-up prompts under the thread, as neutral chips	a status word on a KPI tile or a table row, a category tag on a card, a small count
Icon button	copy · helpful · not helpful under an answer	a toolbar, a table row’s actions, a dialog’s close, a topbar’s notifications — an action whose icon is universally read (close, edit, delete, search, more)

The rules that hold between them

• A machine’s text is marked where it appears. Text a model generated is labelled ‘AI’ where it appears — Echo’s own avatar in a chat, which carries the brand’s mark and is said once, a neutral ‘AI’ Badge on a Card or an Insight the model wrote — and a control that sends something to the model carries the sparkles glyph; nothing else uses that glyph. The label is neutral, never a colour team: the mark states provenance, not status. Feedback controls (copy · helpful · not helpful) sit under every generated answer; the mark and the feedback are what a design system can do.
• The thread owns the scroll, the newest at the bottom. Never: a log that fills its box while a pill sits under it, which cuts the newest message · a scroller with no bottom anchor.
• Both roles are light and neither has a tail: the user’s is a quiet card at the right with its time inside it, Echo’s is white with a hairline. Never: a dark user bubble · a tail corner · text/subtle for a 12 meta, which the matrix promises only at 24 and over · an actions row added with its own margin instead of the block’s gap.
• Echo’s avatar is what marks its turn, and the mark is said once; the feedback row is on Echo’s turns and never on the user’s. Never: a turn without its avatar · a name or a second mark beside an avatar that already carries the brand’s own · a feedback row on the user’s own words.
• A marker is for a change of state, not for every message. Never: a marker for every message · a marker in a bubble · two markers in a row · a fill changed on the instance.
• The composer is ONE LINE as wide as its thread — a field and a labelled button — and it shows its files as chips above them. Never: a round icon button in place of the labelled one · a floating card with a shadow · a 64-tall textarea.
• An attachment keeps its glyph, and loses its remove once sent. Never: a chip without its glyph · a remove on a sent attachment · a thumbnail larger than the chip · a fill changed on the instance.
• Follow-up prompts are offered, never sent. Echo inside MAFO — the scroller with a date marker, two user turns, a marked answer with its feedback row and a turn still thinking; three follow-up prompts as neutral Chips under the thread (offered, never auto-sent); the composer with two attachments.

The mark — Do and Don’t

	Shown as	Why
Do	Q3 revenue rose 12 % on iRTB volume; MAFO margins held at 41 %.	the answer carries Echo’s own avatar — the brand’s mark, which is what says a machine wrote it — and the feedback row; the mark is said once, so no name and no second glyph sit beside it, and the reader knows before reading
Do	Ask Echo	a control that invokes the model carries the sparkles glyph — the one glyph reserved for AI
Don’t	Q3 revenue rose 12 % on iRTB volume; MAFO margins held at 41 %.	the same answer as a bare bubble — a machine’s text passing as a person’s; a Bubble is never used outside Message
Don’t	✨ Ask Echo	an emoji as the mark — an emoji is never a glyph (Icons & logos); the sparkles Lucide glyph is the mark

The full section is on Writing rules.

In the library

The library draws the pattern whole as Echo inside MAFO — the scroller with a date marker, two user turns, a marked answer with its feedback row and a turn still thinking; three follow-up prompts as neutral Chips under the thread (offered, never auto-sent); the composer with two attachments — the Composer set, on the page Chat. No product screen runs it in code yet; the product kit’s Echo AI screen is where the chat pattern is built for MAFO from these parts.