The Visual Brand OS
Brand strategy gives you the words. This gives you the look, as a system every tool can read.
A machine-readable design system, derived from your brand strategy, that keeps your UI on-brand across every surface and every AI tool. From a login, to an App Store app, to a full SaaS product. One source of truth, read by your designers, your developers, and the AI agents now writing your code.
The problem
The words got solved. The look didn't.
Rational Magic already ships a Brand OS File: your positioning and voice in a format any AI tool can read, so your written words stay on-brand wherever AI shows up. But a brand is not only words. It is colour, type, space, and shape, applied consistently across a marketing login, a mobile app, and the product itself.
That consistency breaks for a structural reason. Separate teams touch separate surfaces. Executives, sales, marketing, designers, and developers each work from a different reference, and now AI coding tools generate UI from a one-line prompt with no idea what your brand is. The result is drift: four versions of the same brand, none quite right.
The Visual Brand OS is the fix. It turns the visual half of your brand into the same kind of drop-in, machine-readable system the verbal Brand OS already is.
Proof, not slideware
Two surfaces. One token source.
Both of these are built entirely from Rational Magic's own Visual Brand OS. Every colour, type size, and radius is a token. Nothing is invented. A login at the simple end, a product dashboard at the complex end.
Rational Magic
Sign in to keep every surface consistent.
DASHBOARD
Brand consistency
SURFACES IN SYNC
OFF-TOKEN VALUES
SOURCE OF TRUTH
SIX PIGMENTS THAT MULTIPLY, THE RATIONAL MAGIC PALETTE
ACCENT
EVIDENCE
ANCHOR
WARMTH
CONSIDERED
MIXED
How it works
One source. Every surface.
The system is a small set of files that drop into any AI tool the same way the verbal Brand OS File does. A single design-token source compiles to native code for every platform you ship on.
variables.css / TailwindTokens.swiftTokens.kt (Compose)tokens.dart- tokens.jsonThe source of truth. Design tokens in the W3C DTCG format, in three tiers (primitive, semantic, component), derived from your positioning and personality.
- design-language.mdThe judgment layer. Principles, refusals, and the rules for colour, type, and motion. The part an AI reads to apply the system with taste.
- agent-rulesThe enforcement layer. Instructions for AI coding tools: never invent a value, reuse the tokens, flag anything unmapped.
- llms.txtThe discovery layer. A machine-readable index so AI tools find and load the system on their own.
The difference that matters. Tools that auto-extract a design system read a site you already have, including whatever is already broken. The Visual Brand OS is derived from your brand strategy. Deciding what the brand should look like from what it stands for is the part a tool cannot do, and the part Rational Magic does.
An honest claim: this maximises and enforces visual consistency across your surfaces and your AI tools. It does not pretend to guarantee it. Structure raises the odds and makes drift catchable; judgment closes the rest.
This is what we build for clients
Yours starts with the words.
The Visual Brand OS is derived from the brand strategy. Run the sprint, get the positioning and voice, then extend it into the visual system your whole organisation and every AI tool can build from.