Skip to content

For one brand or product

Your brand, written down.

Most brands run on a logo, a colour and whatever the last designer remembered. One Diagramma project turns those into a system: every colour, size and space named, measured and ready to hand to whoever builds next.

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.
The Color tab. The primary colour is set by value, chroma and hue, or typed in as a hex code; the screen underneath redraws as it changes.
  1. Start from what you have

    Type your brand colour in as a hex code, choose your typefaces or upload your own font files, and add your logo as an SVG.

  2. Get the parts you never had

    Four tints and four shades of every brand colour, a scale of neutrals, colours for success, warning and error, a type scale, spacing, corner radii and shadows. In light and dark.

  3. Hand it over once

    A guidelines deck that opens from a link, tokens.css for your developer, a Tokens Studio file for Figma, and design.md for an AI coding tool.

What you hand over

A deck, made from the settings.

These are slides from the deck Diagramma made for an example project. Yours carries your own colours, type, logo and words.

Deck slide: the cover. Saltline Design System, with the mode, the month it was last updated, the audience and the format.
Cover
Deck slide: Brand palette. A terracotta primary, three secondaries, an empty fourth slot and an amber accent, each with its hex code.
Brand palette
Deck slide: Clear space and protection. The logo with its exclusion zone marked, its minimum size, and four examples of misuse.
Logo usage

The plan

Business. 1 project.

$99 · one payment

One project is one design system. Edit it, share it and export from it as often as you like.

No subscription, and nothing renews. Projects don’t expire.

Also for