Arena MCP server

Arena by Dravensoft

One design system, in React and in Angular, from one contract.

MIT License · Token-driven design system for React, Angular and Tailwind.

What you get

Components with a contracted API. The same components under both framework names, rendering the same pixels, over one shared Tailwind layer. What a member is called, what it takes, what it defaults to and what it means are written in contracts/api/, and each layer's types and tables are generated from there, so the two layers cannot drift apart quietly. Every value a component draws resolves through a design token, so no hex and no bare pixel sits anywhere inside one.

Accessibility bound per component instead of audited per release. Each component declares which pattern it implements, most of them from the WAI-ARIA Authoring Practices: the roles it carries, the keys it answers, where focus lands, what dismisses it. A requirement it does not meet yet is recorded beside it with its reason, and bun run check:behaviour fails on the day a component stops answering the pattern it named.

A style kernel, which is what a project answers to look like itself. The questions about shape, space, weight and depth are Arena's; the answers are a style plugin the project writes, and the appearance Arena installs with is one such plugin rather than a floor under them. Palettes and fonts sit in an arena.config.json, which the arena-to-prod command each package ships turns into the one stylesheet a package cannot carry: Arena carries the language and never the skin, and none of its own colours reach your build.

Metadata for a product that has to be found, which most products do not. The Angular layer writes the document from the routes it is handed, at @dravensoft/arena-angular/metadata: title composition, a description, a canonical and the og:* pair, with no route indexed until it says so. That import path is a second entry point, so a project that never asks for metadata never installs the router behind it. React writes no at all, and both layers publish the breadcrumb trail they draw in schema.org terms.

Eight products, drawn twice

The benches are a set of templates that implement Arena: Calendly, ClickUp, Duolingo, Etsy, Grafana, Instagram, Notion and Superhuman, each mocked twice, once in React and once in Angular, from one arena.config.json and one design/ directory per pair. Every half installs Arena from npm and answers a style plugin of its own, so what a pair shows is a project's appearance rather than Arena's, and the two halves of a pair are the same screen under both framework names. That address is where they run, and dravensoft-dev/arena-web-benches is where they are written.

Shortened. The full README is on GitHub.