Where design decisions get made. Mockups, prototypes, and a shared component library live here. Designers and stakeholders look at Figma to understand what the brand looks like.
Figma app Paid plan MCP-connected
A single file that holds all the design decisions as structured data — colors, typography, spacing, shadows. W3C Design Tokens format, so any tool can read it.
Organized in three layers: primitive (raw values), semantic (role names), surface (context overrides like configurator dark mode).
212 tokens W3C format /lib/styles/tokens.json
18,000+ lines of real CSS. Uses the tokens as --color-primary, --spacing-md, etc. Contains every component style — buttons, cards, alerts, badges, auth layouts, handbook chapters.
Written once in /lib/styles/main.css, minified to main.min.css (254 KB) — that's what browsers actually download.
Four PHP sites, each loading the same main.css bundle. A make check-css-sync Makefile target fails the pre-deploy gate if any copy drifts out of sync.
Live documentation. A standalone HTML page hosted at thios.co/design-system.html. Self-contained — shows every token, every component, every pattern with working examples.
This is the page developers and designers visit to answer "what does our .alert-success look like? What .btn-hero variants exist?"