Create tokens, customise 90 components, and check accessibility in one place. Export your system to Figma, Tailwind, MUI, and CSS.
Free plan: 3 design files. Sign in with an email address. Or write to us if you would rather ask a question first.
The builder
Build your palette, type, spacing, shape and motion. Customise 90 components and export the same system to Figma and code.
The live builder needs a desktop — it puts a rail, a canvas and an inspector on screen at once.
Watch the tour
Seven minutes, narrated and captioned: a client's system set up from scratch, built out, and handed to developers, designers and the client — then kept in step as it changes. Jump to any chapter.
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 pairing your roles and token groups imply 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 — 90 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.
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 your roles and token groups imply 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. After a change, republish (or re-export the bundle) and re-run the plugin: 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 your roles and token groups imply 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 — or the closest one, and says it falls short, when no change to that colour can — 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, contrast checked on every pairing your roles imply, 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 — 3 design files and a published styleguide, the whole builder, and every export format, with no card. Larger plans, listed on the pricing page with whether they are on sale yet, raise the number and size of files, collaborators per file, published styleguides and how long version history is kept. 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.
ReadStart with your brand. Refine the foundations, shape the components, and take your system into design and code.
