A brand guideline in an afternoon: OKLCH ramps, WCAG 2.2 contrast and a type scale

A brand guideline is often the last thing made and the first thing ignored, because it takes days to build by hand and is out of date by the time it ships. Most of that work is not judgement. It is arithmetic: tints and shades, contrast ratios, a size for every heading. The brand guideline builder in Studio does the arithmetic so your time goes on the decisions.

Decide a few things, lock them#

Open Studio and choose Brand guideline builder. Start on the Identity tab with the brand name, the logo (SVG, PNG or JPG) and a Personality: Bold, Refined, Playful, Minimal, Warm or Technical. If the logo has a clear colour, it becomes the brand colour.

Every value in the system is either locked, because you set it, or free, generated for you. New take regenerates everything free and leaves locked values alone. That is how you explore: lock what the client has agreed, and press New take until the rest works. Choosing a value locks it; the padlock beside each field toggles it.

Colour ramps in OKLCH#

Each colour gets a ramp from 50 to 900 in ten steps. The ramps are built in OKLCH rather than HSL, and that choice is the reason the system holds together. HSL says pure yellow and pure blue are equally light; your eye sees yellow as nearly white and blue as nearly black. OKLCH measures lightness the way it looks, so step 500 of a yellow and step 500 of a blue look equally light, and contrast lines up across hues.

On the Colour tab, set the Brand colour and a Harmony: Analogous, Complementary, Triadic or Split complement. The Secondary and Accent colours are built from it and adjusted until text on them reads. Neutral warmth sets how much of the brand hue shows in the greys. Chroma eases off at the lightest and darkest steps so tints stay clean, and the system adds success, warning and error colours.

Contrast, checked against WCAG 2.2#

WCAG measures contrast as a ratio from 1:1 to 21:1. Normal text needs 4.5:1 for level AA and 7:1 for AAA; large text and graphics such as icons need 3:1. WCAG 2.2 keeps the same contrast rules as 2.1.

The Contrast list shows the pairings the guideline recommends, such as body text on the light surface and button labels on the accent, each graded AAA, AA, AA large or Fail. Because every ramp uses the same lightness per step, the numbers are predictable: on white, step 600 usually passes AA for body text and step 700 reaches AAA, though the exact figure depends on the hue. The logo gets the same treatment: where its outer edge falls below 3:1 against a background, the builder recommends the Reversed or Dark mono version.

The button at the top right reads All N checks pass or N issues. It also checks that body text is at least 16 px and that the accent is distinct from the brand colour. Fix an issue by locking a different colour or font, or with New take. Colour that works explains the theory in full.

A type scale#

On the Type tab, choose Headings, Body, and Data and code fonts from Google Fonts, or upload your own font files, which never leave the browser. Then pick a Scale, from Minor third (1.2) to Golden ratio (1.618), and a Base size of 14 to 18 px. Each size is the one below it multiplied by the ratio, giving Display, H1 to H4, Body, Small and Caption.

Line height and letter spacing are set per size: large headings get tighter leading and tracking, small text a little more room. Small and Caption never go below 13 and 12 px, so a steep scale cannot produce unreadable captions. See Typography fundamentals.

Pages and exports#

The guideline has 13 pages, from Cover and Principles through Logo, Colour, Contrast and Type scale to Voice, Tokens and Close, as landscape Deck slides or portrait Document pages. Reorder them, leave pages out, or switch layouts. The Export tab then gives each reader what they need:

Save as a client brand in Studio turns the finished system into a brand you can pick on any job, and the Editor then flags off-brand colours, wrong fonts, small logos and crowded clear space. Brand guideline exports covers every file.

Where your judgement still matters#

The builder does not choose the brand colour, the logo or the personality, and it cannot tell you whether the type feels right for the client. Those are the decisions worth an afternoon. It also shows CMYK only as an approximate starting point: all exports are RGB, so confirm print colours against a proof. For the whole process from logo to handoff, see Build a brand guideline for a client.

Open the brand guideline builder in Studio