Foundations

Themes

Light is the workspace: the host panel and the console. Dark is the stage and the brand: the shared screen, the phone during a round, the join screen. A surface gets its theme from what it is, never from the OS.

Ramps

Seven primitive ramps, generated in OKLCH by scripts/hivemind-ramps.mjs. Every hue shares one lightness ladder, so step 600 of any ramp sits at the same lightness, and each step takes the most saturated colour that fits in sRGB. Product UI never uses a ramp directly; it goes through a semantic token.

Semantic tokens

Every semantic colour is an alias of a ramp step, chosen per theme. A theme can take a different step of the same ramp, or a different ramp: honey is a fill in both themes, but where the hero series is drawn as a line, paper gets ink and the dark theme gets honey. Each text token holds 4.5:1 on the grounds its usage note names; the ramp script checks every pair and fails the build if one drops.

Honey and cobalt

Two brand hues, each with a job. Honey is the voice; cobalt is the structure and the counterpoint. On paper the brand is cobalt with honey in it: the comb’s cells, the primary button, chart lines and focus are cobalt, and honey is the centre cell and the fills. On ink, the comb turns paper and honey carries the lines. Honey against cobalt is warm against cool and light against dark, so the two sides of a split hold apart for every kind of colour vision.

Honey: fill bright, draw ink

Honey is only ever a fill, a glow or a dot, and it always carries ink. On paper it never becomes a line or a word, because a honey dark enough to hold contrast on white turns brown. Lines and emphasis there are ink, with a honey highlighter under the words that matter.

Status

Each status is a family of four from one ramp: a bright mark for the icon or dot, a darker text step that holds 4.5:1, a subtle ground and a border. The mark carries the colour; the words stay readable.

Chart colours

The chart order is the palette: honey for the first side, the hero fill and conditions, cobalt for the second side and for lines on paper, then ink and greys. The heat ramp is one gray, light to dark.

Interface

For the console, the host panel and phones. Weights 400, 500 and 600 only.

Stage

Only on the shared screen, designed at 1280×720 so it survives screen-share compression. Nothing on stage is smaller than stage-meta.

Numerals

Geist with tabular figures, for numbers that change: the timer, the room code, counts. Every digit takes the same width, so nothing jitters, without a monospace face.

Rules

The set

Thirty-eight glyphs, drawn for Hivemind: outline for the interface, solid for the few places an icon leads a line. Every surface Hivemind owns uses them; Lucide stays only in the generic call chrome, which stands in for someone else’s product.

Construction

A 24-unit square with 2 units of clear space, so the live area is 20. One stroke, round caps and round joins, and corners rounded at about a quarter of their edge. Where a glyph stands for a Hivemind idea (a hive, a status, help, settings) it is built on the mark’s own cell, the rounded flat-top hexagon.

Sizes

Three sizes, one weight. Below 16 the hexagon glyphs lose their corners, so 16 is the floor.

When to use

Accessibility

Props

Spacing

A 4px grid. Use the steps, not values in between.

Radius

Controls at radius-md, cards at radius-lg, sheets at radius-xl. Every voice is a full circle.

Sizes

Elevation

Separate with borders, not shadows. Only things that float get shadow-overlay.

Durations

Listening

While a round runs, the record button scales 1 to 1.06 and back. It is the only looping animation in the product.

The reveal

When a readout appears, the room’s voices drift into the centre dot, then the headline and sections fade in, 80ms apart. It is the one orchestrated moment.

Reduced motion

Construction

A seven-cell comb on a 64-unit square: flat-top hexagons of radius 9.6, corners rounded at 20% of the edge, with a 2.4-unit gutter. Six identical cells are the voices; the centre cell is the shared mind and the only one that may turn honey.

Lockups

The wordmark is Geist Semibold at −0.045em, outlined to a path. The comb is 1.55× the cap height, with half a cap of space between them. Hivemind is one word with a capital H.

App tile

The comb on a cobalt squircle, lit from above, and flat: an app icon carries no shadow of its own. For the app icon, favicons and anywhere the mark needs its own ground.

Usage