THIOS: DESIGN SYSTEMS ON AGENT RAILS

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 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:

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), 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 (18,000+ lines, kept in sync across four subdomains by a deploy gate). design-system.html is the live spec (109 KB, 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.