The kit as Yuno's Design System

A production-grade component library built on shadcn/ui + Radix + Tailwind v4 + Next.js 15 + React 19, styled with Yuno tokens. It ships with a machine-readable manifest, per-template specs, DTCG-format design tokens and an MCP server so AI agents can consume it directly.

• Next.js 15 (App Router). The kit itself runs as a Next app.
• React 19.
• Tailwind v4 with the Yuno token layer on top of shadcn/ui.
• Radix primitives via shadcn wrappers under src/components/ui/.
• Phosphor Icons (light + fill weights only, per Yuno vocabulary).
• Geist Sans across the whole Dashboard.
• DTCG tokens exported to public/tokens.json (consumable by Style Dictionary, Tokens Studio, MCPs).
• MCP server at mcp-server/index.mjs exposing search_components, get_component, list_tokens and manifest resources.

• The current Dashboard DS is missing a wide surface of primitives that prototypes and product already need.
• It's not agentic-first. Claude Code, Cursor and Copilot can't consume it directly, so AI-generated code drifts away from production conventions.
• Two design systems in parallel (prototypes here, product in Storybook) means every prototype has to be re-implemented from scratch when it lands in engineering. That gap is exactly what this migration removes.

• Imports move from @yuno-payments/dashboard-design-system to whatever the new consumption path becomes in the monorepo (to be defined jointly in kickoff).
• The kit already enforces Yuno conventions in code: 9-token radius scale, semantic tokens, Phosphor weights, no destructive red. These stop being ad-hoc review comments and become the default.
• Components that live only in Storybook today (Popover, DatePicker, Command and others) get brought into the kit and adapted to Yuno tokens using the KIT-FIRST ladder in CLAUDE.md.
• Kit adoption becomes measurable. npm run kit:audit reports drift, and the CI detector flags raw shadcn, lucide or Radix usage before it merges.

• One component surface, zero drift. What a designer prototypes and what you ship come out of the same source.
• Agentic-first. The MCP server, manifest and template specs mean Claude Code writes Yuno-consistent code out of the box. Less review time on style, more on logic.
• DTCG design tokens. Interoperable with Figma Tokens Studio, Style Dictionary and any tooling the industry standardizes on.
• Reusable page templates (base, base-routing, base-connections, base-reconciliation, base-checkout-builder, insights) already encoding Dashboard shell + conventions.
• Adoption CI that catches regressions the moment they land.

• Packaging. Does the kit live inside the monorepo as a workspace, or ship as a published npm package? Note the React 19 requirement (current DS package is on 18.3).
• Migration path for the Storybook stories that already exist for legacy components.
• Testing story. The kit currently ships no unit tests; production consumers likely need coverage.
• Ownership of new components after the migration lands (kit maintainers today are Leonardo + JP; engineering ownership TBD).
• Removal timeline for the current Storybook DS once parity is reached.

Kickoff with engineering happens this week. Estimation of migration effort and a phase plan come out of that conversation. This page gets updated with the outcomes so it becomes the single reference for the migration going forward.