Unruggable Design System

The first design system built for AX — Agent Experience. A living, AI-native design system for the permanent web: MCP-parsable docs, components, and tokens fused with web3 primitives so you can design, verify, and ship unruggable experiences.

What it is

A living design-system site for the AR.IO ecosystem — v2.0 covers two complete brand systems, ArNS and the Network Portal & Gateways, each with its full set of design tokens, components, logo, color, typography, and icon guidelines. One source of truth, readable by humans and machines: LLM-native, MCP-ready.

Built for two audiences at once

• For developers: code-ready tokens — every brand exports as CSS variables, JSON tokens, or Tailwind configuration, typography rules included.
• For designers: the complete Figma design system, with all components, tokens, and guidelines built on the same typographic hierarchy.
• For agents: starter configurations ship as plain JSON (colors, text colors, icon colors, semantic states) and quick-start guides ship as markdown — formats an LLM builder can parse, download, and act on without a human in the loop.

The system

• Per-brand overviews with primary, secondary, and accent-gradient palettes — ArNS in gold on deep neutrals, Network Portal in teal (#52A9B1) with semantic success/warning/error states.
• A shared icon system built on Lucide, documented down to installation: package manager commands, per-icon imports for bundle size, and a full prop reference.
• Copy-and-download affordances everywhere — every artifact (token JSON, quick-start markdown, Figma links, app links) is one click from being in a builder's hands.

What I did

• Sole designer and developer — concept, token architecture, component library, documentation site, and the machine-readable export layer.
• Unified two shipped product brands under one system without flattening their identities.
• Authored the MCP-parsable structure so AI builders get correct grammar, props, and constraints the first time.