A logo is not a brand system
A logo has to work small, on a dark surface, and beside type. The system around it is what keeps the next page from inventing a new palette.

A brand identity system is the set of decisions that keeps the next page from inventing a new palette. A logo is one of those decisions, and it is the one people ask for first. The mark has to work small, on a dark surface, and next to type. If it only works large and alone, you have a drawing. You do not yet have a system.
The system is what a teammate uses on a Tuesday when nobody from the original project is in the room. It answers which type, which colors, how much space around the mark, and what they must not improvise. Without those answers, every new page becomes a fresh opinion.
What the mark has to survive
Put the logo in a browser tab, in an email signature, and in a footer. Those are the sizes it will actually live at. A mark with hairline details, a tiny word inside a shape, or five colors that only separate on a poster will turn to mud. If you cannot read it at favicon size, simplify it before you fall in love with the poster version.
Place it on a dark surface and on a photograph. Many marks are designed on white and then discover, at launch, that the footer is ink and the social image is a picture. You need a version that holds on dark, and a version that holds when the background is not flat. Sometimes that is a single-color form. Sometimes it is the wordmark in the text color, with the symbol dropped. Decide that on purpose.
Set it next to a real headline, not in a frame by itself. The relationship to type is the test people skip. If the logo uses a different idea of geometry than the typeface, the header will look like two companies sharing a bar. Align the mark to the cap height or the x-height of the word beside it, and write down the space that must stay clear. That clear space is part of the logo. It is not a suggestion.
The system around the mark

The system is short. It holds the type you already chose, the color list, the logo files, and the few rules that stop drift. One of those rules is: do not recolor the mark to match a slide. Another is: do not add a shadow, a gradient, or a container the files do not include. A third is: the accent color is for action, not for decorating the wordmark every time someone wants emphasis.
Write the rules as prohibitions you have already needed, not as a philosophy. If a contractor stretched the mark to fill a banner, the rule is that the mark is never distorted. If someone typed the name in a different font beside the symbol, the rule is that the name is either the official wordmark or the text style, not a third face. Specific rules get followed. Atmospheric ones get admired and ignored.
Color is where the next page usually cheats. Someone needs a chart, a badge, or a section background, and they pick a cousin of the accent because the official list feels too small. The cousin is how you end up with four blues. The system says which roles exist: background, text, a quiet line, one accent. A new role is a decision, added once, named, and then reused. It is not a one-off hex value in a slide.
The W3C describes WCAG 2 as a shared standard for making web content more accessible, with guidelines under four principles, starting with perceivable. A mark participates in that. If the logo is the only way a person knows which site they are on, it has to be visible on the surfaces you allow. Text in or beside the mark has to be readable. A system that ships a beautiful dark-on-dark lockup is asking the next page to fail a basic test. Record the pairs that work, and retire the pairs that do not.
Files a person can actually use
Export the versions you tested, and only those. A horizontal lockup, a stacked lockup if you truly need it, a single-color mark, and a favicon. SVG for the web, and a plain PNG for places that will not take SVG. Name the files for the use: logo-on-light, logo-on-dark, mark-only. A folder of unnamed exports called final, final2, and FINAL is how the wrong file gets posted.
Include the wordmark as live text instructions too. Which font, which weight, which spacing. Some places cannot use your SVG, and a person will recreate the name. If you do not tell them how, they will pick a nearby font and call it close enough. Close enough is a second logo.
Do not ship a hundred variations in the name of flexibility. Flexibility here means the approved versions cover the surfaces you actually have. A social avatar, a website header, a document cover, an app icon. If a surface is not in that list, the answer is to use the closest approved file, not to draw a new one in a chat thread.
Where teams invent a second brand

The second brand usually appears in the first month after the logo is approved. A launch deck needs a big number, so someone introduces a new display face. A partner asks for a co-branded header, so the colors get blended. An engineer needs a loading state, so they pick a default purple from the framework. Each choice is local and reasonable. Together they are a different company.
The fix is a place the decisions live, and a person who can say no. On a small team that person is often the founder. The place can be a short page: files, hex values, type settings, and the three rules. When a new need appears, it is added there or it is refused. The logo file on its own cannot do this job. It has no opinion about the deck, the loading state, or the partner lockup.
Hanabi treats the system as part of delivery, not as a souvenir. The public work is the evidence of the habit. A heritage editorial site and a calm brand site can both be strict without looking alike. The strictness is the system. The look is the particular decisions inside it.
When to add a symbol
Add a symbol when the name will not fit. An app icon, a favicon, a stamp on a product. The symbol should be drawable from the same geometry as the type, so it looks related at a glance. If you cannot explain what the symbol is for, you do not need it yet. A wordmark is a complete logo.
Test the symbol the same way you test the wordmark. Small, on dark, next to type. If the symbol only reads when someone has already been told what it means, it is a puzzle. Puzzles are expensive in a header, where people are trying to confirm they are in the right place.
A small system is the practical form of all of this, and it is the piece to read next. A brand system small enough to use covers the short list a team will actually open: one type pair, a few colors, the logo files, and a little voice.
If you want the mark and the rules around it designed together, see Hanabi's services. The studio builds the identity so the next page does not have to invent one.
Frequently asked questions
What is the difference between a logo and a brand system?
A logo is the mark. A brand system is the type, the color, the spacing, and the rules that keep the next page from inventing a new palette. The mark is one piece. The system is what makes a homepage, a deck, and a product interface feel like the same company.
How should a logo be tested before it is approved?
Test it small, on a dark surface, and set next to a real headline. If it only works large, on white, and alone, it will fail in a browser tab, in an email signature, and in a footer. Also check that a single-color version still reads.
Can a wordmark be enough?
Often, yes. A wordmark set in the brand type is a logo. Add a symbol only when you need a mark that works where the name will not fit, such as an app icon or a favicon. A symbol that restates the wordmark without a job adds a file and not a system.
Sources and further reading
- 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.


