ARCANA UI
The design system built for AI. Machine-first architecture. Human-beautiful output.
The Gap
41% of all code is now AI-generated. GitHub Copilot, Cursor, v0, Bolt, Lovable — these tools write production code daily. But none of them have a design system. Existing UI libraries — Material UI, Chakra, shadcn/ui — were built for humans reading documentation. AI agents don’t browse docs. They parse context windows. And existing systems scatter their design decisions across SCSS variables, JS config objects, runtime APIs, and markdown files. The AI is guessing at patterns, not reading a spec.
The Solution
Arcana ships with manifest.ai.json — a single machine-readable file that gives AI agents complete context on every component, every prop, every design pattern. Semantic token naming that AI can reason about. Predictable component patterns it can learn from one example. One JSON file controls the entire visual identity.
The architecture follows a three-tier token system:
- Layer 1: Primitive tokens — raw values (colors, sizes, spacing).
- Layer 2: Semantic tokens — contextual meaning (
--color-bg-page,--color-action-primary). - Layer 3: Component tokens — specific to each component (
--button-bg,--card-radius).
Two Users
Arcana serves two audiences simultaneously:
For AI Agents
Machine-readable manifest. Parseable component context. Semantic naming that maps to intent. AI can generate correct, themed UI from a single example.
For Humans
Describe your brand in the playground — adjectives, colors, references. The AI generates a complete theme. Customize visually. Export production-ready code. Install via npm.
The Architecture
Three-layer product architecture:
Layer 1 — Core (Distribution)
MIT licensed, npm install @arcana-ui/core. React component library + design tokens. Zero dependencies. CSS custom properties for theming.
Layer 2 — Playground (Conversion)
AI-powered theme generation. Visual editor. Export to production code. This is how users discover Arcana and customize it.
Layer 3 — Platform (Revenue)
Pro license for advanced themes, team collaboration, and enterprise features. The business model that sustains the open-source core.
Built with Arcana
This portfolio site is built entirely on @arcana-ui/core and @arcana-ui/tokens. The Swiss poster theme you’re looking at is a custom Arcana theme — every color, every spacing value, every border radius flows through Arcana’s token architecture. Inspect the source. The system works.