THIOS: ONE SOURCE OF TRUTH, SIX SURFACES

What Thios Is

Open-source modular structures — saunas, greenhouses, offices — from geodesic geometry. Six sub-brands. Four production subdomains. One Figma file. One Onshape document. One designer.

By 2026 the bottleneck in design isn't drawing — it's keeping intent, spec, code, and tokens consistent across that surface count. What if the designer's deliverable was the rules, and agents were the IC enforcing them? The case study below is the answer.

The system isn't the product — the spheres are. First revenue came through the configurator this system keeps honest.

The Six-Surface Problem

Most design systems rot quietly: a hex drifts, a Figma variable disagrees with a CSS custom property, a component ships without an entry in the docs. By the time anyone notices, dozens of components reference the wrong value. Thios's design decisions live in six places, all readable by agents, all mutually diffable, all referenced from one canonical rule layer:

What I Got Wrong First: Figma as the Source

The first version did the obvious thing: Figma was the source of truth, and everything generated down from it — tokens, CSS, the docs. It drifted within weeks. A variable moved in Figma and the CSS didn't follow; a hex got hand-tweaked in code and Figma never heard about it. With no engineering team to police the gap, the "source of truth" quietly stopped being true.

So I inverted it. The source of truth became DESIGN.md — agent-readable text — and Figma became a surface that gets audited against it like every other. Rules a human authors; agents are the IC that enforces them. That single inversion is what makes one designer holding six surfaces actually work.

Two faster paths I ruled out along the way:

• Wait for headcount — hire engineers to maintain the system. There's no eng team and, by design, there won't be: the agents are the IC.
• Hand-sync the surfaces — "I'll just remember to update all six." That's the willpower problem that breaks at six surfaces across four sites — the Auxosphere bug below is what silent drift looks like.

How the Surfaces Stay Aligned

DESIGN.md is the spine — agent-native markdown; Section 9 is explicitly an "Agent Prompt Guide," the first thing any agent reads when generating UI. tokens.json is the bridge — W3C Design Tokens, three layers (primitive / semantic / surface) whose semantic layer is the ~65 named rule tokens authored in DESIGN.md, and now mirrored in a live Figma Variables surface (Plus UI re-themed to Thios — primary, gold, status, type, and all six sphere brand tokens audited in sync against tokens.json, June 2026). main.css is the running code (kept in sync across four subdomains by a deploy gate). design-system.html is the live spec (every component with working examples). Onshape is the parametric source for sphere geometry — 54 elements driven by one Variable Studio, the same shape as tokens.json flowing into Figma, but for physical product.

Each surface gets diffed against the spine on demand. Agents catch drift; the human decides what to fix — the drift-detection logic is published as an open-source Claude Skill, audit-design-token-drift. The complete loop is documented at thios.co/design-system-loop.html.

Sphere Branding — Proof the System Scales

Six sub-brands currently share the system: Thiosphere (brown #96643F), Saunosphere (red #E25141), Agrosphere (teal — same as primary, intentionally), Ergosphere (blue #1D63BE), Immosphere (purple #4D04AC), Auxosphere (gray). Each is a first-class token, mirrored one-for-one in Figma Variables — six sphere brand accents, all audited in sync with tokens.json.

The kind of bug a single-surface workflow ships silently: Auxosphere read #909090 in DESIGN.md while resolving to #6c757d in tokens.json — caught by the audit, now aligned. Six sub-brands plus four production sites is exactly where manual drift detection breaks.

Results

• Six surfaces in sync today — all readable by agents, all mutually diffable, all referenced from a single canonical rule layer.
• 4 production subdomains kept in CSS-sync via a make check-css-sync deploy gate — no silent rot between thios.co, blog, store, and partners.
• 6 sub-brands generated from one component template via Figma mode variants — one design, six brand surfaces.
• 212 design tokens, three layers (primitive / semantic / surface) — the same shape as tokens.json flowing into Figma also flows into Onshape's Variable Studio for physical product.

Next Surfaces (Roadmap)

Two surfaces are designed but not yet running. Each will be wired into the diff layer before it goes live so drift detection scales with the system. (Figma graduated off this list in June 2026 — it's now a live, audited surface.)

• Scheduled drift checks — the diff runs on demand today. Wiring it to a weekly schedule turns drift detection from a willpower problem into infrastructure. Month-over-month delta becomes the trend line.
• CAD hygiene agent — feature naming conventions, mate health, build-correctness checks on the Onshape document. Same diff-then-fix shape, applied to physical geometry. The 54-element inventory is the baseline.

The interesting career question for senior designers in 2026 isn't "can you use AI?" — it's "have you written infrastructure agents follow?" The work isn't using AI. The work is writing the rules AI follows.