Mutual DS live token explorer
Brand
Mode
AI view · Hand-off
Drop this whole system into your project

Copy the prompt, paste it into Claude, Cursor, or any coding agent, then just say what you want to build. It scaffolds the Mutual design system into your repo, tokens, all six themes, components, and the rules that keep everything on-brand and accessible, then builds whatever you ask using only that system.


      
Step 1
Copy the prompt
Step 2
Paste into your AI agent
Step 3
Say what to build, on-brand by default

Design System · One source · engineers & AI agents build from it

One token layer. Three brands. Six themes. Zero guessing.

This is a real, shipping design system for two products, Mutual, Ark, and a third concept, ToNite, generated from a single semantic token layer that exports cleanly to Swift and React.

Every color, type ramp, and component below is rendered live from those tokens. Flip the brand and mode switches up top, the entire page re-themes from one source of truth. The point isn't that it's pretty. It's that it's structured: a new engineer, or an AI agent, can read these tokens and assemble correct, on-brand, accessible UI without me in the loop. Hit AI view to see exactly what they build from.

Try Flip on AI view (top-right), then hover anything, every element reveals the exact token an agent reads.
Built by Hunter Paramore · paramore.design
Tokens authored once → exported to Swift (SwiftUI) & Web (React) & this explorer.
Copied
Hover anything, see the token an agent reads