Brand kits

A brand kit is your brand, written down in one place: how you sound, the colours and typefaces you use and what each one is for, your logo files, examples of your imagery, and the reason behind each rule. Everything new you make in Napkin starts from it, so a deck, a doc export or an interface looks and sounds like you from the start. zv1 reads your whole kit before it writes or designs anything for you.

You'll find brand kits in Napkin's Brand tab.

Your first kit

Select New brand kit to create one. It comes with a section for each part of a brand: Overview, Voice, Colours, Typography, Logo, Imagery, Motion, Layout and Examples. If your workspace already has brand colours, they're filled in under Colours, so you can start by adjusting them. Your first kit becomes the workspace default, the kit everything new in your workspace starts from.

Your changes save as you go. To rename the kit or add a description and tags, open File → Edit details.

Sections

The sections are listed on the left. Write each one in your own words; headings, lists and links all work. Then add what that section needs:

• Colours: add each colour with a name and a note on how to use it.
• Typography: add each typeface with what it's for, and see a sample set in it. Type the name of any typeface, or pick a style (sans, serif, mono, rounded or handwritten). Then add its font files: select Get from Google Fonts for a typeface Google Fonts has, or Upload font files for your own (.woff2, .woff, .ttf or .otf). With its files, your decks and sketches are set in the typeface on every device. Without them, each device shows the closest typeface it has.
• Logo: upload each version of your logo, such as the full logo, the mark on its own, or a reversed version, and say when to use each. Give a version a background colour to see it the way it's meant to be seen.
• Imagery: upload examples of your photos and illustrations, and say what makes each one right.
• Voice: list the words you always use, and the words you avoid with what to say instead.
• Examples: upload screenshots of work that gets your brand right, like a slide, a landing page or an ad, and paste links to pages that do. Say what makes each one good. zv1 looks at your examples before it designs anything, and holds its work to them.
• Rules, in any section, each with a reason. "Keep orange to a tenth of the page" is a rule; "it reads as a warning" is the reason. With the reason written down, you, your team and zv1 can get it right in cases the rule never mentions.
• Files, in any section, for anything else worth showing, like a motion reference.

To rename, reorder or remove a section, open its menu on the left. To add one, such as sound or packaging, select Add section. If you remove a section by mistake, select Undo to bring it back.

Uploaded files are saved to your workspace's files, so you can find them there too.

How kits are used in Napkin

The last entry on the left, How kits are used in Napkin, is where you choose a colour for each job: body text, secondary text, backgrounds, cards, titles and links, and highlights. You also choose a typeface for headings, body text and code, how round corners are, and the order of chart colours. The preview beside your choices shows a slide, a paragraph of a doc, a card with a button, and a chart.

Every colour you name is available in Napkin's colour pickers, whether or not you give it a job.

Where you'll see your brand

• Decks: new decks start with your brand's background, typefaces and text colours, and so do slides you add later. Your brand kits are listed first in the deck theme picker, so you can go back to your brand after trying something else.
• Colour and typeface pickers: your brand's colours and typefaces are at the top of every picker in Napkin.
• Docs: docs are set in your brand's typefaces, text colours and link colour, and so are their Word, HTML and PDF copies. Any doc can use another kit, or none, from View → Brand kit.
• Charts: charts on a sheet use your chart colours in order and your body typeface, on screen and in exported PNGs. Any sheet can use another kit, or none, from View → Brand kit.
• Interfaces: every new interface includes a brand.css file with your brand, and the starting page is already styled with it. When you write your own styles, use var(--brand-accent), var(--brand-font-body) and the other --brand- values instead of fixed colours; each colour and value you name has one too, like var(--brand-color-primary).
• zv1: before it writes or designs anything for you, zv1 reads your brand. It follows your voice and your rules, checks its wording against the words you avoid, and restyles a deck or an interface in your brand when you ask.

When you change your brand kit, new work starts from the change. To bring existing decks and interfaces up to date, apply your brand to them again; until you do, they keep the look they had.

More than one kit

Your workspace can hold several kits: one for a campaign that bends the rules, a sub-brand, or a draft you're trying out. To start a kit from an existing one, open File → Duplicate. Only one kit is the workspace default at a time. To switch, open File → Make this the workspace default in the kit you want; the previous one is kept as it was, so you can switch back at any time. To go without a default, open File → Stop using as workspace default in the default kit: the kit stays, and shared links, new docs, decks and interfaces go back to their plain look until you choose a default again.

Anyone in your workspace can create and edit kits. Only workspace owners and admins can change, choose or archive the workspace default.

You can ask zv1 to put a kit together from your website, an existing deck or what you tell it. zv1 always makes a separate kit for you to review, and never changes your workspace default; you decide whether its kit becomes the default.

Downloading a kit

To use your brand outside Napkin, open File → Download as .zip. You get a folder with:

• brand-guidelines.md: every section of the kit, with its colours, typefaces, words, files, links, and rules with their reasons.
• brand.css: your colours, typefaces and corner radius as CSS variables, with your font files loaded.
• tokens.json: your colours and typefaces as design tokens, for design tools and build pipelines.
• kit.json: the complete kit.
• Your font files, and every file you uploaded, in a folder for each section.

Archiving

To put a kit away, open File → Archive. To bring it back, find it among the archived kits in the Brand tab. If you archive the workspace default, your workspace's brand colours are used until you choose another kit.