Case 07 · JOVION feature
Declare it once.
Build with it everywhere.
Design System is the JOVION Pro feature that gives WordPress a single source of truth: colours, type and spacing declared in one place, audited against the live page, published into the page builder’s own globals — and applied every time the agent builds.
- 01 // Role
- Feature design · Engineering
- 02 // Product
- JOVION Pro — WordPress plugin
- 03 // Builders
- Elementor v3 + v4 · Bricks
- 04 // Status
- Shipping in JOVION Pro
A The brief
Page builders make it easy to set a colour or a font size by hand — so every page drifts a little. Brand colours become near-misses, headings change size from page to page, and an AI that builds pages quickly only makes the drift arrive faster.
A.2 What it had to do
- 01One place to declare the brand: colours, type and spacing
- 02Show exactly where a page drifts — field by field
- 03Link to the builder’s own globals, not hard-coded values
- 04Never write to a page without a snapshot and a safety check
B · Audit and apply
Drift, found. Then fixed.
The audit reads a page’s headings, paragraphs and buttons against the system on five fields. Apply it, and the section is rebuilt on the tokens — bound to Elementor or Bricks globals. Run it, or switch builder.
Colours 8
- primary
- secondary
- accent
- text
- heading
- bg
- link
- border
Typography 8 levels
- H1Archivo 800 · 48 / 1.05
- H2Archivo 800 · 36 / 1.1
- BodyInter 400 · 17 / 1.6
- ButtonPlex Mono 500 · 13 · upper
Spacing xs – xl
- xs
- s
- m
- l
- xl
Studio · 2026
Your website, on autopilot.
Every page built from the same colours, type and spacing — declared once, used everywhere.
Get started- ≠Heading · size
44px→ 48 · H1 - ≠Heading · weight
600→ 800 · H1 - ≠Paragraph · line height
1.35→ 1.6 · Body - ≠Button · colour
#E0703A→ primary
4 fields drifting · 5 checked per element
C · Capabilities
What it does.
- 01Six token groups
- Eight named colours, eight type levels from H1 to button, a five-step spacing scale, layout widths and borders — with tablet and mobile sizes.
- 02Detect, don’t retype
- Reads the Elementor kit, theme.json and Bricks to fill blank tokens — never overwriting anything the admin has already set.
- 03DESIGN.md import
- Bring a design file in the open DESIGN.md format, or start from one of six bundled presets, then review before saving.
- 04Five-field audit
- Font family, size, weight, line height and colour — expected against found, with a drift count. Inherited values are never counted as drift.
- 05Publish to globals
- Declared colours are pushed into the builder’s global palette, and their ids recorded so later pages link to them.
- 06Built on the system
- When the agent builds, elements are bound to the globals — Elementor’s global references, Bricks’ CSS variables — instead of fixed values.
- 07Classes and components
- Global classes, variables, theme styles and components in Bricks; classes and variables in Elementor v4.
- 08Elementor v4, ready
- Converts v3 layouts to v4’s atomic elements — as a dry run first, with a backup taken before anything changes.
D · Engineering
How it’s built.
- 01
Dry run, snapshot, write
Every write to the builder’s globals follows one path: a dry run, a snapshot to JOVION Backups, then the change and a CSS rebuild.
- 02
Safe to write — or not
A read-only verify step checks the page will survive the edit: Elementor’s data must round-trip without loss; Bricks’ tree must have unique ids, valid parents and no cycles.
- 03
Never overrides intent
Tokens fill what the request leaves open. A value set deliberately is kept, and blank tokens are never forced onto a page.
- 04
Checked against real builds
Storage formats were verified against current Elementor and Bricks releases, and anything still unconfirmed is written down, not assumed.
Stack
Brand system
- Copper
#CA8459 - Bright copper
#FABA8E - Canvas
#030303 - Ink
#EDE8E3
E · Impact
By the numbers.
- 6
- Token groups, declared once
- 8
- Type levels, H1 to button
- 5
- Fields checked on every element
- 3
- Builders: Elementor v3, v4 and Bricks