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.
// 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.
Wordmark
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.
Keep at least the height of the “e” in clear space around the wordmark. Place on `--bg` (#090909), `--surface` (#111), white, or the brand orange.
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.
Don't pair with rounded pills or soft shadows — the brand reads as instrument-panel, not consumer-app.
Palette
The system runs on five greys 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.
Two stacks, one role each
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–13px with 0.04–0.12em 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 13–22px, line-height 1.2–1.5.
Mission
Affordable, miniature, theatre products. Compact wired and wireless tools for stage, broadcast and installation.
Shape
The aesthetic depends on a small set of consistent tokens. Match these on any new component — drift is what makes a site feel generic.
One stripe of orange per section, max. Either the section title's accent line, or a left-border on a card, or the button. Stacking them is loud and lazy.
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 box-shadows, no gradients, no rounded pills. The interface should look like a piece of equipment, not a SaaS landing page.
No webfonts. System mono + system sans only. We trade typographic personality for instant load and zero CLS — that's the deal.
Buttons & inputs
Primary is the brand orange with black text. Secondary is `surface2` with a border. Anything else (ghost, link, destructive) is built ad-hoc per page — by design, we don't have a third standard button.
Form field
Inputs are mono — they hold data, not prose. Focus state is a 1px accent border, no glow.
How we write
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".
"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.
British spelling — colour, customise, organisation. Currency is GBP, prices include VAT, dates are ISO (YYYY-MM-DD).
No "revolutionary", "cutting-edge", "next-gen", "best-in-class". If a competitor's marketing page would use the phrase, we don't.
No emoji in body copy. The Pride flag in the footer is the one exception, and it's load-bearing.
Press / partnerships
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.