Using v2
One stylesheet, linked from any page. No build step, no Tailwind, and no values typed into an app.
Link it
<link rel="stylesheet" href="https://design-system.aroughidea.com/v2/index.css">
index.css loads the fonts, then tokens.css (the values), base.css (plain elements) and components.css (the parts). A site that may not load fonts from Google links the three files itself and serves the fonts.
Two small scripts are optional: v2/theme.js for the light and dark button, and v2/present.js for presentation mode. Components › The frame shows both.
For AI agents: the MCP
An AI assistant can ask the design system directly, through its MCP server: the role for "error text", a component's rules, whether a color or a CSS value belongs to the system, the contrast of a pairing, the style guide. It answers from the same files as this guide, so it never disagrees with it.
claude mcp add --scope user --transport http aroughidea-design-system https://design-system.aroughidea.com/mcp
The data is published with every build of this site at /v2/mcp/ (index.json lists the files): tokens and themes read from tokens.css, the components, the icons, the style guide (its longer texts are this guide's Content and Layout pages), the changelog and the deprecations. The MCP reads them again within a minute of a change, so changing the system never means changing the MCP.
Nothing hard-coded
Primitives are the raw values, in v2/tokens.css only. Roles say what a value is for (--ds-ink, --ds-radius-act). Components use roles only, and so do apps.
Corners C to E is two lines in tokens.css; every app that links v2 follows on its next load.
A real difference found while aligning apps becomes a role or a context's override in v2, never a number in the app.
npm test fails if a v2 stylesheet other than the tokens holds a literal color, size, space or corner. Each app gets the same test.
Link it: <link rel="stylesheet" href="https://design-system.aroughidea.com/v2/index.css">
Five stacks, one system
No Tailwind in the system: plain CSS, loaded with one link and no build step. Each stack takes it its own way.
| Stack | Apps | How v2 arrives |
|---|---|---|
| HTML and CSS | LLM Explorables, the Colloquy, aroughidea.com, the playground, Obscura Designer, MQTT demo | One link; each app's own variables point at v2's roles. |
| VitePress | Workshops, Prototyping Toolkit | An adapter that maps VitePress's variables onto v2. |
| React and Tailwind | Agent Design Studio, Speculative Journalism | Each keeps Tailwind as its own build tool, pointed at v2's roles. |
| Next.js with inline styles | AI Research, most experiments, some teaching apps | Link v2; inline values become roles, page by page. |
| Vite and Python-served HTML | The other Vite experiments, the autoresearch demo | One link in the page. |