Record button

A honey circle you press to answer out loud. While it listens, the mark’s cell ripples outward.

Concept · live Reacttokens.jsonRecordButton

Try it

Press it to start and stop listening.

Theme

Size

<RecordButton live={listening} size={96} onClick={toggle} />

When to use

On the phone, centred in the lower third, within thumb reach. 96px.
On a laptop, beside the text box, after the mute check. 64px.
Always with words beside it: “Listening. Tap to stop.” and the timer above.

Don’t use it

On the stage or the console. Nobody records there.
As a general-purpose button. The comb means one thing: your voice.

States

A honey circle with the microphone. Live, the mic becomes a stop square and the mark’s cell ripples outward three times, your voice going into the room. Under reduced motion one ripple holds still.

idle

live

laptop · 64

Accessibility

Key	What it does
Enter / Space	Starts or stops recording.
Tab	Moves focus to the button; focus draws the focus ring round the circle.

The accessible name follows the state: “Start recording” or “Stop recording”, and aria-pressed carries it too.
Honey alone never means live. The word or the running timer is always beside it.

Props

Prop	Type	Default	Description
live	boolean	—	Listening. Fills with live and starts the breath.
onClick	() => void	—	Start or stop. The consumer owns the recording.
size	number	96	Diameter in px. 96 on phones, 64 on laptops.
label	string	—	Overrides the state-driven accessible name.

Tokens

Token	Value	Where it lands
--hm-accent	#f2b106 / #ffc550	Primary, honey. A fill, glow or dot only, always carrying ink: live, the record comb, the shared mind, the hero series.
--hm-accent-hover	#cb9400 / #ffd68b	Hover and pressed state of a honey fill.
--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-on-accent	#141318 / #0b0e15	Ink on a honey fill. Honey never carries white.
--hm-voice-dot	#d2d0da / #434851	An empty seat. Quiet on purpose; the count beside it carries the number.
--hm-focus-ring	#2d49c9 / #ffc550	Keyboard focus: cobalt on paper, honey on ink, 2px outside a 2px bg gap.
--hm-record-button	96px	The circle, and the tap target; ripples reach about 1.7× it
ripple	2.4s, three offset by 0.8s	While listening

Voice row

The room as equal dots, filled by count and never by person.

Concept · live Reacttokens.jsonVoiceRow, VoiceDot

Try it

Watch the dots fill by count. Switch the mode to see joined people in cobalt.

0 of 7 voices in

Mode

Seats

Size

<VoiceRow mode="answered" total={7} filled={voicesIn} size={20} />

When to use

Wherever the room is shown: the join screen, a live round, the host panel, a hive’s detail page.
Always with the count in words beside it: “5 of 7 voices in”.

Don’t use it

To show who answered. The row never receives identities, and dots never light by person.
With avatars, initials or a colour per person.

Modes

Joined people are cobalt, the structure, because nothing is live yet. Answered voices are honey, because a voice coming in is the room being heard.

joined · lobby

answered · round

Sizes

28 · stage

20 · join screen

12 · phone and panel

Accessibility

The row is one image with a label, “5 of 7 voices in”. Screen readers hear the count, not seven dots.
Joined and answered differ in lightness as well as hue, so the difference survives without colour.

Props

Prop	Type	Default	Description
total	number	—	Seats in the room.
filled	number	—	How many are filled, counted from the left.
mode	'answered' \| 'joined'	'answered'	Honey for voices in, cobalt for people present.
size	number	14	Dot diameter in px.
gap	number	10	Space between dots in px.
label	string	—	Overrides the spoken count.

Tokens

Token	Value	Where it lands
--hm-voice-dot	#d2d0da / #434851	An empty seat. Quiet on purpose; the count beside it carries the number.
--hm-voice-dot-active	#f2b106 / #ffc550	Alias of accent. A voice dot whose answer is in.
--hm-text	#141318 / #ebedef	Primary text. Light: graphite #141318 on paper, softer than black on white.

Timer

The round countdown, in Geist with tabular figures, announced twice rather than every second.

Concept · live Reacttokens.jsonTimer

Try it

Round

Theme

<Timer seconds={secondsLeft} total={60} />

When to use

Above the record button on the phone, top right on the laptop, bottom right on stage.
In live on stage and while recording; in text otherwise.

Don’t use it

As a progress bar or a ring. A number is easier to read on a shared screen.

States

Two states, and neither is red. Running, the digits are live. From ten seconds left the number stays the same colour and the surface around it changes: the line under it turns to ink at weight 600 with a honey dot, and says what happens next. A countdown that turns red reads as an error; this one is a reminder.

0:47 left · locked once sentrunning

0:08 left · send now, or it’s droppedclosing · under 10s

Sizes

stage · 88

timer · 64

count · 20

Accessibility

The digits are hidden from screen readers. A polite live region says “Round started” once and “10 seconds left” once, rather than every second.

Props

Prop	Type	Default	Description
seconds	number	—	Seconds left. Rounded up, shown as m:ss.
total	number	—	Round length, so the start can be announced.
className	string	'hm-t-timer'	A Numerals style.

Tokens

Token	Value	Where it lands
.hm-t-timer	64/64 · 500 · −0.02em · tabular	The phone and laptop timer
.hm-t-count	20/24 · 500 · tabular	Inline counts beside a timer
--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-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.