SERGE
§00 The argument
The internet has two readers now.
The human reading your store, and the agent reading your store. They are not looking at the same page. They are not seeing the same product. They are not buying the same things.
Serge is the instrument that measures the gap between them. Substrate is the brand of that instrument. The system has one job: render the gap.
One axis. Two coordinates. Every visualisation is a reading on the UV/CY plane.
§01 The wavelength is the brand
One axis. Two coordinates.
Every Substrate surface lives on one axis. Two coordinates only. They are not "primary colours." They are the only colours. Paper and ink are the substrate; UV and CY are the signal printed on it. Every chart, annotation, score, badge, and divider is a coordinate in the UV/CY plane.
Ultraviolet · #5B1FCC
What the agent reads.
Claude, ChatGPT, Perplexity, Gemini, Operator — every agent renders in this wavelength regardless of platform. Distinguished by glyph and label, never by hue.
Cyan · #006B7E
What the human reads.
The opposing wavelength. Used when humans appear alongside agents on the same surface. Never mixed in the same primary region.
Per-platform palettes are forbidden. This is the rule that cannot be broken — the colour theory competitors cannot quietly copy.
§02 The split is the mark
Permanent chromatic.
Not motion — type.
The wordmark always has the split. There is no off-state. On scroll or hover the split widens to ±12px and collapses back; on rest it sits at ±3px. We were told in 2025 that aberration on a stationary mark was a tackiness trap. We disagreed.
An off-state on the wordmark is an admission that you don't trust the brand to hold still.
Scale 01 · 320px
SERGEScale 02 · 220px
SERGEScale 03 · 120px
SERGEScale 04 · 56px
SERGEScale 05 · 18px caption
SERGE§02 · The mark as a file
The logo, as an asset.
The Serge mark — the chromatic split slash — as a 1200×1200 PNG, plus a 150×150 icon for small surfaces (favicon, app tiles, the Auth0 login logo). Right-click and copy the image address, or download either directly.
§03 The Two-Way Mirror is the proof
Same page.
Two readings.
Same page, two readings. The human side keeps the photo, the price, the cart button. The agent side surfaces the schema, the missing alt, the role-less div that an agent skips on its way to the checkout that wasn't there. Drag the divider. Paste your own domain. The brand asset and the product demo are the same file.
Commuter Backpack 20L
Water-resistant · padded sleeve · two outer pockets
<img alt="?">missing alt
no schema.org/ImageObject
<h1>Commuter Backpack 20L</h1><p>Water-resistant · padded sleeve · two outer pockets</p><data value="79">CHF 79</data><div onClick>Add to cart</div>↑ not a button · agent skips
<link rel="canonical" href="https://yourstore.com/products/laptop-x-15" />
Deployed on
Homepage above the fold (100% width). Every scan-result OG image. The loading state of every product surface. The cover of the pitch deck.
The principle
Each broken element (missing alt, role-less div) is highlighted in hot — the only colour outside the UV/CY axis.
The argument
The brand is the product is the diagram. There is no separation between the marketing layer and what Serge actually does.
§04 One family
ABC Diatype Mono.
Three weights.
One family. Three weights. The 800 belongs to the wordmark and nothing else. The 600 carries titles, score numerals, prices. The 400 does everything else, including this paragraph. Drag the slider — the same type does all the work from 18px to 280px without asking for a sibling.
800 · Wordmark · -0.045em
SERGE
600 · Title, score, price · -0.02em
34 / 100
400 · Body, UI, caption · +0.01em
Add the snippet
Inter Tight / Geist Mono ship as placeholders until the Diatype licence closes. Tokens --font-display and --font-mono are stable.
§05 Paper, not paper
Five colours.
v1 had eleven.
Paper, ink, two wavelengths, one critical alarm. No dark mode. No alternate scheme. v1 had eleven colour tokens — six of them were excuses, and one of them was a teal we kept because we hadn't accepted that the brand was over. v2 fixed both.
§06 Two-reader copy
Prose to humans.
Signal to agents.
Every visible string is composed for two readers. A human reads it as English. An agent reads it as structured signal. Body looks like prose. Markup is also a feed.
◀ What the human reads
47 agent sessions this week. 12 per day. 3.4× last month. Variant selector fails on 73% of ChatGPT sessions. Slack notified.
What the agent reads ▶
<data value="47">47 agent sessions</data> <data value="12" unit="per_day">12 per day</data> <data value="3.4" unit="x_last_month">3.4×</data> <data value="0.73" target="chatgpt"> variant selector fails 73% </data>
No "AI-native." No "agent-native." No emoji. Sign-off is always "— Serge."
§07 Motion is focus, not entrance
One principle.
Chromatic focus.
Scroll widens the split. Hover widens it more. Transitions re-focus the UV and CY layers onto whatever was just touched. That's the whole vocabulary. We don't bounce, we don't spring, we don't scale anything past 1.02, we don't fade. If a moment wants more motion than that, the moment is wrong.
prefers-reduced-motion locks the split at ±3px. The brand still works as a still — that's the whole point of the rest state being non-zero.
§09 What does not exist
The brand is also
a list of refusals.
Dark mode.
No scheme switch, no color-scheme query. The single register is the brand.
Serif.
No Fraunces, no exception for "newspaper headlines." One typeface or no brand.
Mascot.
No avatar, no SergeBot character. SergeBot is a User-Agent string, not a personality.
Platform palettes.
Every agent renders in UV. Distinguished by glyph and label, never hue.
Gradients.
Except the UV/CY axis bar. That is the only gradient that exists.
Shadows.
Hairlines and paper grain only. Elevation is structural.
Rounded corners.
0px everywhere. Mantine defaultRadius is 0.
Deferred inventory.
If it is documented, it ships. The brand and the docs match.
§11 The submission
Four criteria.
Four cards.
Distinctiveness
The two-wavelength rule is a colour theory, not a palette. UV/CY at full saturation. The split as the wordmark. Competitors cannot copy this without looking derivative.
Scalability
Five colours, one typeface, three surfaces, one mark. The system fits on a single sheet.
Application
The Two-Way Mirror is the proof, deployed identically on the homepage, the OG image, the loading state, the pitch deck. The brand and the product are the same artefact.
Voice consistency
One voice, one signature, no patches. Body copy is structured signal that humans happen to read.
field note · 2026-05-12 · Zürich
Sign-off
The brand says the internet has two readers. The page you've just scrolled makes the argument twice — once in prose, once in markup. Toggle the topbar and read it back. If it does that and nothing else, it earns the line in the manifesto.
— B.
B. Boell · brand direction
credits
- identityinternal, May 2026
- typeABC Diatype Mono (licence pending)
- photographynone. The wavelength is the imagery.
- soundnone. Maybe v3.
- contactserge.ai · brand@serge.ai
rejected at the gate
- A custom serif called Wavelength Display commissioned for the headline slot. Cut because §09 says one typeface or none, and we are not interested in negotiating with our own manifesto.
- A third wavelength — amber — to carry warnings. Cut because three coordinates do not fit one axis. Hot stays as the single exception because critical alarms can't speak in UV/CY without ambiguity, and we'd rather break the rule once than wrap it in apology.
- A 3D rendering of the wavelength as a glass strand for the hero. Deferred because we couldn't ship it before the submission window closed. Lying in brand guides is the only real failure.
Substrate · v2 · May 2026 · serge.ai/brand