Build a brand guideline with locks and new takes
The brand guideline builder turns a brand colour, a logo and a personality into a full system: colour ramps, contrast pairings, a type scale, logo rules and a paged guideline. Lock what you have decided, and New take explores everything else.
Intermediate5 min readUpdated 25 September 2026Studio · Brand guideline builder
A brand guideline tells everyone who touches a brand how to use it. The builder makes one from a few decisions and fills in the rest as a working system, then checks it: every text pairing against WCAG contrast, the logo against every background. Use it for a new identity, or to document one a client already has.
Open it from the Studio home screen with Brand guideline builder. The controls are on the left in four tabs (Identity, Colour, Type, Export), the page list is in the middle and the page preview on the right.
Locks and New take
Every value in the system is either locked, because you set it, or free, generated for you. New take regenerates everything free and leaves everything locked alone. It is how you explore: lock the parts the client has agreed, and keep pressing New take until the rest clicks.
- Choosing a value locks it. Pick a harmony, a font or a radius and its padlock closes.
- The padlock beside a field toggles it. Locking a free value keeps what is showing now; unlocking lets New take change it.
- Page order, which pages are included, and their layouts are always kept.
Identity
| Control | What it does |
|---|---|
| Brand name, Tagline | Shown on the cover and throughout |
| Logo | SVG, PNG or JPG. The logo is trimmed to its visible edges; a flat background (a JPG on white) is removed so the mark sits on any colour. If the logo has a clear colour, it becomes the brand colour |
| Clear space | ¼ H, ½ H or 1 H: the margin around the logo, measured from the height of the mark |
| Minimum width | 16px, 24px, 32px or 48px on screen |
| Logo contrast | For the light surface, brand colour, dark surface and secondary colour: which version of the logo to use there and its contrast ratio |
| Personality | Bold, Refined, Playful, Minimal, Warm or Technical. Steers the fonts, scale and corners the generator reaches for, and writes the voice |
| Art direction | Editorial, Graphic or Systematic. Sets the three design principles |
| Corner radius | 0, 4, 8, 12 or Pill |
| Spacing unit, Grid | 4px or 8px; 6, 8 or 12 columns |
The logo check keeps the logo in full colour wherever its outer edge reaches 3:1 against the background, the WCAG minimum for graphics. Where it does not, it recommends the Reversed (white) or Dark mono version, whichever reads better. Details enclosed inside the mark do not count, only the colours that meet the background.
Colour
- Brand colour is the source. Type a hex or use the picker.
- Harmony: Analogous, Complementary, Triadic or Split complement. Decides where the secondary and accent sit around the colour wheel.
- Secondary and Accent are built from the brand colour and harmony, then darkened or lightened until white or dark text reads on them. Set either by hand to lock it.
- Neutral warmth: how much of the brand hue shows in the greys, from 0% (pure grey) to 100%.
Each colour gets a ramp from 50 to 900, ten steps. The ramps are built in OKLCH, a colour space where equal steps look equally different, so step 500 of a yellow and step 500 of a blue look equally light. Colour eases off at the lightest and darkest steps, so tints stay clean. The system also adds success, warning and error colours. See Colour that works.
Contrast lists the pairings the guideline recommends, such as body text on the light surface, button labels on the accent, and secondary text, each with its ratio and grade: AAA (7:1), AA (4.5:1), AA large (3:1) or Fail. Brand colour used as text or an icon needs 3:1; the rest need 4.5:1.
Type
- Headings, Body, and Data and code fonts. Type any Google Fonts family name, or press the upload button to use a font file from this device (.woff2, .woff, .ttf or .otf). Uploaded fonts never leave the browser.
- Scale: Minor third (1.2), Major third (1.25), Perfect fourth (1.333), Aug. fourth (1.414), Perfect fifth (1.5) or Golden ratio (1.618). Each size is the one below it times this number.
- Base size: 14 to 18 px for body text.
The preview shows the full scale, Display, H1 to H4, Body, Small and Caption, with sizes. Line height and letter spacing are set per size: big 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.
Checks
The button at the top right reads All N checks pass or N issues. Open it for the list: every contrast pairing, whether body text is at least 16 px (smaller is hard to read on screen), whether the accent reads as distinct from the brand colour, and the logo on each background. Fix issues by locking a different colour or font, or with New take.
Pages
The guideline has 13 pages: Cover, Principles, Logo, Clear space, Colour, Tints, Contrast, Typography, Type scale, In use, Voice, Tokens and Close. Choose Deck for landscape slides (1600 × 900) or Document for portrait pages (1240 × 1754).
- Reorder by dragging a thumbnail, or with the up and down arrows that show when you hover it.
- Leave a page out of every export with its eye button. It stays in the list, faded.
- Change a layout where a page has more than one: press the layout chip (such as 1/3), or Alt-click the thumbnail. Shift+Alt-click goes back. The Cover has Art direction, Monolith and Centred; Colour, Logo, Principles, Voice and Close have two each.
- Reset pages (the circular arrow above the list) restores the default order and layouts.
- → or ↓ or Page Down
- Next page in the preview
- ← or ↑ or Page Up
- Previous page
Your work is saved as you go
The builder saves your brand, locks, page list and logo in this browser a moment after each change. Come back later and it says Picked up where you left off. Start over, then Clear and start over, clears it for a new brand; Keep it cancels. In a private session nothing is written to disk, so the browser warns you before you leave the page. See Private session.
On a phone
On a narrow screen the preview comes first, the page list scrolls sideways under it, and the controls follow below. Everything works; it is just a longer scroll.