Skip to content
V

A route

I want to build a brand.

Logo, colour, type and the rules that keep them consistent. 16 guides, about 54 minutes in total, in the order that gets you there.

The route, in order

  1. From brief to logo, colour, type and rules: the thinking before the tools.Build 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 minDesign craft
  2. Everything a finished identity includes, mapped to the builder.The brand identity checklistA brand identity is finished when someone who has never met you can use it correctly. That takes six groups: logo (versions for light, dark and one colour, clear space, minimum size), colour (brand, secondary, accent and neutrals, with tints and the text pairings that pass contrast), type (a heading and a body font, a scale, a base size), layout (a spacing unit, a grid, corner radius), voice (a few words, dos and don'ts), and files in the formats each person needs. Write it down as a guideline with examples in use.Beginner2 minStudio
  3. Why brands drift and the system that stops it: one kit, one master, a check before export.How to keep a brand consistentA brand stays consistent when nobody has to remember it. Put the brand in one place the tools read from: colours with roles (primary, accent, background, text), two fonts with a scale, and logo files with a minimum size and clear space. Design one master per campaign and derive every other format from it instead of redrawing each one. Check before you export: off-brand colours, wrong fonts, a logo too small or crowded. Write the rules down once as a guideline so the next person, or you in six months, gets the same result. Consistency is a system, not discipline.Beginner6 minStudio
  4. Build the guideline itself, with locks for the parts the client has approved.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 minStudio
  5. Clear space and minimum size, set from the logo and checked in every design.Logo clear space and minimum size: how to set the rulesClear space is the empty margin around the logo that nothing else may enter. Measure it from the logo itself so it scales: a common rule is half the height of the mark on every side, with a quarter for tight layouts and a full height for spacious ones. Minimum size is the smallest the logo may appear before detail breaks up: set it as a width in pixels for screens (small marks often 24 to 48 px; wordmarks wider) and in millimetres for print, found by printing it smaller until it stops reading. Write both into the guideline with a diagram, and check designs against them.Beginner2 minStudio
  6. What the builder takes in, what it exports, and what stays on your device.Make brand guidelines online, free, no accountOpen Studio and choose Brand guideline builder. Add the brand name, the logo (SVG, PNG or JPG; a flat background is removed), a brand colour and a personality. The builder generates a colour system in OKLCH ramps with contrast checks, a font pairing and type scale, logo rules and thirteen guideline pages. Lock what you have decided and press New take to explore the rest. Export a screen PDF, a print PDF with bleed and crop marks, a single-file HTML handoff, CSS, Tailwind and JSON tokens, and .ase swatches. It is free, needs no account, and runs on your device.Beginner2 minStudio
  7. From a guideline to a kit every design starts from.From brand guidelines to a working brand kitThere is no PDF import; a guideline is a document, and the kit needs values. If the guideline was made in the guideline builder, press Save as a client brand in Studio on its Export tab and everything carries over. If it came from elsewhere, open Studio, Client brands, New brand, and type in what the guideline states: each colour's hex with its role, the headline and text fonts, the logo files marked for light or dark backgrounds, the smallest size and clear space, and the voice. Then press Use as the Editor brand kit, and choose the brand on each job so designs are checked against it.Beginner2 minStudio
  8. One brand for everyone, encrypted and in sync.Share a brand kit with your teamIn Voidcanvas the brand lives in Studio as a client brand (colours with roles, fonts, logos, logo rules, voice). To share it with the people you work with, make a team (each person needs an account), open the brand and set Shared with to the team: it syncs to everyone within seconds, encrypted with the team's key. Each person can then press Use as the Editor brand kit so their Editor starts on brand. For people outside the team, send the HTML handoff from the guideline builder: one file with the logos, colours and fonts.Beginner2 minStudio
  9. Palettes and ramps that hold up on screen and on paper.Choose colours that work on screen and in printBuild palettes with roles, make even ramps in OKLCH, pass WCAG 2.2 contrast, and know what happens when RGB colour goes to a printer.Intermediate5 minDesign craft
  10. The WCAG numbers, ramps in OKLCH, and the builder that checks every pairing.Build a brand colour palette that passes contrastA brand palette that works is a brand colour, a secondary and an accent chosen for a job each, a neutral family for text and surfaces, and a ramp of tints and shades for every one of them, with a short list of approved pairings that pass contrast: 4.5:1 for body text, 3:1 for large text, icons and the brand colour used as a graphic. Most brand colours fail as text on white at full strength; the fix is to use a darker step of the same ramp for text and keep the bright step for surfaces and accents. The builder below generates the ramps and checks every pairing for you.Intermediate4 minStudio
  11. Choose and pair type, and set a scale the whole brand shares.Set type that reads wellHierarchy, pairing, size, measure, leading and tracking: the numbers that make text easy to read, and where to set each one in Voidcanvas.Beginner5 minDesign craft
  12. Free pairs by personality, and how to test one.Font pairing for a brand: choose by personalityUse two fonts with one job each: a heading font with character and a body font that reads easily. Pair for contrast in structure (a serif over a sans, a condensed bold over a calm text face) and agreement in proportion (similar x-height and width). Never pair two fonts that are nearly the same. Choose by the brand's personality, test the pair on real copy at real sizes, and remember one family in several weights is always a safe choice.Beginner2 minDesign craft
  13. Load the brand's own font files, and what the licence allows.Use your own font file in a browser editorOpen the Character panel (Window, Character), click Add a font file from this device and choose a .ttf, .otf, .woff or .woff2 file. The font is then available to every text layer in that design, is saved inside the design so it opens correctly on another device, and is never requested from or sent to any server. Fonts installed on your computer are not listed automatically; browsers do not expose them, so add the file. To have it ready in new designs, add it to one design and save that as a template.Beginner2 minEditor
  14. Keep the colours, fonts and logos one click away in every design.Keep brand colours, fonts and logos readySave your brand colours, fonts and logos once, and have them ready in every design you open in the Editor.Beginner2 minEditor
  15. Hand the system to clients, printers and developers in the formats they use.Export a brand guideline for clients, printers and developersEvery export from the brand guideline builder: a screen PDF, a print PDF with bleed and crop marks, a single-file HTML handoff, editable Editor layers, CSS, Tailwind, design tokens JSON and Adobe .ase swatches.Intermediate4 minStudio
  16. The whole job for a client, from logo to handoff.Build a brand guideline for a client, from logo to handoffUse 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 minWorkflows