Skip to content
V

Build a brand guideline for a client, from logo to handoff

Use the brand guideline builder to go from a client's logo to a checked colour system, type scale and logo rules, then hand over PDFs, an HTML file, tokens and swatches, and save the brand for future jobs.

Intermediate5 min readUpdated 25 September 2026Studio · Workflow

On this page

A guideline is how a brand survives after you hand it over. This recipe takes a client's logo and a few decisions and turns them into a full guideline, checks the colours for contrast, and exports it in every form the client's team needs: a document, a web file, code tokens and swatches.

You will need

  • The client's logo as SVG, PNG or JPG.
  • The brand name and a short tagline.
  • A sense of personality: which of Bold, Refined, Playful, Minimal, Warm or Technical fits best.
  • Any fonts the client already owns, as .woff2, .woff, .ttf or .otf files, or Google Fonts names.

Result

A guideline of up to 13 pages as a screen PDF, a print PDF with bleed and crop marks, and a single HTML file the client opens in a browser. Plus CSS, Tailwind and JSON tokens, an .ase swatch file, the pages as editable Editor boards, and the brand saved in Studio so every future job is checked against it.

1. Open the builder

  1. Open Studio. At the bottom of the page, under Also here, click Brand guideline builder.
  2. Work through the four tabs in the side panel: Identity, Colour, Type and Export. The preview updates as you go.

2. Identity: logo and the rules around it

  1. Fill in Brand name and Tagline.
  2. Under Logo, click Add logo. If the logo has colour, the builder takes the brand colour from it. A flat background is removed so the mark sits on any colour.
  3. Set Clear space (¼ H, ½ H or 1 H, measured from the height of the mark) and Minimum width (16, 24, 32 or 48 px).
  4. Read Logo contrast. It lists each background with the logo version that works on it (Full colour, Reversed or Dark mono) and a contrast figure. Red means the logo is too faint there.
  5. Pick a Personality, an Art direction (editorial, graphic or systematic), Corner radius, Spacing unit and Grid.

Clear space measured from the mark itself, not in pixels, is what keeps the rule true at every size. Minimum width is the size below which the mark stops being recognisable; test it by zooming the preview out.

3. Colour: a system, not a list

  1. Check Brand colour. It is the source; secondary and accent are built around it unless you lock them.
  2. Choose a Harmony: Analogous, Complementary, Triadic or Split complement.
  3. Adjust Secondary and Accent if the client has set colours. Editing a value locks it.
  4. Set Neutral warmth to decide how much brand hue shows in the greys.
  5. Read the Contrast list. Each pairing shows its ratio and a grade, or Fail.

Fix every Fail before the client sees it. A colour pairing that fails contrast will end up as grey text on a coloured button somewhere, and the brand will get the blame. Nudge the colour until the pairings you expect to use for text pass. See Colour that works.

4. Type: families and a scale

  1. Set Headings, Body and Data and code. Type any Google Fonts family, or click the upload button to use a file. Uploaded fonts never leave this browser.
  2. Choose a 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).
  3. Choose a Base size from 14 to 18.

A small ratio suits dense material like reports and apps, where many levels of heading must stay close. A large ratio suits posters and campaigns, where the headline has to dominate. The preview under the controls shows the whole scale in the chosen fonts.

5. Explore with New take, then lock

New take in the top bar generates fresh choices for anything unlocked. Use it early to show the client options you would not have tried. Each field has a lock button; once the client approves a colour or font, lock it so later takes keep it. Page order and layouts are always kept.

6. Check before you show anyone

The button in the top bar reads All N checks pass or N issues. Click it for the list. It covers colour contrast and the logo checks, and it is quicker to fix issues now than after the PDF is in the client's inbox.

7. Shape the document

  1. Choose Deck (landscape, for presenting) or Document (portrait, for reading and printing) in the top bar.
  2. The page list holds Cover, Principles, Logo, Clear space, Colour, Tints, Contrast, Typography, Type scale, In use, Voice, Tokens and Close.
  3. Drag pages, or use the arrows on each thumbnail, to reorder.
  4. Pages with more than one layout show a counter such as 1/3. Click it, or Alt-click the thumbnail, for the next layout.
  5. Click the eye on a page to leave it out of exports. The reset button restores the default order and layouts.

8. Export for everyone who will use it

ExportForWhat you get
Screen PDFThe client, email, presentingA PDF of the included pages.
Print PDFA printed manualA4 portrait (Document) or 297 × 167 mm (Deck), 300 dpi, 3 mm bleed and crop marks. RGB, so the printer converts.
HTML handoffAnyone with a browserOne file with arrow-key page navigation, logo downloads and click-to-copy colours. Google fonts are embedded where possible.
Tokens for developersThe web or app teamCSS, Tailwind or JSON. Copy it, or click Save file.
Download .aseOther designersAdobe Swatch Exchange, grouped by role, for Illustrator, Photoshop and InDesign.
EditorYou, for custom editsEvery page as a board of real text, shape and image layers.

Open the pages in the Editor when the client needs wording the builder does not generate, such as their own voice examples. Changes made there do not flow back to the builder, so finish the system first and edit last. To export the edited pages, use File > Export as…, choose All under Boards to export, and pick PNG, or PDF with One PDF for a page per board.

9. Save it as a client brand

  1. On the Export tab, click Save as a client brand in Studio.
  2. The brand appears in Studio under Client brands, with its colours by role, fonts, logo, logo rules and voice.
  3. On any job, choose it under Which brand is this for?. The Editor then flags off-brand colours, wrong fonts, logo size and clear space as you design.
  4. In the brand's page, Use as the Editor brand kit puts its colours, fonts and logos ready in every design.

Common problems

  • A font could not be embedded in the HTML file. The file then loads it from Google when online. Tell the client, or choose a font that embeds.
  • The brand colour came out grey. A black, white or grey logo leaves the brand colour alone. Set Brand colour by hand.
  • The guideline could not open in the Editor. If every page is hidden, include at least one in the page list.

Open Studio

Was this guide useful?

Also useful

Build a brand guideline with locks and new takesThe 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 readSave client brands and reuse them on every jobKeep each client's colours, fonts, logos, logo rules and voice as a brand in Studio. Pick it on a job and the Editor checks the design against it, flagging off-brand colours, wrong fonts, small logos and crowded clear space.Beginner3 min readBuild a brand identity from brief to rulesTurn a brief into a direction, then a logo, colour, type and a set of rules someone else can follow, using Studio and the brand guideline builder.Intermediate4 min read