Bar and split
One share of a whole, or two shares side by side: the smallest data pieces in the readout.
Concept · live ReactSource file: tokens.jsonReact component: Bar, Split
Try it
<Bar value={6} of={10} />
When to use
- Bar: one share of a whole, with the count written beside it: “6 of 10”.
- Split: two positions, side by side, with both counts named.
Don’t use it
- On its own, without the number. The bar shows the shape; the text is the value.
- More than two sides in a Split. Three positions are a list.
Sizes
Three heights: 6 inside dense lists, 8 by default, 10 on the phone and the stage.
Tones
Cobalt by default. Honey only for the most shared theme or the live item: the room’s voice, spent sparingly.
Accessibility
- Both are hidden from screen readers. The count beside them is the value, so nothing is lost.
- A Split’s sides differ in lightness as well as hue, and each fill holds 3:1 against its track.
Props
| Prop | Type | Default | Description |
|---|
| Bar · value / of | number | — | The share: value of of. Clamped to the whole. |
| Bar · tone | 'common' | 'live' | 'common' | Cobalt, or honey for the one that matters most. |
| Split · a / b | number | — | The two sides. |
| size | 'sm' | 'md' | 'lg' | 'md' | 6, 8 or 10px. |
| shown | boolean | true | False draws it empty, so it can fill on first view. |
Tokens
| Token | Value | Where it lands |
|---|
| --hm-chart-common | #2d49c9 / #6489fe | Theme bars in a readout: the hero cobalt. |
| --hm-live | #f2b106 / #ffc550 | Alias of accent. Anything that means the hive is listening right now: the record button, the live dot, the round timer while it runs. |
| --hm-chart-agree | #2d49c9 / #6489fe | The hero series as a fill or dot: cobalt, the strongest step in each theme. |
| --hm-chart-b | #6489fe / #cad9fe | The second series, or the other side of a split: a lighter cobalt on paper, a deeper one on ink. |
| --hm-voice-dot | #d2d0da / #434851 | An empty seat. Quiet on purpose; the count beside it carries the number. |
Quote
One short line in someone’s own words, cleaned of anything that points to them.
Concept · live ReactSource file: tokens.jsonReact component: Quote
Example
Half our trials never finish setup.
light
We keep shipping features on top of bugs.
dark
When to use
- Under a theme or a lone idea: the room’s own words, as evidence for the claim above it.
Don’t use it
- For anything Hivemind wrote. A quote is only ever what someone said.
- In a room under four voices, or when only one person could have said it.
Content
- Under twenty words. Cleaned of names, roles and verbal tics; shown to the speaker before they send.
- No quote marks in the copy: the component adds them.
Accessibility
- A real
<q> element, so it is read as a quotation and the marks come from the browser. - Text is
text-muted, 6.7:1 on paper; the cobalt edge is decoration.
Props
| Prop | Type | Default | Description |
|---|
| children | ReactNode | — | The line, without quote marks. |
| className | string | 'hm-t-body-sm' | A type style: body-sm in lists, stage-meta on the shared screen. |
Tokens
| Token | Value | Where it lands |
|---|
| --hm-text-muted | #5b5869 / #9b9fa5 | Secondary text: descriptions, helper text, metadata. Reads on every ground including surface-hover. |
| --hm-chart-b | #6489fe / #cad9fe | The second series, or the other side of a split: a lighter cobalt on paper, a deeper one on ink. |
Stat tile
One headline count on the console, with an optional sparkline and a line of context.
Concept · live ReactSource file: tokens.jsonReact component: StatTile, Sparkline
Example
Median to readout87s
question to readout Lone signalsideas raised by one voice When to use
- For a headline count at the top of Insights. Three is usually right; five is the most a row holds.
- Counts, not rates, unless the figure covers at least 20 voices.
- The sparkline is cobalt, like every series on the console.
Don’t use it
- Honey in a tile. Nothing on the console is live.
- A tile for a number nobody acts on. The tile that matters most, voices added, should not sit among four that don’t.
Accessibility
- Read in order: label, value, then the line of context, “Hives run, 48, across 5 teams”.
- The sparkline and the delta arrow are hidden from screen readers. The delta’s text says the direction, so the arrow is never the only signal.
- The tile is not interactive. If it opens a view, the whole tile becomes one link named by its label.
Props
| Prop | Type | Default | Description |
|---|
| label | string | — | Sentence case, no colon. |
| value | string | — | Already formatted: 1,284 or 87s. |
| sub | string | — | One line of context. |
| spark | number[] | — | Optional series; the last point is marked. |
| delta | { text; dir: 'up' | 'down' | 'flat' } | — | Change against the last period, in words, with an arrow. |
Tokens
| Token | Value | Where it lands |
|---|
| --hm-surface | #ffffff / #1c2129 | Cards and panels. Lifted from bg by shadow-card, not by a heavy border. |
| --hm-border | #e6e5eb / #2d323b | Hairlines between rows and inside cards. Decorative only. |
| --hm-chart-agree | #2d49c9 / #6489fe | The hero series as a fill or dot: cobalt, the strongest step in each theme. |
| --hm-chart-agree-line | #1c2dad / #cad9fe | The hero series drawn as a line. |
| --hm-text | #141318 / #ebedef | Primary text. Light: graphite #141318 on paper, softer than black on white. |
| --hm-text-muted | #5b5869 / #9b9fa5 | Secondary text: descriptions, helper text, metadata. Reads on every ground including surface-hover. |
Agreement trend
A weekly line of agreement across hives: the console’s one highlighted series.
Concept · live ReactSource file: tokens.jsonReact component: AgreementTrend
Example
Hover for the week. Weeks under 20 voices leave a gap instead of a rate.
When to use
- To show whether teams are converging over time, across hives.
Don’t use it
- For one hive. Show its readout instead.
- Per team below 20 voices a week.
Accessibility
- The chart is one image named with its latest value: “Agreement by week; latest”, then the figure.
- A gap is drawn as a gap and read as “no data”, never as zero.
- Inside a
ChartCard it gets the table view: the same weeks as rows, which is what a screen reader should use.
Rules
- Agreement is the share of voices in each round’s top theme, summed across the week.
- A 2px
chart-agree line over a chart-agree-wash area, on 1px chart-grid lines. - Label only the last point. One series, so no legend box: the title names it.
- Pair it with a table view of the same numbers.
Props
| Prop | Type | Default | Description |
|---|
| data | { label: string; value: number | null; voices: number }[] | — | One point per week. null below the rate threshold. |
| height | number | 220 | Plot height in px. |
Tokens
| Token | Value | Where it lands |
|---|
| --hm-chart-agree | #2d49c9 / #6489fe | The hero series as a fill or dot: cobalt, the strongest step in each theme. |
| --hm-chart-agree-wash | #e5edff / #040939 | Area fill under the hero line. |
| --hm-chart-grid | #e6e5eb / #2d323b | Console charts: 1px solid gridlines and axis rules. Recessive by design. |
| --hm-border-control | #7c798a / #7c8088 | Outlines of inputs and secondary controls. Holds 3:1 on bg and surface. |
| --hm-text-muted | #5b5869 / #9b9fa5 | Secondary text: descriptions, helper text, metadata. Reads on every ground including surface-hover. |
Charts
Columns, ranked bars, splits and a heatmap, drawn in ink and greys with one shared mark spec.
Concept · live ReactSource file: tokens.jsonReact component: ColumnChart, HBarList, SplitDiverging, ActivityHeatmap, ChartCard
When to use
- Columns for a count over time. Ranked bars for which themes recur. Diverging bars for a split. The heatmap for when rounds happen.
- One chart per question, titled with the question it answers.
Don’t use it
- Pie and donut charts: shares are easier to compare on one line.
- A second colour where lightness would do.
Columns
A count per period. Bars at most 24px, rounded at the data end, square at the baseline. Only the latest value is labelled.
Ranked bars
Themes that recur, counted in hives rather than voices, so one loud hive can’t dominate.
Scope keeps growing mid-sprint17 hives
Onboarding loses people at setup17 hives
Too many meetings14 hives
Fix what’s broken before building more14 hives
Unclear priorities from leadership10 hives
Splits
One side cobalt, the other its lighter step. With a legend and direct labels, so colour is never the only key.
First optionSecond option
Heatmap
Magnitude across a grid, on the one-gray heat-0 to heat-4 ramp. Never honey: a busy hour isn't a live one.
FewerMore
Mark spec
- Lines 2px. End dots at least 8px, with a 2px
surface ring. - Gridlines 1px solid
chart-grid. Axis text in text-muted. - Values and labels in text tokens, never in a series colour.
- Every chart has a hover and focus tooltip and a table view.
Accessibility
- Every chart is an image with a one-sentence description, passed as
describe. - Each bar or point is a focus stop: Tab reaches it, and focus shows the same tooltip as hover.
- In a
ChartCard, a button switches the chart for a table of the same numbers. It is the screen-reader path and the precise one. - Series differ in lightness as well as hue, and splits carry direct labels, so no chart relies on colour alone (1.4.1).
Counts and rates
- A round is always a count: “5 of 7 voices”.
- A rate only for an aggregate of 20 voices or more.
Don’t use it
- Any view, filter or export that breaks an answer down by person.
| Token | Value | Where it lands |
|---|
| --hm-chart-ink | #4163e4 / #6489fe | Single-series bars and columns: mid cobalt. |
| --hm-chart-muted | #a7a4b3 / #5f636b | Console charts: de-emphasised marks only — sparklines and secondary segments. Never text. |
| --hm-chart-grid | #e6e5eb / #2d323b | Console charts: 1px solid gridlines and axis rules. Recessive by design. |
| --hm-heat-0 | #f4f7fe / #1c2129 | Heatmap, none. |
| --hm-heat-4 | #142380 / #a2bcff | Heatmap, most. |
