Skip to content
See plans

Design system builder

Decide a few things. Get the whole system.

Diagramma turns a primary colour, a pair of typefaces and a handful of settings into a complete design system: palette, type scale, spacing, shape and elevation, in light and dark. Then it gives you a guidelines deck to share and the tokens to build from.

See plansfrom $99How it works

One paymentNo subscriptionProjects don’t expire

The Diagramma editor on the Color tab for an example project, Saltline Coffee Roasters. A large terracotta swatch is labelled Primary, with sliders for value, chroma and hue and a hex field reading #8E4120. Below, a live preview shows a dashboard screen drawn in the same colours.
Deck slide: Brand palette. A terracotta primary, three secondaries, an empty fourth slot and an amber accent, each with its hex code.

00The idea

One colour in.
Nine out.

Set a colour and Diagramma works out the four tints above it and the four shades below. It does the same for every brand colour, then builds the neutrals, the semantic colours and the chart colours from the same settings.

Nothing is drawn by hand and nothing is guessed. The same settings always give the same system.

#fddacd
#e2b2a0
#c78c75
#ab664b
#8e4120
#722c0b
#561700
#3b0300
#220000

The primary of the example project on this page, with the eight colours worked out from it. The values are from its exported tokens.css.

8tints and shades of every brand colour
12neutral steps, tinted toward your primary
6semantic colours, from success to critical
2modes, light and dark, from the same settings

01Set

Ten tabs. A few decisions in each.

You choose what only you can choose. Everything that follows from a choice is worked out for you, and a screen underneath redraws as you go.

  1. ColorA primary, up to four secondaries and an accent, set in OKLCH or typed as hex. Seven suggested harmonies, or mix your own.
  2. TypographyDisplay, body and mono from 37 Google Fonts and three system stacks, or your own font files. A ratio and a base size set the scale.
  3. SpacingOne base unit. Nine named steps follow from it.
  4. ShapeOne character setting, from square to pillowy, across eight radius steps.
  5. ElevationOne intensity setting across six shadow tiers.
  6. MotionPace and character: how fast things move, and how springy.
  7. LayoutContent width, column count and gutter.
  8. IconsGrid size and stroke weight. Diagramma has no icon set of its own; it sets the rules for yours.
  9. LogoUpload an SVG logo and icon. Treatments, clear space and minimum size become slides.
  10. VoiceSix short fields for how the brand sounds. They become a slide too.

02Check

See what passes before a client does.

Diagramma measures your system instead of assuring you about it. Where a pairing falls short, the Audits view says so, and you change the colour while the number updates.

  • Contrast, two ways. Every text pairing shows its WCAG ratio and its APCA score, at the size it is used.
  • Colour blindness. Your brand, semantic and chart colours as seen with deuteranopia, protanopia and tritanopia.
  • Greyscale. On the Color tab, the palette without hue, to judge lightness on its own.
The Audits view, Contrast section. Ten text and background pairings, each with its size, a WCAG ratio and an APCA score. Most pass; two are marked FAIL and three WARN.
The contrast audit for the example project. Two pairings fail and three are warned about; that is what it is for.

03See

Nine real screens, redrawn as you change things.

A swatch tells you what a colour is. A screen tells you whether it works. Every project comes with nine example screens drawn entirely from your tokens.

A live preview: a SaaS dashboard with a sidebar, four statistic cards, a bar chart and an activity list, all drawn in the example project’s colours and type.
A live preview in dark mode: a stacked bar chart of sessions by channel, in the project’s categorical chart colours.
  • SaaS Dashboard
  • Marketing Landing
  • Mobile Settings
  • Sign-in Form
  • Status & Alerts
  • Data Visualization
  • Pricing Plans
  • Onboarding
  • Components & States

04Hand over

A deck to share. Files to build from.

The deck is 28 slides, and up to 31 when you add a logo and a voice. Share it as a link: whoever opens it needs no account, and can print it to PDF or download the files.

Deck slide: the cover. Saltline Design System, with the mode, the month it was last updated, the audience and the format.
Cover01
Deck slide: Tints and shades. Each brand colour as a nine-step row, four tints lighter and four shades darker.
Tints and shades10
Deck slide: Typography. The type scale from display to mono, each step set in the project’s typefaces with its size and weight.
Typography14
Deck slide: Clear space and protection. The logo with its exclusion zone marked, its minimum size, and four examples of misuse.
Logo usage04
Deck slide: Semantic colors. Six tiles for success, warning, error, info, critical and discovery.
Semantic colours11
Deck slide: How it sounds. The project’s personality, voice, tone, do, don’t and an example sentence.
Voice and tone05
tokens.css

Custom properties for every colour, size and space, with light and dark surface, text and border roles.

figma-tokens.json

The same tokens in the Tokens Studio format, for the Tokens Studio plugin in Figma.

design.md

The system described in plain text, written for an AI coding tool to read.

swatches.svg

Every colour on one sheet, to open in any design tool and pick from.

deck.html

The whole deck as one file. Open it in a browser and print it to PDF.

tokens.cssan excerpt of 378 lines
/* Generated by Diagramma. Do not edit by hand. */
/* All values derive from the parametric inputs in the editor. */
:root {
  /* ── Brand ───────────────────────────────────────── */
  --brand-primary: #8e4120;
  --brand-primary-tint-4: #fddacd;
  --brand-primary-tint-3: #e2b2a0;
  --brand-primary-tint-2: #c78c75;
  --brand-primary-tint-1: #ab664b;
  --brand-primary-shade-1: #722c0b;
  --brand-primary-shade-2: #561700;
  --brand-primary-shade-3: #3b0300;
  --brand-primary-shade-4: #220000;
  /* … */
  /* ── Surface / text / border roles — light (default) ─ */
  --surface-background: #fbf7f1;
  --surface-subdued: #eeeae4;
  --surface-raised: #fffdfa;
  --surface-sunken: #ece8e1;
  --surface-card: #fffdfa;
  /* … */
}

Who it’s for

One project, or ten.

A project is one design system: a brand, a product or a client. How many you need is the only difference between the plans.

One brand or productOne brand, product or serviceYou have a logo and a colour. Turn them into a system that whoever builds for you can follow.Business$99In-house teamsA team with several brands or productsA product line, a sub-brand, an internal tool. Give each its own project, all written down the same way.Pro$199FreelancersA freelancer with several clientsClients hire you for the identity, then ask for the guidelines. Build each client’s system in its own project.Pro$199AgenciesAn agency with many clientsTen projects on one plan, each a full system with its own deck, all opened from one dashboard.Agency$799

Plans

One payment. No subscription.

Every project includes everything on this page. Projects don’t expire, and you can buy any plan again to add more.

Business

$99one payment

1 project

For one brand, product or service

Buy Business$99

Pro

$199one payment

3 projects

For freelancers, or a team with a few brands

Buy Pro$199

Agency

$799one payment

10 projects

For agencies and teams with many brands

Buy Agency$799

A project you haven’t shared or exported from can be deleted and used again. How plans and projects work.