Brandbook for IT product and SaaS service
| Stage | What should be in a brandbook | Volume |
|---|---|---|
| Pre-seed / Seed | Mission, values, logo, 1-2 fonts, 3-4 colors | 10-15 pages |
| Series A | + tone of voice, UI examples, guide for marketing materials | 25-40 pages |
| Series B and beyond | Full-fledged design system: components, code, tokens | Digital portal without a fixed volume |
In practice, this means that ordering a 'brandbook like big SaaS' at the MVP stage is a mistake. It's better to fix a minimal brand kit and keep in mind that each subsequent round is a reason to rebuild the document, not rewrite it from scratch.
How to connect the brandbook to the design system and code
The main technical fork for an IT product is the transition from 'colors in PDF' to design tokens synchronized with real code. While the brandbook exists as a static file, the designer and developer will eventually diverge: in Figma one shade of blue, in production — another by a couple of points HEX.
- Fix the basic tokens (color, spacing, radii, typography) in Figma as variables, not as static styles.
- Synchronize them with the code via Token Studio or Style Dictionary — this eliminates manual transfer of values between design and frontend.
- Build a UI kit from these tokens: buttons, fields, cards, modal windows — with binding to specific use cases.
- Move the entire document to a live format — Notion or Zeroheight — where changes are visible to everyone, not just whoever opened the latest PDF version.
The trend of 2025-2026 years is clear: static brandbooks are going away, because for a product updated weekly, a paper document becomes outdated faster than people can read it.
Functional colors, dark theme, and micro-interactions — what an IT brandbook cannot be complete without
A brandbook for a physical product may do without a section on interface states. A SaaS brandbook cannot function without it, because the product lives in specific UI states, and each of them must be recognizable as branded.
| Function | Color | Why it's needed |
|---|---|---|
| Success | Green | Confirmation of successful action |
| Error | Red | Signal of critical error |
| Warning | Yellow | Warning about risk |
| Info | Blue | Neutral notification |
These colors must pass contrast checks at minimum WCAG AA — otherwise, a user with poor vision simply won't see the error message, and this is no longer a matter of aesthetics but usability and reputation. It is worth separately noting the behavior of the palette in dark theme: the color of success on a white background and on a dark background are different shades in saturation, and if they are not thought out in advance, the dark theme will either look dull or, on the contrary, be glaring. Micro-interactions — the animation of the toggle switch, the speed of tooltip appearance, cursor behavior on a button — are also part of the brand: they form the feeling of 'refinement' of the product no less than the logo.
Tone of voice inside the interface: errors, onboarding, empty states
Tone of voice in an IT brandbook cannot be described abstractly ("friendly but professional") — this works only at the level of marketing texts. Inside the product, the tone must be described by specific screen types, because it is precisely at these points that the user either trusts the product or gets irritated.
- Error messages — without blaming the user, with a clear next step ("Failed to save file. Check connection and try again" instead of "Error 500").
- Onboarding — short phrases, verb at the beginning, no jargon or unnecessary introductions.
- Empty states — the moment when there is no data yet: the tone here should encourage action rather than state the emptiness ("Your projects will appear here" instead of "List is empty").
- Success notifications — shorter than errors, without excessive exuberance.
A good brandbook provides two to three examples of text for each screen type — this way, the copywriter and the developer who writes the placeholder work from the same dictionary, rather than reinventing the tone each time.
How does a SaaS brandbook differ from a brandbook of a B2B company or a physical product
The branding guide for a factory or consulting B2B company focuses on static media: business cards, presentations, office decoration, and corporate stationery. It exists in PDF format and is updated once every few years. A branding guide for an IT product is structured differently — it is two-sided: one half serves marketing (website, social media, investor presentations), and the other serves the product itself (UI, states, components). And most importantly — these two halves must align in feeling, otherwise the user will sense a brand substitution upon entering the application.
Hence the unique sections that do not exist in a branding guide for a physical product: a semantic color system for the interface, component specifications, rules for adaptability across different screens, an animation guide, and, critically for scaling teams, a connection to the codebase via tokens. A factory's branding guide must never synchronize with the frontend repository — a SaaS branding guide must.
How much does it cost and when is it worth investing
In Russia, a full branding guide with a developed digital part costs 200 thousand — 1,1 million rubles and takes 10-20 working days. A minimal brand kit for an early-stage startup costs 150-250 thousand rubles — this is enough to not look homemade during initial meetings with clients and investors. Overpaying at the start for a component library that the team of three people doesn't need yet is a poor decision: it's better to invest money into the product, and build up the branding guide after Series A, when resources and contractors appear who need clear rules.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order: