Case 06 · Brand identity
A brand that
steps aside.
The identity for Veltrix, our content platform: a gradient V that sits on any ground, one accent for the admin, and a design system whose dark mode redefines what each colour means — because the sites built on Veltrix wear their owners’ brands, not ours.
- 01 // Role
- Identity · Design system · Brand tooling
- 02 // Deliverable
- Mark, tokens and the brand script
- 03 // Year
- 2026
- 04 // In use
- The admin, sign-in and installer
A The brief
A CMS brand has an awkward job: every site built on it belongs to someone else. Veltrix needed an identity strong enough to own the admin — and disciplined enough to stay out of the public sites entirely.
A.2 What it had to do
- 01One mark that works on any ground, light or dark
- 02An admin that looks the same whatever a site’s branding is
- 03A dark mode that stays readable, not just inverted
- 04A logo change that is a file swap, not a hunt through screens
B · The kit
Rules that ship.
The admin’s design system, live in its own tokens and face. Every rule came out of a real defect — try breaking them, then switch the admin to dark.
Veltrix · Design system01 · Inter, sentence case
Publish your first page
Pages save as drafts until you publish them.
Inter for everything; the system monospace for code. Nothing is called “simply” or “just”.
On brand02 · Buttons say what they do
One accent for primary actions, active navigation and focus. Hover goes to brand-strong — the same in both themes.
03 · Dark mode redefines meaning
In the dark admin brand-700 becomes a pale blue for text. Keeping its light value left the active item at 1.96:1.
04 · One focus treatment
A 2px brand outline, 2px offset, defined once — no component overrides it. The required star sits outside the label.
On brandC · Identity system
From idea to identity.
The V on its construction grid, its gradient and the type. Its dividing lines are transparent, so one mark sits on any ground — pick one to see it.
Colour
Typography
Aa Display
Aa Text — Inter
Aa Code — system monospace
D · The rules
Six rules, no exceptions.
- 01One accent
- The brand blue is for primary actions, active navigation and focus — and nothing else in the admin.
- 02Dark mode redefines meaning
- Tokens swap ends in the dark admin, so a text colour stays a text colour. Contrast is tested in both themes.
- 03One focus treatment
- A 2px brand outline with a 2px offset, defined once. No component overrides it.
- 04Sentence case, plain words
- Buttons say what they do. Errors say what happened and what to do next. Nothing is “simply” or “just”.
- 05The admin is ours, the site is theirs
- No theme carries the mark and no public footer says what the site runs on.
- 06Colours in oklch
- Lightness stays perceptually even across hues, so danger and success carry the same visual weight.
E · Engineering
How it’s built.
- 01
Two files, one command
The designer’s two lockups go in; pnpm brand writes the mark, both lockups for light and dark grounds, the icons and their sizes.
- 02
It refuses bad output
The script measures each lockup against the ground it lands on and won’t write one that would be unreadable.
- 03
Sizes are checked
No component carries an aspect ratio; pnpm check fails if the committed sizes and the images disagree.
- 04
WebP, not PNG
The gradient is half a megabyte as PNG and a twentieth of that as WebP, transparency intact.
Stack
F · Impact
By the numbers.
- 1
- Accent in the admin
- 2
- Source files for every brand asset
- 8
- Assets generated by one command
- 0
- Marks on the sites people build