Export a brand guideline for clients, printers and developers
Every 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 min readUpdated 25 September 2026Studio · Exports
On this page
One brand, different readers. The client wants something to scroll through, the printer wants bleed and crop marks, the developer wants tokens, and the next designer wants swatches in Illustrator. All of these come from the Export tab of the brand guideline builder, and all are made on your device.
Exports include only the pages switched on in the page list, in the order shown, in the orientation you chose (Deck or Document). See Build a brand guideline.
Which export to send
| Export | Who it is for | File |
|---|---|---|
| Screen PDF | Clients and teams reading on screen or in email | name-guidelines-landscape.pdf or -portrait.pdf |
| Print PDF | A printer, for a bound book or handout | name-guidelines-print-landscape.pdf or -portrait.pdf |
| HTML handoff | Anyone who needs to copy colours or download logos | name-brand.html |
| Editor | You, to adjust a page by hand | Opens in the Editor |
| CSS, Tailwind, JSON | Developers | name-tokens.css, tailwind.name.js, name.tokens.json |
| .ase | Designers in Illustrator, Photoshop or InDesign | name.ase |
Screen PDF
One page per slide at the slide's own shape, rendered at twice the page's pixel size so text stays sharp when zoomed. Good for email and for presenting.
Print PDF
- Trim size: A4 portrait (210 × 297 mm) for Document, or 297 × 167 mm (16:9) for Deck.
- 300 dpi, 3 mm bleed on every side, and crop marks outside the bleed.
- TrimBox and BleedBox set for the printer's imposition software.
- A slug line on each page with the brand name, page number and title, trim size and bleed.
HTML handoff
One self-contained file the client opens in any browser, with no hosting and no account. It has:
- The guideline pages as slides, moved with the left and right arrow keys.
- Logo downloads: Full colour PNG, Reversed white PNG, Dark mono PNG, and Original SVG when you added an SVG.
- Every colour, click to copy as HEX, RGB or OKLCH, and every ramp step, click to copy its hex.
- Type, contrast pairings, and the CSS, Tailwind and JSON tokens with a Copy button.
Google fonts are embedded in the file (the Latin character sets), so it looks right offline. Fonts you uploaded are embedded too. If a Google font cannot be fetched while exporting, the file still saves and says which font it will load from Google when online.
Open in the Editor
Editor sends every included page to the Editor as its own board, with real layers: text stays text, shapes stay shapes, and the logo stays an image. Drawing that has no Editor equivalent, such as hatching or dashed guides, comes across as an image layer in the right place in the stack. Use this to add a page the builder does not make, or to adjust one layout by hand. See Artboards.
Save as a client brand in Studio
Saves the resolved system as a brand in Client brands: brand, secondary and accent colours, the light surface as background, the ink colour as text, a mid neutral, the heading and body fonts, the type scale, the logo with its minimum size and clear space, and the voice with its do and don't lists. Pick it on a job and the Editor checks every design against it. See Save client brands and reuse them.
Tokens for developers
Switch between CSS, Tailwind and JSON to see the code, then Copy it or Save file.
| Format | What is in it |
|---|---|
| CSS | Custom properties on :root: every colour and ramp step (such as --color-brand-500), neutral ramp, surfaces and ink, font stacks with fallbacks, size, leading, tracking and weight for each type step, spacing steps in rem, and the radius |
| Tailwind | A tailwind.config.js theme extension: colours with DEFAULT and 50 to 900, font families, font sizes with line height, letter spacing and weight, and a brand border radius |
| JSON | Design Tokens Community Group format: colours, typography, spacing and radius, each with $type and $value, for tools such as Style Dictionary |
Adobe swatches (.ase)
Download .ase gives an Adobe Swatch Exchange file grouped by role: brand, secondary and accent, each with its 50 to 900 ramp, then neutral, then semantic (success, warning, error). Load it from the Swatches panel in Illustrator, Photoshop or InDesign. The swatches are RGB.
Common problems
- The PDF, HTML and Editor buttons are greyed out. Every page is left out. Switch at least one page back on in the page list.
- The export failed. The message says which export and why. Print PDFs are the heaviest: on a phone, try the screen PDF, or leave some pages out and export in two parts.
- A font looks different in the HTML file. It could not be embedded, so it loads from Google when online. The message after saving names it.