ArkitypeGuides
How design systems actually get built
Working notes from building Arkitype — tokens, colour, accessibility, Figma and code. Each one is a method you can follow by hand; the tool exists because doing it by hand, repeatedly, is the part that does not scale.
- Design tokens9 min read
What are design tokens?
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.
Read the guide - Figma Variables8 min read
Figma Variables, and how design tokens reach them
Collections, 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.
Read the guide - Accessible colour10 min read
How to build a WCAG-accessible colour palette
Contrast ratios, perceptual lightness, and why the palette that fails accessibility usually fails it in dark mode first. A method rather than a checklist.
Read the guide - Tailwind CSS9 min read
Building a design system with Tailwind CSS
Tailwind 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.
Read the guide - AI coding tools8 min read
Giving AI coding tools a design system to follow
Given 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.
Read the guide
Looking for the product documentation?
The manual covers every control in every area of the builder, the accessibility engine, and exactly what each export contains.