RegusAI · Brand book · v1
Black, white,
and the work
The mark is six white spokes radiating from a centre, and the field behind every page animates outward from its centre in exactly that pattern — the logo is that field at rest. The interface is black and white with no accent hue at all, which means the creator's own footage is the only colour in the product. Every rule below follows from that.
Colour
One neutral ground, one brand accent, and colour that only ever means state.
The ground is a true neutral. Not blue-black, not warm-black. Creator thumbnails are full of skin tones, and a tinted ground makes them look wrong.
Ground & surfaces
Ink — contrast measured against the page, not guessed
Every ink clears WCAG AA (4.5:1)on the page ground. There is no fourth, fainter grey — if text needs to be quieter than ink-3, it probably shouldn't be on the screen.
Brand
White is the loudest thing available, so it is spent like gold used to be: one primary action per view. Never a gradient fill, never a glow. With no accent hue in the system there is nothing left to misuse — which is the point of removing it.
Signal — these report what the system is doing, and never decorate
Type
Three voices, each with one job. No fourth voice.
Display — Archivo
Headlines only. Set tight (-0.035em) and heavy. Never below 20px.
Ship viral shorts
Body & UI — Instrument Sans
Everything a person reads or clicks. Drawn for interfaces: tall x-height, open apertures, holds at 12px.
Faceless videos, character explainers and auto-clipped podcasts.
Data — JetBrains Mono
Timecodes, credits, view counts, durations. Always tabular so columns align.
00:14 · 1,284 views · 5 cr
Video work is full of numbers that must line up. Anything countable is set in the data voice with tabular-nums— that's native to the craft, not a decoration.
Scale
Hero
Page title
Section
Body — 16px, the default
Secondary — 14px
Caption — 12px, the floor
The field
The signature, and the reason the whole system is monochrome: the mark and the background are the same idea.
Six spokes radiate from the centre of the logo. The dot field behind every page radiates from the centre of the screen, on the same geometry. The logo is the field at rest. It is mounted once at the app root — one WebGL context for the entire product, never per component — and it is the only texture the interface gets.
It is a background and must behave like one: pointer-events: none, capped device pixel ratio, and a static CSS grid substituted whenever someone asks for reduced motion. The static grid also paints underneath at all times, so a failed GL context degrades to a still field rather than to an empty black page.
Secondary device — the viewfinder
Corner brackets from a camera's framing guides, for the one thing on a page you want looked at first. Use it once per view — a page with three viewfinders has none.
Components
Built from the tokens above. Nothing here holds a raw colour value.
Buttons
| Component | Default | Hover | Active | Disabled |
|---|---|---|---|---|
| Primary | brand | brand-hover | scale .98 | 40% opacity |
| Ghost | transparent | white 5% | scale .98 | 40% opacity |
Card
Resting
Hairline border, lit top edge.
Hover me
Lifts 2px, hairline brightens. No glow.
Input
Motion
Motion explains what changed. It never performs.
- 120ms — anything under a finger: buttons, toggles, hovers.
- 200ms — things that move or reveal on the page.
- 380ms — a full panel or modal arriving.
- ease-out — the only curve for entrances, so things decelerate into place.
prefers-reduced-motion is honoured globally. Nothing in the product depends on animation to be understood.
Voice
Words are design material. Same intent as spacing and colour.
Submit
Publish
Say what happens. And keep the same word through the whole flow — the button that says Publish produces a toast that says Published.
Oops! Something went wrong 😅
That render failed — your 5 credits were refunded.
Errors don't apologise and are never vague. Say what happened and what it means for them.
No data available
Nothing here yet. Run any tool and the finished file shows up.
An empty screen is an invitation to act, not a status report.
Configure webhook endpoint
Choose where posts go
Name things by what people control, never by how it's built.
Don't
The specific mistakes that made the old interface look generated.
- Gradient-filled buttons, sheen sweeps or coloured drop-glows.
- Two pure-white fills competing in one view.
- Coloured halos on cards. They fight the thumbnails inside them.
- Decorative 01 / 02 / 03 numbering where the content isn't a sequence.
- A fourth typeface, or the display face below 20px.
- Saturated colour anywhere except a state pill.