Designing the Cubie Interface: One Dark Theme, Nine Products

Nine products that look unrelated should still feel like they came from the same place. That is mostly a design-system problem, and the system behind Cubie is smaller than people expect.

The decisions that do the work

One accent, used sparingly

Violet, in a narrow range. It appears on primary actions, active states, and links — and almost nowhere else. The restraint is the point: when the accent shows up everywhere, it stops signalling anything. When it appears only on the thing you should click next, the interface explains itself.

Depth from layering, not borders

The background is near-black. Surfaces sit above it as barely-lighter panels with a one-pixel translucent border. Nothing has a heavy outline. On a dark interface, a two-pixel white border reads as loud, while a five percent white fill reads as a card without shouting.

Two typefaces, clear jobs

A geometric sans for headings and interface labels, a neutral sans for body text. Headings get tighter letter-spacing as they get larger, which is the single easiest way to make big type look intentional rather than merely big.

Colour for status, not decoration

Product status is the one place we allow colour beyond violet, and each colour means exactly one thing across every page:

• Green — live, shipped, done
• Blue — in development
• Orange — coming soon, in progress
• Pink — experimental

Because those meanings never shift, a green dot is readable before you have read the label next to it.

Spacing on a scale

Every gap is a multiple of the same base value. It sounds pedantic and it is the difference between a layout that feels composed and one that feels assembled. When spacing is arbitrary, the eye notices even if the viewer cannot say why.

Consistency is not a style. It is what lets someone use a product they have never opened before and still know where to look.

Icons drawn, not imported

Every icon across the site is inline SVG on a shared grid with a shared stroke weight. No icon font, no image requests. It keeps weight down, it means icons inherit text colour automatically, and it guarantees the chart icon in one product matches the chart icon in another.

Motion with a budget

Transitions are short and almost always the same two properties: a small translate and a border colour. Cards lift a few pixels on hover; nothing spins, bounces or slides in from off-screen. Animation that draws attention to itself is animation that gets in the way the second time you see it.