How it works
Set it. Check it. Hand it over.
A design system is mostly arithmetic once a few real decisions are made. Diagramma asks you for the decisions, does the arithmetic, shows you where it holds up, and packages the result for the people who build with it.
01Set
The decisions only you can make.
Ten tabs: color, typography, spacing, shape, elevation, motion, layout, icons, logo and voice. Each asks for a setting or two, and a live screen underneath redraws with every change.
Colour
Set the primary by value, chroma and hue, or type it in as a hex code. Then fill up to four secondary slots and an accent: take one of seven suggested harmonies in a click, or drag colours in from the board and tune them with six controls, from warmth to contrast.
From those, Diagramma works out four tints and four shades of each colour, twelve neutrals, six semantic colours and three sets of chart colours.
Type
Choose a display, a body and a mono face from 37 Google Fonts and three system stacks. A scale ratio and a base size set every size from display to caption; line height and letter spacing have their own controls.
Have a licensed typeface? Upload it as WOFF2, WOFF, TTF or OTF, up to 5 MB a file. You confirm its licence allows web embedding, because the file travels inside the deck you share.
Space, shape, depth and motion
One setting each. A base unit gives nine spacing steps. A character setting runs from square to pillowy across eight radius steps. An intensity sets six tiers of shadow. Pace and character set how things move. Layout takes a content width, a column count and a gutter; icons take a grid and a stroke weight.
Logo, if you have one
Upload a logo and an icon as SVG, up to 64 KB each. Diagramma lays out four treatments (full colour, black, reversed and primary), a clear-space rule and a minimum size, and adds them to the deck. Leave it empty and the deck simply has no logo pages.
Voice, if you want it
Six short fields: personality, voice, tone, what to do, what to avoid and an example. You write them; nothing is generated. What you fill in becomes a slide and a section of design.md.
Light and dark, from one set of choices
A switch in the header flips the project between light and dark, and the editor goes with it, so a dark system isn’t tuned on a white desk. Both modes are worked out from the same settings and both are in every export.
02Check
Measured, not assumed.
Diagramma doesn’t promise your palette is accessible. It measures it and shows you the result, including the parts that fail, while you can still change them.
Contrast, two ways
Each text and background pairing in the system is listed with the size it is used at, its WCAG 2 ratio and its APCA score, each with a verdict from pass to fail. Body text is held to a stricter target than headings, so a brand colour that fails as body text can still pass as a headline.
Colour blindness
The brand, semantic and chart palettes are each shown as they appear with deuteranopia, protanopia and tritanopia. If two colours collapse into one, you see it here. On the Color tab, a greyscale view does the same for lightness.
And on nine screens that look like real work
A swatch can’t tell you whether a palette works. The live preview draws nine example screens entirely from your tokens, in light or dark: SaaS Dashboard, Marketing Landing, Mobile Settings, Sign-in Form, Status & Alerts, Data Visualization, Pricing Plans, Onboarding and Components & States.
03Hand over
A link for people. Files for tools.
The system leaves Diagramma two ways: as a guidelines deck anyone can open, and as files a developer, a designer or an AI coding tool can use directly.
Share a link
Press Share, give the link a label if you like, and send it. Whoever opens it needs no account. They get the deck, the nine live screens, a button to print the deck to PDF, and the files.
- It’s a snapshot. A link shows the system as it was when you made it. Later edits don’t change it; make a new link for a new version.
- You can revoke it. A revoked link stops opening straight away.
- Your name is on it. Add a client name and your own details in Settings: the cover carries theirs, every slide’s footer carries yours.
The deck
28 slides, up to 31 with a logo and a voice: foundations, components and usage, in that order. These are from the deck made for the example project.
Export the files
Five exports, from one menu, as often as you like. Each is written from the project as it is at that moment.
Custom properties for every token. Surface, text and border roles come in light and dark, switched by the reader’s system setting or a data-theme attribute.
The Tokens Studio format, with a global set and a light and a dark theme. Import it with the Tokens Studio plugin in Figma. There is no Diagramma plugin and no live sync.
The whole system in one text file: the tokens up top, then plain-language rules for colour, type, logo and voice. Give it to an AI coding tool so what it builds follows the system.
Every colour on one sheet. Open it in any design tool and pick from it.
The deck as a single file, for when a link won’t do. Open it in a browser and print it to PDF.
## Voice & tone
Write all user-facing copy — headings, body, buttons, errors, empty states — in this voice.
- **Personality.** Warm, plain-spoken, dry.
- **Voice.** We say what it is and where it came from. No tasting-note poetry.
- **Tone.** Lighter on the bag, steadier in an order email.
- **Do.** Short sentences. Real places. Dates.
- **Don't.** No exclamation marks. No “artisanal”.
- **Example.** Roasted Tuesday in Port Haven. At your door by Thursday.
## Colors
The palette is built around primary `#8e4120` (OKLCH 0.470 0.115 42°). Secondary and accent are derived from the chosen splitComplementary harmony; neutrals are tinted toward the primary's hue at 1.6% chroma.{
"global": {
"color": {
"brand": {
"primary": {
"tint-4": {
"value": "#fddacd",
"type": "color"
},
"tint-3": {
"value": "#e2b2a0",
"type": "color"
},
"tint-2": {
"value": "#c78c75",
"type": "color"
}
}
}
}
}
}Start
One project is $99.
One payment, no subscription. A project you haven’t shared or exported from can be deleted and used again.