Brand system · v1 · 2026
expanseElectronics
The brand at a glance — logo, colour, typography, and the tokens that hold the look together. Pulled from the device-admin SPA we ship with our hardware: industrial dark, mono-labelled, no-nonsense.
01 · Logo
One mark,
two halves.
The wordmark sets expanse in body weight and Electronics in the brand orange. The split is load-bearing — never set both halves in the same colour, and never invert the split.
DO
Keep at least the height of the "e" in clear space around the wordmark. Place on the page background, surface grey, white, or the brand orange.
NO
Don't recolour, outline, drop-shadow, italicise, or set the two halves in the same colour. Don't put the wordmark on a busy photograph without a solid plate behind it.
NO
Don't pair with rounded pills or soft shadows — the brand reads as instrument-panel, not consumer-app.
02 · Colour
Dark canvas. One orange that does the talking.
The system runs on a warm-dark base and a single brand orange. Status colours sit on top — used in dots, borders, and small accents only. Click a swatch to copy its hex.
// Brand
// Surfaces & greys
// Text
// Status
// Indicators
The device status LED and its on-screen mirror in the node web UI. These are hardware-signal colours — they live on the products. The /new/ design system pulls them in as per-section accents to break up the all-orange palette; otherwise don't reach for them in print work.
03 · Typography
Mono for data and chrome. Sans for prose.
Headings, labels, eyebrows, code, status — anything that's "data-shaped" — sit in --mono. Body copy and longform sit in --sans. We never load a webfont; both stacks are system-only so the site renders instantly with no FOUT.
// --mono
ui-monospace, 'Cascadia Code', 'Fira Code', 'Courier New', monospace
Cascadia / Fira on capable systems, falling back to the OS UI mono and finally Courier. Used at 10–16px with 0.04–0.18em letter-spacing.
// --sans
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
The OS's UI sans — San Francisco, Segoe UI, or Roboto depending on platform. Used at 14–22px for body and supporting copy.
// Scale
Display
expanseElectronics
--mono · clamp(28px,4.6vw,56px) · 300 · letter-spacing -0.01em · line-height 1.1
H2
Compact tools for theatre.
--mono · clamp(26px,3.2vw,38px) · 300 · max-width 24ch
Kicker
02 · Brand
--mono · 12px · letter-spacing 0.18em · uppercase · cue-accent
Eyebrow
// Newsletter
--mono · 11px · letter-spacing 0.16em · uppercase · cue-accent
Body
Affordable, miniature, theatre products. Compact wired and wireless tools for stage, broadcast and installation.
--sans · 17px · 300 · line-height 1.55 · ink
Data
ORD-2026-0481 · £42.00 · paid
--mono · 13-14px · ink — for IDs, prices, anything tabular
04 · Tokens
Warm glass, soft radii, no hard shadows.
The aesthetic depends on a small set of consistent tokens. Match these on any new component — drift is what makes a site feel generic.
--radius14px (cards, containers)
--radius-sm10px (buttons, inputs, thumbnails)
.glassbackdrop-filter blur(16px) saturate(150%) + 1px border + warm shadow
.glass.warmsurface-2 base + border tinted with current cue-accent
Container.stage = max-width 1100px · 32px gutter (20px on mobile)
Reading width.reading / .narrow = max 680/720px
Section padding56px vertical (section.cue)
--cue-accentper-section variable — defaults to --accent · overridden by .accent-{cyan,pink,blue,signal}
color-mix()used for alpha tints + hover lightening so all accents cascade automatically
DO
One cue accent per section. Hero / 01 / 02 stay orange; later sections pick a single LED-indicator colour. CTAs and the brand mark always anchor in orange.
DO
Use the mono stack as a UI signal. If something is data, an ID, a price, a status — it goes in mono. If it's a sentence, it goes in sans.
NO
No box-shadows beyond the soft warm glow on .glass. No gradients in components. No rounded pills outside chip controls.
NO
No webfonts. System mono + system sans only. We trade typographic personality for instant load and zero CLS — that's the deal.
05 · Components
Two buttons. That's the whole vocabulary.
Primary is the cue-accent fill with black text — so it follows whichever section it sits in. Ghost is the frosted surface with a 1px border, hover-tinted to the section accent. Anything else (link, destructive) is built ad-hoc.
Inputs are sans for natural typing, mono for label. Focus state is a 1px cue-accent border, no glow.
06 · Voice
Plain. Specific. British.
We write the way a working theatre tech talks: short sentences, real specifics, no marketing fluff. Numbers get units. Products get model names. We don't say "solutions" and we don't say "innovate".
DO
"4-port artnet→DMX node, 28 × 18 mm, USB-C powered." Spec-first. The reader is a technician — assume they want the facts, not a story.
DO
British spelling — colour, customise, organisation. Currency is GBP, prices include VAT, dates are ISO (YYYY-MM-DD).
NO
No "revolutionary", "cutting-edge", "next-gen", "best-in-class". If a competitor's marketing page would use the phrase, we don't.
NO
No emoji in body copy. The Pride flag in the footer is the one exception, and it's load-bearing.
// Press & partnerships
Need assets we haven't published?
For higher-resolution logos, product photography, or written approval to use the marks in editorial contexts, email [email protected]. Distributors and resellers should request the partner brand pack — we keep the layered source files off the public site.