Patterns

Readout

The room’s own thinking, given back: themes with quotes, tensions, lone ideas, questions and an agenda.

Concept · live ReactSource file: tokens.jsonReact component: Brief

Built from

A pattern, the largest in the system: three smaller patterns on one page, under a headline.

Example

Atlas product team · 2 Oct 2026 · 10 voices

What’s the one thing that would make the biggest difference to our customers this quarter?

Readout

Most of the room thinks onboarding is where customers get lost, but you’re split on whether to build new or fix what’s there first.

What the room said

Onboarding is where people get stuck6 of 10
Half our trials never finish setup.
Fix what’s broken before building more4 of 10
We keep shipping features on top of bugs.
We don’t talk to customers enough3 of 10
None of us has been on a customer call this month.

Where you pull apart

Build the new onboarding 44 Fix the existing bugs first
Both sides want fewer customers stuck; they disagree on the fastest way there.

Said by one person · worth hearing

Offer every new trial a 15-minute setup call.What if we just got on a call with every new trial for the first month?
Let support fix small bugs without waiting for a sprint.Support could close half these tickets themselves.

Asked, and not yet answered

  • Who owns onboarding today?
  • Do we actually know where trials drop off?

The rest of the meeting · 30 min

  1. Where trials get stuckRaised by 6 of 10: the biggest theme.12 min
  2. Build new, or fix first?The room is split, 4 and 4.10 min
  3. Who owns onboarding?Asked twice; nobody answered.5 min
  4. Try: a setup call for every trialOne voice raised it: worth a quick yes or no.3 min
Suggested next roundWhat would make a new customer successful in their first ten minutes?
Back to it next week
Round one of the sample meeting: ten people answering one open question out loud.

Order

The readout gives the room its own thinking back, in the order a meeting can use it.

  • The headline: one sentence on what the room thinks, written so it survives being the only line anyone reads.
  • Themes: the points several people made, each with a count and one anonymous line in someone’s own words.
  • Where the room pulls apart, both sides counted.
  • Ideas only one person raised, and questions nobody has answered.
  • The agenda it becomes, and a suggested next round.

On stage

On the shared screen the readout plays in two beats while Hivemind reads it aloud: first the themes, then the tension and the lone idea. Nothing on stage is smaller than 18px.

What the room said

Onboarding is where people get stuck6 of 10
Half our trials never finish setup.
Fix what’s broken before building more4 of 10
We keep shipping features on top of bugs.
We don’t talk to customers enough3 of 10
None of us has been on a customer call this month.

Content

  • Quote briefly, and only what carries the theme. Quotes are cleaned of names and verbal tics so phrasing doesn’t give anyone away.
  • Counts, never percentages: “6 of 10”.
  • Scale every count to the voices received.
Don’t use it
  • Full transcripts, or any quote that only one person in the room could have said.
  • A verdict on who was right. The readout shows what the room thinks, not what it should.

Held readout

Below 4 voices there is no readout and no quotes, because a small room makes every answer traceable. Say why, plainly.

A readout needs at least 4 voices to stay anonymous.

3 voices came in. The host can run the round again.

Accessibility

  • An <article>: the question is its heading (h3) and each part (what the room said, where it pulls apart, the agenda) is a heading under it (h4), so the readout can be walked part by part.
  • Every count is text, “6 of 10”. The bars beside them are decoration and carry nothing the words don’t.
  • On stage, Hive reads the readout aloud with captions, so the room doesn’t depend on reading the screen.

Props

PropTypeDefaultDescription
questionstring—The open question, as asked.
readoutReadout—Headline, themes, ideas, tensions, questions, agenda and a next round.
ofnumber—Voices received. Every count is scaled to this.
hideHeadlinebooleanfalseWhen a page hero already carries the headline.

Tokens

TokenValueWhere it lands
--hm-surface#ffffff / #1c2129Cards and panels. Lifted from bg by shadow-card, not by a heavy border.
--hm-border#e6e5eb / #2d323bHairlines between rows and inside cards. Decorative only.
--hm-text#141318 / #ebedefPrimary text. Light: graphite #141318 on paper, softer than black on white.
--hm-text-muted#5b5869 / #9b9fa5Secondary text: descriptions, helper text, metadata. Reads on every ground including surface-hover.
--hm-chart-common#2d49c9 / #6489feTheme bars in a readout: the hero cobalt.
--hm-chart-agree#2d49c9 / #6489feThe hero series as a fill or dot: cobalt, the strongest step in each theme.
--hm-chart-b#6489fe / #cad9feThe second series, or the other side of a split: a lighter cobalt on paper, a deeper one on ink.
--hm-accent#f2b106 / #ffc550Primary, honey. A fill, glow or dot only, always carrying ink: live, the record comb, the shared mind, the hero series.

Themes and quotes

What most people said, counted, each with one anonymous line in someone’s own words.

Concept · live ReactSource file: tokens.jsonReact component: ThemeList

Built from

A pattern: a heading, then per theme a title, a count, a Bar and a Quote.

  • BarHow many said it, of how many
  • QuoteOne line, in their words
  • TypographyTitle and count styles

Try it

What the room said

Onboarding is where people get stuck6 of 10
Half our trials never finish setup.
Fix what’s broken before building more4 of 10
We keep shipping features on top of bugs.
We don’t talk to customers enough3 of 10
None of us has been on a customer call this month.
Quotes
Theme
<ThemeList themes={readout.themes} of={10} />

When to use

  • At the top of every readout: the first thing a room wants to know is what most people said.
  • At most three themes, most shared first.
Don’t use it
  • Word clouds. They show which words were common, not what people meant.

Quotes

A theme is a claim; the quote is the evidence. One short line per theme, in someone’s own words, makes the room hear itself rather than a summary of itself.

  • One quote per theme, under twenty words.
  • Cleaned: names, places and verbal tics removed.
Don’t use it
  • Quotes in a room of fewer than 4.
  • Quoting the only person who could have said it.

Accessibility

  • “What the room said” is a heading; each theme reads as its title, then its count, then its quote.
  • The bar fills on first view and is decoration: the count beside it is the value.
  • Quote text is text-muted with a cobalt edge, 6.7:1 on paper.

Props

PropTypeDefaultDescription
themesTheme[]—Title, count and one quote each.
ofnumber—Voices received.
quotesbooleantrueShow the quote under each theme.
maxnumber3Themes shown.
size'ui' | 'stage''ui'Stage type styles for the shared screen.

Tokens

TokenValueWhere it lands
--hm-chart-common#2d49c9 / #6489feTheme bars in a readout: the hero cobalt.
--hm-accent#f2b106 / #ffc550Primary, honey. A fill, glow or dot only, always carrying ink: live, the record comb, the shared mind, the hero series.
--hm-text-muted#5b5869 / #9b9fa5Secondary text: descriptions, helper text, metadata. Reads on every ground including surface-hover.

Ideas and tensions

Where the room pulls apart, what only one person raised, and what nobody has answered.

Concept · live ReactSource file: tokens.jsonReact component: TensionCard, IdeaList, QuestionList

Built from

A pattern: three short blocks, each a labelled heading over components.

Example

Where you pull apart

Build the new onboarding 44 Fix the existing bugs first
Both sides want fewer customers stuck; they disagree on the fastest way there.

Said by one person · worth hearing

Offer every new trial a 15-minute setup call.What if we just got on a call with every new trial for the first month?
Let support fix small bugs without waiting for a sprint.Support could close half these tickets themselves.

Asked, and not yet answered

  • Who owns onboarding today?
  • Do we actually know where trials drop off?

When to use

Themes say what most people think. These three say what a meeting would otherwise miss.

  • Tensions: where answers pull in different directions, both sides counted, cobalt against its lighter step.
  • Ideas: points only one person raised. Often the most useful line in the round.
  • Questions: things people asked that nobody answered.
Don’t use it
  • Calling a lone idea an outlier, or hiding it because only one person said it.

Content

  • Name a tension by its two positions, in the room’s words: “Build new” and “Fix first”, not “Option A”.
  • A lone idea is stated, then quoted. It is never labelled an outlier.
  • A question is written as it was asked, question mark included.
Don’t use it
  • Declaring a winner in a tension. A split is something to talk about, not a vote to settle.

Accessibility

  • Each block opens with a heading and an icon. The icon is hidden from screen readers; the heading carries the meaning.
  • A tension’s two sides are named and counted in text. The two-tone bar is hidden from screen readers, and its sides differ in lightness, so the split survives without colour.
  • Questions are a list, so a screen reader says how many there are.

Props

PropTypeDefaultDescription
TensionCard · tTension—Two sides, their counts and a note.
IdeaList · ideasIdea[]—Each with a short quote.
QuestionList · questionsstring[]—Unanswered questions from the round.

Tokens

TokenValueWhere it lands
--hm-chart-agree#2d49c9 / #6489feThe hero series as a fill or dot: cobalt, the strongest step in each theme.
--hm-chart-b#6489fe / #cad9feThe second series, or the other side of a split: a lighter cobalt on paper, a deeper one on ink.
--hm-text#141318 / #ebedefPrimary text. Light: graphite #141318 on paper, softer than black on white.
--hm-text-muted#5b5869 / #9b9fa5Secondary text: descriptions, helper text, metadata. Reads on every ground including surface-hover.

Agenda and live context

The readout as the rest of the meeting, and what Hivemind brings back while each item is discussed.

Concept · live ReactSource file: tokens.jsonReact component: AgendaList, LiveContext

Built from

A pattern: an ordered list of items, and the live context Hive brings back for the current one.

Try it

The rest of the meeting · 30 min

  1. Where trials get stuckRaised by 6 of 10: the biggest theme.12 min
  2. Build new, or fix first?The room is split, 4 and 4.10 min
  3. Who owns onboarding?Asked twice; nobody answered.5 min
  4. Try: a setup call for every trialOne voice raised it: worth a quick yes or no.3 min

Hive is listening · from the round

“Half our trials never finish setup.”“They stall at connecting their data.”Asked twice: do we know where trials drop off?
Now discussing
Theme
<AgendaList items={readout.agenda} current={0} />

When to use

The readout becomes the rest of the meeting. Items come from the readout itself: the biggest theme first, then the tension, then unanswered questions and lone ideas, each with a timebox.

  • Every item says why it is on the agenda: “Raised by 6 of 10”.
  • While an item is discussed, Hivemind listens and brings back what the room said about it.
Don’t use it
  • Agenda items no answer supports. The agenda is the room’s, not the host’s wish list.

States

Three, and only one item is ever current. Next items sit on bg-subtle. The current one takes accent-subtle with a 1.5px honey edge and a honey number. Done items step back to an outline with muted text, by colour rather than opacity, so they still pass AA.

The rest of the meeting · 30 min

  1. Done: Where trials get stuckRaised by 6 of 10: the biggest theme.12 min
  2. Build new, or fix first?The room is split, 4 and 4.10 min
  3. Who owns onboarding?Asked twice; nobody answered.5 min
  4. Try: a setup call for every trialOne voice raised it: worth a quick yes or no.3 min
Item 1 done, item 2 under discussion, items 3 and 4 next.

Accessibility

  • An ordered list. The current item carries aria-current="step", and a done item is read as “Done:” before its title, so the state is said, not only shown.
  • Live context is a polite live region: what Hive brings back is announced when the item changes, without interrupting whoever is talking.
  • The list is read, not operated. The host moves through it from the host panel, whose buttons take focus.

Props

PropTypeDefaultDescription
AgendaList · itemsAgendaItem[]—Title, minutes, why, and context to bring back.
AgendaList · currentnumber-1The item under discussion, highlighted in honey.
AgendaList · compactbooleanfalseHide the reason line, for phones and the stage.
LiveContext · itemAgendaItem—What Hivemind brings back for this item.

Tokens

TokenValueWhere it lands
--hm-bg-subtle#f1f0f4 / #0b0e15Recessed ground: sidebars, segmented-control tracks, the area behind cards.
--hm-accent#f2b106 / #ffc550Primary, honey. A fill, glow or dot only, always carrying ink: live, the record comb, the shared mind, the hero series.
--hm-accent-subtle#fff2db / #2e1e00Honey wash behind ink text: the selected row, a verdict pill, a highlight.
--hm-on-accent#141318 / #0b0e15Ink on a honey fill. Honey never carries white.
--hm-border#e6e5eb / #2d323bHairlines between rows and inside cards. Decorative only.
--hm-surface#ffffff / #1c2129Cards and panels. Lifted from bg by shadow-card, not by a heavy border.
--hm-text-muted#5b5869 / #9b9fa5Secondary text: descriptions, helper text, metadata. Reads on every ground including surface-hover.

Team profile

How a team decides over weeks: six measures, aggregate only, never filtered to a person.

Concept · live ReactSource file: tokens.jsonReact component: Radar, TrendLine, MixBar

Built from

A pattern: charts arranged into one view of how a team thinks over a quarter.

Example

Team profile

Six measures read from what the room says, this quarter against last.

This quarterLast quarter
CandourConvergenceRisk appetiteCustomer lensEmpathyFollow-through
Twelve weeks of sample hives for one organisation.

Measures

Each measure is a share from 0 to 100, read from what rooms said and decided. None is a personality score, and none exists for a single person.

MeasureRead from
CandourRounds where the room said what it thought: a hidden-dissent gap of 1 or less.
ConvergenceSplits resolved within two rounds.
Risk appetiteDecisions that went with the bolder pole.
Customer lensAnswers that argue from customers or users.
EmpathyAnswers that consider teammates or the people affected.
Follow-throughDecisions revisited on their date.

Who gets heard

The measure the product is judged on: per meeting of ten, how many people answered in Hivemind against how many spoke up in the call. The cobalt band between the lines is everyone who would otherwise have stayed quiet.

Who gets heard

Per meeting of ten, this week9.6answered3.2 spoke up in the call
6.4 more voices heard
051020 Jul3 Aug17 Aug31 Aug14 Sept28 SeptAnswered 9.6Spoke up 3.2

Lens mix

What the room argues from: customers, engineering, metrics or each other. Shares are told apart by lightness on the heat ramp, so no lens looks like the right one.

Customers38%
Engineering27%
Metrics22%
Each other13%

Accessibility

  • The radar is one image whose name lists every measure and its value, and the card’s table view gives both quarters as rows.
  • This quarter is a solid line and last quarter dashed, so the two read apart without colour.
  • Who gets heard states its answer in words above the chart, “9.6 answered, 3.2 spoke up”, before anyone has to read a line.

Rules

  • Aggregate across hives, for teams of four or more.
  • Compare a team with its own past, this quarter against last.
  • Show the table view for every chart.
Don’t use it
  • Any filter, drill-down or export that narrows to one person.
  • Ranking teams against each other on the same screen. Cross-team views are aggregated and live on the Org plan.
  • Calling a measure good or bad, except who gets heard, which the product exists to raise.

Props

PropTypeDefaultDescription
Radar · axes{ label; now; prev }[]—Measures from 0 to 1. Last quarter is drawn dashed in chart-muted.
Radar · sizenumber320Square size in px, including room for labels.
TrendLine · data{ label; value }[]—One value per week.
TrendLine · goal[number, number]—A band marking the healthy range, labelled by goalLabel.
TrendLine · describestring—The chart in one sentence, for screen readers.
MixBar · parts{ label; share }[]—Shares adding to 1, at most four.

Tokens

TokenValueWhere it lands
--hm-chart-agree-line#1c2dad / #cad9feThe hero series drawn as a line.
--hm-chart-muted#a7a4b3 / #5f636bConsole charts: de-emphasised marks only — sparklines and secondary segments. Never text.
--hm-chart-ink#4163e4 / #6489feSingle-series bars and columns: mid cobalt.
--hm-heat-1#cad9fe / #040939Heatmap, low.
--hm-heat-4#142380 / #a2bcffHeatmap, most.