SERGE/ai
Substrate is the design language for the operator console of the agent layer of the internet — the parallel system of non-human traffic that humans can't normally see. This document specifies the chassis: palette, type, motion, sound, dimensionality, and the rules that keep it consistent from the hero shot to the billing page.
The thing you can't normally see.
Every other immersive SaaS has to invent a metaphor to justify the world. Serge doesn't. When a shopper asks Claude or ChatGPT to buy something, the agent fires up a browser, tries to complete the task, and often fails silently. Serge measures when that happens and what to fix. Substrate is the interface the people who run those sites use to see it.
Your checkout works for humans.
Does it work for Claude?
Substrate makes the second question visible.
DIEGETIC
Every retrofuturistic signal — chrome frame, dither, scanline — must map to a real product function. If it doesn't earn its place, it's cut. Designers and users notice at the same speed.
NO CLUNK
The world only holds together if the boring paths feel native. Settings, billing, and exports are designed first, inside the chassis, so nothing breaks at the seam.
FAST OR DEAD
Below 60fps the illusion breaks and the product reads as a tech demo. Single canvas, shader-swapped views, GPU instancing for traffic, aggressive LOD, and a degraded terminal mode that's still on-brand.
Wonder → 3D. Comprehension → 2.5D. Lookup → flat.
Dimensionality scales inversely with how often a user touches the surface. Surfaces visited once and meant to move you go fully spatial. Surfaces visited daily and read in two seconds stay flat with shader texture. The chassis is constant across all of them, so the world never breaks even when the geometry collapses.
| SURFACE | DIMENSION | RATIONALE |
|---|---|---|
| Landing / hero | FULL 3D · WALKABLE | Wonder is the job. Demo domain rendered as a lit district, agent particles flowing along link paths. The shot a visitor screenshots within two seconds. |
| Free scanner | 2.5D HUD | Conversion surface. Drama is the scan animation; results return tactile and flat in 3 seconds. Save-to-Dashboard inside the same frame. |
| Marketing / docs / blog | FLAT EDITORIAL | Editorial pacing inside the chrome frame. Type-led, kinetic, dithered backgrounds. You cannot read pricing on a planet. |
| Monitor mode (default) | 2.5D OPERATOR | Where users live daily. Tactile panels, sparklines, real-time traces, all shader-textured but flat for scanning. No orbit camera. |
| Topology view (one tap) | FULL 3D | Same district view as hero, populated with the user's live traffic. Used for show, debug, demos. The screenshot they post on LinkedIn. |
| Investigate / replay | FULL 3D · WALKABLE | Walk a session from the agent's POV. Inherently spatial-temporal — geometry is doing real work. The thing nobody else in the category can build. |
| Settings · billing · team | FLAT | Boring on purpose. Inside the chrome frame so the chassis stays consistent, but no GPU on a checkbox. Respect the user. |
Chrome and ultraviolet, with a cyan opposing wavelength.
Two-axis color logic that's load-bearing for the product, not decorative. Agents are ultraviolet. Humans are cyan. Every chart, overlay, legend and trace across the entire product uses this duality. GA4 vs Serge becomes literally visible — opposing wavelengths in the same frame.
The two-wavelength rule
Every visualization in Substrate is a coordinate in the ultraviolet / cyan plane. One axis for humans, one for agents, never mixed. This is the only color rule that cannot be broken. Once you see the UV/CY split, you can't unsee it — and you can't lift it without the rest of the system.
One family, three registers.
Substrate runs on a single family — ABC Diatype by Dinamo — across display, body, and mono. The flex is restraint. Three weights, one mono companion, total cohesion. No display-vs-body fight, no foundry stitching, no pairing risk.
[00:14:33] AGENT.CLAUDE → /api/inventory?sku=LX15-2026
[00:14:33] AGENT.PERPLEXITY → /reviews?product=LX15-2026
[00:14:34] HUMAN → /products/laptops
Operator, not evangelist.
Substrate's voice is the voice of someone who runs critical infrastructure: precise, unhurried, dryly confident, technical when it has to be, never breathless. Never "revolutionize." Never "harness." Never "unleash." If a sentence could appear on a generic SaaS landing page, rewrite it.
DO / OPERATOR
"Your site got 11,420 agent visits last week. 14% of your traffic. Zero of them showed up in GA4."
THREE SPECIFIC FACTS. NO BRAVADO. THE DIAGNOSIS IS THE HOOK.
DO NOT / EVANGELIST
"Unlock the power of the agentic economy with AI-native analytics that revolutionize how you understand your customers."
EVERY WORD IS A WORD A COMPETITOR ALREADY USED.
DO / DRY
"When a customer asks Claude to buy something on your site, the agent either succeeds or gives up. Serge tells you which."
THE POSITIONING IS THE COPY. NO METAPHOR REQUIRED.
DO NOT / OVERSTUFFED
"In an increasingly AI-driven world, understanding non-human traffic is no longer optional — it's mission critical."
FIVE FILLER WORDS. ZERO INFORMATION. CUT.
DO / TECHNICAL WHEN IT EARNS
"Your add-to-cart button is a div with an onClick handler. Claude sees it as decorative text."
A FACT, A DIAGNOSIS, A HOOK. RESPECTS THE READER.
DO NOT / CUTE
"Our friendly little bots are here to help your friendly little bots get along!"
THE PRODUCT IS INFRASTRUCTURE. NO EMOJI. NO MASCOTS.
Six principles, no exceptions.
Motion carries the world. Sound carries the confidence. Both are heavily restrained — never decorative, always earning their cost — but uncompromising on quality where they appear.
Inertial scroll, always.
Lenis on every page. Native scroll feels like 2018. Inertial scroll is the carrier wave the rest of the system rides on.
Page load is one orchestrated reveal.
Staggered fade-up with a 0.08s cascade and an 8px blur drop-off. One choreographed entrance beats a hundred scattered micro-interactions.
Chromatic aberration on motion only.
±1.5px UV/CY split appears during transitions and active drag, never on idle elements. Static aberration is the tackiness trap.
CRT curvature on internal panels, never full-screen.
0.4% barrel distortion on monitor panels and the topology viewport. Full-screen curvature is cosplay — the bar to clear is "I would put this on a real workstation."
Audio is default off, opt-in once.
One elegant prompt on first meaningful interaction. Once on: ambient drone pitched to live agent activity, tactile click feedback, directional whoosh inside Investigate mode. Howler.js with HRTF spatial.
Reduced motion drops to terminal.
prefers-reduced-motion cuts the 3D layer entirely and falls through to the n3rd.ai terminal mode — same palette, same family, monospace topology, fully keyboard-navigable. Accessibility is on-brand by design.
Anatomy of the chassis.
The atomic vocabulary every surface inherits. Frame, panel, button, trace. Hover any element below — every interaction here is real, demonstrating the exact motion and timing the production system uses.
The fastest way to ruin Substrate.
Each of these failure modes turns a frontier brand into cosplay in under three seconds. Treat as hard rejects in design review.
What ships the chassis.
The production stack is locked. Each choice was pressure-tested against alternatives. Substitutions allowed only with documented rationale.
FRAMEWORK
Next.js (App Router) · React 19 · TypeScript · Tailwind for flat surfaces · Vercel for deploy. Yann's existing stack, no migration cost.
3D / WEBGL
React Three Fiber · @react-three/drei · @react-three/postprocessing · custom GLSL fragment shaders for the Substrate post-pipeline (Bayer dither, chromatic aberration, controlled bloom, panel CRT curvature).
MOTION
GSAP for timeline and scroll-triggered choreography · Lenis for inertial scroll · Motion (Framer) for component-level transitions on flat surfaces.
SOUND
Howler.js with HRTF spatial · ambient drone pitched to live activity (Web Audio API direct) · default off · single opt-in prompt on first meaningful interaction.
TYPE
ABC Diatype + ABC Diatype Mono (Dinamo, value-based license) · self-hosted · subset to Latin Extended · variable axis where available.
DEGRADED MODE
n3rd.ai terminal stack · monospace-only fall-through · ASCII topology · keyboard-first · activated on WebGL failure or prefers-reduced-motion. Same brand, lower fidelity.