Arkitype turns one brand hex into design tokens, 90 accessible components and a Figma Variables bundle — with contrast checked against WCAG as you work, and one-click exports to Tailwind, MUI and CSS.
Free to start — three systems, no card. Sign in with an email address. Or write to us if you would rather ask a question first.
The builder
A palette, a type scale, spacing, shape, motion, 90 components and a Figma bundle — all compiled from one brand colour.
The live builder needs a desktop — it puts a rail, a canvas and an inspector on screen at once.
Why Arkitype
Most tools hand you a palette and wish you luck. These are the parts that decide whether what you build survives contact with a real product.
Paste a hex and Arkitype generates the primitive ramps, binds them to semantic roles, and points every component at those roles — three tiers, properly wired. Change the primitive six weeks later and the change lands everywhere at once, because nothing downstream holds a copy of it.
Every colour pairing is scored against WCAG AA as you work, in light and dark at the same time — not as a report at the end. When a pairing fails, Arkitype proposes the smallest change that fixes it, so the answer is one click rather than an afternoon of guessing at hex values.
Buttons, inputs, tables, modals and navigation — ninety parts with full variant, size and state coverage, every one of them reading from your tokens. Nothing here is a static mockup waiting to be rebuilt by hand once the design is signed off.
Figma Variables, Tailwind, MUI, plain CSS, documentation and a hosted styleguide, all compiled from the same tokens. There is no second copy to keep in sync, and no build step between the decision and the code — because there is no second copy.
How it works
A design system is not built in a line. You pick a palette, build a button out of it, find the palette can't carry a disabled state, and go back — three times, on a normal day. Every area here is open from the first minute and stays editable forever; change something late and everything downstream updates and tells you where it landed.
Palette primitives and the semantic roles mapped onto them.
Scale, weights, font roles.
Rhythm and breakpoints.
Radius and depth.
Durations and easing curves.
Brand marks and illustrations — bring them whenever you have them.
Parts assembled from roles.
Stress-test on a real product.
The library
Nothing here is a static mockup. Buttons, inputs, tables, modals, navigation and more — every part reads from your design tokens with full modifier parity, variants, sizes and states included, so a change upstream lands in all of them at once.
What you get
No plugins to assemble, no token pipeline to build, no second copy of anything to keep in sync.
One system, compiled straight out to 17 artifacts — the 7 below, and 10 more, from DTCG tokens to a lint ruleset. Every one is generated from the same tokens, so no two of them can disagree — and there is no build step to keep in sync.
Going to Figma? Arkitype Figma Sync, the free companion plugin, turns the export into a real file — variables in both modes, a page per component, and docs. Re-run it after any change and the file updates in place.
Get the pluginQuestions
What tokens are, how this reaches Figma and code, and what it costs.
A design system is the single agreed source for how a product looks and behaves: its colour roles, type scale, spacing, shape, motion, and the components built from them. It is not a style guide document — it is a set of named values that both a design file and production code read from, so a change made once shows up everywhere it should.
Design tokens are the named values underneath a design system — brand-600, space-4, radius-md, action-primary — used in place of raw hex codes and pixel numbers. Because a token is a name rather than a value, the value behind it can change once and every screen, component and export that references it follows automatically.
Arkitype is a design system builder. You give it one brand colour; it solves a perceptually even colour ramp, maps semantic roles onto it, and opens 8 areas — colour, type, spacing, shape, motion, assets, components and preview — that you can work in any order, plus Ship, which is where the finished system leaves the building rather than another area. It audits every colour pairing against WCAG as you go, binds 90 components to the tokens you have chosen, and compiles the finished system to Figma Variables, Tailwind, MUI, CSS custom properties, Markdown and an AI-agent guide, plus a hosted styleguide.
No. Every part of the builder is a visual control — pick a colour, drag a scale, choose a radius — and the code artifacts are generated for you at the end. Developers get real output they can drop into a project, but nothing about building the system requires writing any.
Arkitype exports a Figma Variables bundle, and a free companion plugin — Arkitype Figma Sync, on the Figma Community — turns that bundle into a real file: variables in both light and dark modes, a page per component, and documentation. Re-run the plugin after any change and it updates the existing file in place rather than creating a second copy to keep in sync.
Yes. Ship writes a Tailwind config with your colour ramps, semantic roles, type scale, spacing scale, radii and shadows already mapped onto Tailwind's theme keys. The same system also compiles to a MUI theme, to plain CSS custom properties, and to Markdown handoff documentation — all generated from the same tokens, so the three can never disagree.
Continuously. A contrast engine watches every foreground-and-background pairing in your system against WCAG AA, in both light and dark modes, while you work — not as a report you run at the end. When a pairing fails it proposes the smallest reversible change that fixes it, so accessibility is a constraint you design inside rather than a rewrite you do afterwards.
That is one of the exports. Given no system in a form they can read, AI coding tools invent plausible values — a slightly different blue, a radius of 6 because 6 looked right. Arkitype compiles your system into an agent-readable guide and a Claude skill, so a tool like Cursor, Copilot or Claude Code generates UI against your real tokens instead of improvising its own.
A palette generator hands you five hex codes and stops. Arkitype carries one colour all the way through to a working system: semantic roles that survive a theme switch, a type and spacing scale that agree with each other, 90 components already bound to those tokens, accessibility checked at every pairing, and code and Figma output at the end. The palette is the first minute of the job, not the job.
There is a free plan — three design systems, the whole builder, and every export format, with no card. Paid plans add seats, storage, published styleguides and a longer version history. Nothing you build is locked in: Ship writes tokens, code and a Figma bundle in formats this product does not own.
Longer answers live in the manual, and the background reading is in the guides.
Guides
Working notes on tokens, colour, accessibility, Figma and code — each a method you can follow whether or not you ever open the builder.
The named values underneath a design system — what they are, how to tier and name them, and how to get them into Figma and code without keeping four copies in sync.
ReadCollections, modes, aliases and scoping — what each one is for, how they line up with a design token system, and how to get tokens into a file and keep them there.
ReadContrast ratios, perceptual lightness, and why the palette that fails accessibility usually fails it in dark mode first. A method rather than a checklist.
ReadTailwind is a system without opinions about your system. Here is how to give it one — semantic theme keys, CSS-variable theming, and the discipline that keeps it.
ReadGiven no system it can read, a coding agent improvises a plausible blue and a radius of 6. The fix is unglamorous: hand the machine the contract, in a format it reads.
ReadName a system, pick a hue, and let the tokens, the components, the accessibility checks and the exports follow from there.