Hivemind Design System

The foundations and components behind every Hivemind surface: ink and paper, cobalt for structure and honey for the voice, with rules that keep every voice anonymous.

Principles

Equal voices. Equal dots, equal spacing, no hierarchy between people.
No names, by design. No surface can show who said what, not even to the host.
Components, then patterns. Components are the parts: buttons, bars, quotes. Patterns are what they build: the readout and its pieces, the team profile. Every pattern page lists its parts.
Synthesis, not transcript. Themes are counted; a quote is one short line, cleaned of anything that identifies the speaker and shown to them before they send.
Quiet until it counts. Ink and paper everywhere, cobalt for structure; honey only where the room is live or being heard.

Every value on these pages is generated from the system’s own tokens.json. It’s a concept system: rendered live in React, with no shipped product behind it. Why it exists →

About

Design review

What changed across four passes: the finish, the product, then where it lives and its colour.

Foundations

Colour	Honey and cobalt: honey is the voice, cobalt the structure, on OKLCH ramps behind every semantic colour.
Typography	Geist in three registers: Interface, Stage for the shared screen, and Numerals for numbers that change.
Iconography	Thirty-eight glyphs drawn for Hivemind, outline and solid, with the mark’s cell for its own ideas.
Spacing and shape	A 4px spacing grid, six radii, and the fixed sizes every surface is laid out with.
Motion	Motion explains a change of state. There is one loop and one orchestrated moment.
Logo	A seven-cell comb: six equal voices around one shared mind, with a Geist Semibold wordmark.

Actions

Button	Starts an action. Primary is cobalt on paper and paper on ink; there is deliberately no honey button.
Dialog	A short decision inside a device frame, like the laptop mute check.

Inputs and status

Text field	A labelled box for typed answers and the host’s question.
Tabs	One choice from two to five visible options, like the round length.
Select	One choice from a list whose options each need a line of explanation, like the round length.
Switch	An on/off setting that applies at once, like letting the readout quote your line.
Transcript	Your answer as words you can take out but never rewrite, before you send it.
Badge and live tag	A short label. The live tag is the only badge in honey, and it always says Live.
Toast	A brief confirmation of something that happened off screen.
Room code and QR	How people join a hive: scan, or type six characters. Neither asks for a name.

Voice

Record button	A honey circle you press to answer out loud. While it listens, the mark’s cell ripples outward.
Voice row	The room as equal dots, filled by count and never by person.
Timer	The round countdown, in Geist with tabular figures, announced twice rather than every second.

Data

Bar and split	One share of a whole, or two shares side by side: the smallest data pieces in the readout.
Quote	One short line in someone’s own words, cleaned of anything that points to them.
Stat tile	One headline count on the console, with an optional sparkline and a line of context.
Agreement trend	A weekly line of agreement across hives: the console’s one highlighted series.
Charts	Columns, ranked bars, splits and a heatmap, drawn in ink and greys with one shared mark spec.

Patterns

Readout	The room’s own thinking, given back: themes with quotes, tensions, lone ideas, questions and an agenda.
Themes and quotes	What most people said, counted, each with one anonymous line in someone’s own words.
Ideas and tensions	Where the room pulls apart, what only one person raised, and what nobody has answered.
Agenda and live context	The readout as the rest of the meeting, and what Hivemind brings back while each item is discussed.
Team profile	How a team decides over weeks: six measures, aggregate only, never filtered to a person.