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 Five-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 five 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), imported into Figma Variables via Tokens Studio. 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 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 semantic token with mode variants in Figma — one component template, six brand surfaces.

The kind of bug a single-surface workflow ships silently: Auxosphere reads #909090 in DESIGN.md but resolves to #6c757d after the primitive→semantic indirection in tokens.json. Six sub-brands plus four production sites is exactly where manual drift detection breaks.

Results

• Five 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)

Three 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.

• 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.
• Figma MCP — Tokens Studio + html.to.design plugins documented in design-system-loop.html step 2; once Figma Dev Mode MCP is enabled on the Thios-logo file, agents will read and write Figma Variables the same way they reason about DESIGN.md today.
• 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.