A brand system small enough that a team will use it

Brand guidelines for startups get used when they stay small: one type pair, a short color list, logo files, and three sentences of voice.

By
Hands typing on a laptop at a wooden desk near a window. This is the ordinary place a small team opens a short brand page.
A short page, open where the work happens. Photograph via Unsplash.

Brand guidelines for startups should fit on a few pages a busy person will open again. A small system is one type pair, a short color list, the logo files, and three sentences of voice. A large guidelines book feels thorough on the day it is presented. It then sits in a folder while the team invents the next screen from memory.

The test is use. If a founder can style a new page, and an engineer can style a button, without booking a meeting, the guidelines are the right size. If they have to ask where the files live, the system is still a performance.

One type pair, with jobs

Pick a face for headlines and a face for text. Two weights of each is plenty: a regular and a stronger one. Write down the sizes you mean for a page title, a section heading, and body text, on a phone width and on a desk width. Those six numbers prevent more drift than a chapter about typographic history.

Choose faces you can license and ship. A beautiful trial font that the repo cannot include will be replaced by a default the first week someone else opens the file. Put the license note next to the family name. Say where the files live.

Check the pair in a real paragraph, not in a single word on a slide. A face that looks sharp at poster size can fall apart at sixteen pixels. Read it on the phone you actually carry. If you squint, it is the wrong face, or the wrong size, or the wrong color against the background.

The Web Content Accessibility Guidelines treat text and images as content, and they organize that work under a first principle: perceivable. A type pair that only works for someone with perfect vision, on a bright monitor, is a pair the public site will regret. You are not certifying the brand by choosing well. You are refusing a first decision you already know will fail in the product.

A short color list

Speckled ceramic cups and a two-tone vase arranged on a white shelf. It accompanies an article about A brand system small enough that a team will use it.

Name colors by the job they do.

  • Background, the field the page sits on.
  • Text, the color of ordinary sentences.
  • Accent, the color of the primary action and almost nothing else.
  • Support, for hairlines, secondary labels, and quiet fills.
  • A danger color and a success color, if the product has errors and confirmations. Skip them on a marketing site until you need them.

Five names are a system. Fifteen names are a paint deck. Each extra color needs a job or it will be used as decoration, and decoration is how two pages stop matching.

Write the hex value beside the name. Write the pairs that are allowed to touch: text on background, accent on background, text on accent if a label ever sits inside a button. Look at those pairs in sunlight and in a dark room. The WCAG principles are the standard to check against when you want a shared definition of "perceivable," including for people who do not see the palette the way the founder does.

Record a dark-surface version only if you will ship one. A second set of colors, planned with the first, is a real decision. A filter applied on Friday is how contrast falls apart.

Logo files a person can find

Export the mark in the versions the work will demand: on a light ground, on a dark ground, a single-color version, and a small version that stays legible as a favicon. SVG for the web. A straightforward PNG for tools that still ask for one.

Name the files for those jobs. Put them in one folder with a date or a version in the folder name, so a later revision does not silently overwrite the mark that is already on the site. The next person should be able to tell which file is current without opening all of them.

Write one rule for clear space and one rule for minimum size, in words. A diagram can sit beside the words. The words travel better into a chat message when someone is about to crop the logo into a circle it was never meant to enter.

Three sentences of voice

A glass-walled office corridor with a sofa, a floor lamp, and black pendant lights. It accompanies an article about A brand system small enough that a team will use it.

A small visual system still sounds like someone. Write three sentences the company is willing to say in public. They should be specific enough that a stranger could tell two brands apart if they only read those lines.

Then stop. Three sentences can govern a homepage headline, a button, and an error. A voice chapter with twelve adjectives will be summarized by each writer into a different subset. You can add a sentence later, when a real page needs a way of speaking you have not covered. Add it to the same short page.

Read the three sentences next to the type and the color. If the words are dry and the colors are carnival, or the words are playful and the type is a legal brief, the system is two systems. Adjust the louder one. The offer decides which side moves.

What a long book adds, and what it costs

A long book usually adds philosophy, a history of the mark, incorrect-use posters, and a photography chapter for pictures you have not shot. Some of that becomes useful at a later size of company. At the size where one person writes the site and another ships it, the extra pages hide the four things they needed.

Incorrect-use examples are the exception worth keeping, in miniature. Show the logo stretched, the accent used as a full-page flood, and the headline face used for a paragraph. Three pictures teach the boundary. A gallery of twenty teaches people to skim past the gallery.

Paper helps only if someone will print it and put it on a wall the team sees. A PDF that requires a scroll to reach the hex values will lose to a note in the repo. Put the guidelines where the work happens. A page in the project, or a short document linked from the README, beats a brand site that the engineers do not have a password for.

Keeping it small on purpose

When a new need appears, add one line and remove a line that no one followed. The page should stay readable in one sitting. If it crosses into a document people "will review later," it has become the book you were avoiding.

Review it when the offer changes, when a second product appears, or when a new teammate asks a question the page does not answer. Those are maintenance events. A quarterly rebrand of the guidelines, done out of restlessness, is how a small team loses the only shared taste it had.

Hanabi builds this kind of system as part of the site, so the type and color are already in the interface rather than trapped in a presentation. The work sits with Hanabi's services. Engineers need a still shorter view of the same decisions, which is why the next piece is Brand guidelines your engineers will actually open.

Frequently asked questions

How long should startup brand guidelines be?

Short enough to read in one sitting. One type pair, a handful of colors, the logo files, and three sentences of voice will fit on a few pages. If the document needs a table of contents before anyone can find the hex values, it is already too long for the team that has to use it.

Can we add more colors later?

Add a color when a real screen has a job the list does not cover, and name that job. Skip colors that exist to make a single slide more interesting. The list stays short because every extra color is a decision the next person has to remember.

Where should the guidelines live?

Put them where the work happens: a page in the project, or a short document linked from the repository. A PDF in a chat thread will be replaced by memory. The current file should be obvious without asking who exported it.

Sources and further reading

  1. WCAG 2 Overview, W3C

Written by

Hanabi

Hanabi is a product design and web development studio. The studio writes about clear websites, brand systems, and product interfaces for founders.

Keep reading

All articles