Case 04 · Brand identity
An instrument,
not a brochure.
The identity for JOVION, our AI website agent: copper on near-black, hairline panels with copper corner ticks and ultra-wide engineered type — codified as a design kit that the product, the plugin and the website all build from.
- 01 // Role
- Strategy · Identity · Design system
- 02 // Deliverable
- Design kit — tokens and rules
- 03 // Year
- 2026
- 04 // In use
- jovionwp.com · the plugin admin
A The brief
AI products tend to look alike — soft gradients, rounded cards, a friendly glow. That undercuts a tool that asks for permission to change a live website. JOVION had to look precise and accountable before anyone read a word.
A.2 What it had to do
- 01Borrow the visual grammar of aviation and lab instruments
- 02One accent, used so sparingly that every use means something
- 03A type system where each face has exactly one job
- 04Rules precise enough for a machine to apply — JOVION included
B · The kit
Rules, not mood boards.
Every decision in the identity is a rule with a reason. Try them: press the button, change the corners, switch the mode.
01 // Type — three faces, three jobs
On autopilot.
Archivo 800 · 125% wide displays
JOVION is your AI website agent, built into WordPress — one that understands your website and acts on your command.
Inter reads
100+ abilities // ready · WordPress // connected
IBM Plex Mono labels
02 // Buttons — keyline first
Press and hold. The keyline fills solid copper with a dark label — the only time copper fills anything, so it always reads as a change of state.
03 // Corners — ticks, not shadows
Edit Elementor elements by id READY
Verify and snapshot before editing READY
On brand04 // Colour — one accent
- Copper
#CA8459Keylines, ticks, labels — the only accent - Bright copper
#FABA8EButton labels and highlights on dark - Copper on light
#9C5228The same accent, tuned for white - Canvas
#030303The near-black field - Ink
#EDE8E3Headings and primary text - Online
#00C853“Online” — and nothing else
C · Identity system
From idea to identity.
The mark on its construction grid, the palette and the three faces — one file the product site, the plugin admin and the product itself all build from. Pick a colour to see the mark in it.
Colour
Typography
Aa Display
Aa Text — Inter
Aa Label — IBM Plex Mono
D · The rules
Six rules, no exceptions.
- 01Copper is the only accent
- Used as a keyline, a tick or a label — never as decoration — so a solid copper fill always means a change of state.
- 02Green means online
- One status colour with one job. It never appears for anything else.
- 03Three faces, three jobs
- Archivo displays, Inter reads, IBM Plex Mono labels. No face crosses into another’s role.
- 04Square by default
- Curves are reserved and meaningful: pills for status, circles for dots, a soft radius for media only.
- 05Ticks, not shadows
- 14px copper corner brackets mark a panel where other brands would reach for drop shadows and rounded corners.
- 06Buttons that change state
- Keyline first — then a full copper fill with a dark label on press. The interface feels like a switch, not a link.
E · Engineering
How it’s built.
- 01
The kit is code
One machine-readable file holds colour, type, radius, spacing and component tokens — each with the reasoning behind it.
- 02
Applied by the product
JOVION’s own Design System feature can load the kit, so the brand that sells the product is something the product can enforce.
- 03
Two modes, one structure
Light mode keeps every rule and swaps in deeper copper values tuned for contrast on white.
- 04
No stray requests
The plugin bundles its fonts, so the brand inside wp-admin never calls out to a third party.
Stack
F · Impact
By the numbers.
- 1
- Brand accent — copper, nothing else
- 3
- Typefaces, one job each
- 0px
- Default corner radius
- 2
- Modes from one set of rules