lostwoods

Étiquette : design system

  • What Belongs in a Brand Guidelines Document (A Checklist)

    What Belongs in a Brand Guidelines Document (A Checklist)

    Ask five companies for their brand guidelines and you will get five very different documents. One sends a single page with a logo and two hex codes. Another sends a ninety-page PDF nobody on the team has ever opened. Both have the same problem: they were built as a deliverable, not as a system people can actually use to make decisions.

    A brand guidelines document has one job: to let anyone, inside or outside the company, produce something on-brand without having to ask. That means it has to be complete enough to answer real questions, and clear enough that people reach for it instead of guessing. Most fail on one side or the other.

    The short version: good brand guidelines cover three layers, not one. The foundation (what the brand means), the visual identity (how it looks), and the application (how it behaves in the real world, especially digital). Below is the checklist we use, section by section, with what each one actually needs to contain..

    1. Brand foundation (the why)

    This is the part most thin guidelines skip, and it is the one that makes every other decision easier. Before a single color is defined, the document should establish what the brand is trying to be. Without it, people apply the visuals correctly and still get the tone wrong.

    • Mission and positioning: what the brand does, for whom, and what makes it different.
    • Brand personality: three to five traits that describe how the brand should feel.
    • Audience: who you are speaking to, in one clear sentence.
    • Tagline or key message, if one exists, and how it should and should not be used.

    2. Logo system

    Not « the logo, » the logo system. A single file is not enough, because the logo has to work at every size, on every background, in every format. This is where most misuse happens, so this is where the rules need to be explicit.

    • Primary logo plus approved variations (horizontal, stacked, icon-only, monochrome).
    • Clear space and minimum size, so it never gets crowded or shrunk into illegibility.
    • Approved color versions and how to choose between them on light and dark backgrounds.
    • Misuse examples: stretched, recolored, rotated, placed on busy images. Show what not to do, not just what to do.
    • File formats and where to find them (SVG for screen, vector for print).

    3. Color palette

    A palette is not a mood board. It is a set of decisions about which colors do what. The most common failure is listing colors without saying how they relate, so everyone picks their own favorite and consistency quietly disappears.

    • Primary, secondary and accent colors, with a clear role for each.
    • Exact values for every medium: HEX and RGB for screen, CMYK for print, Pantone if relevant.
    • Neutrals and background colors, which are almost always underspecified.
    • Accessibility: which text-and-background combinations meet contrast requirements, so brand and usability do not fight each other.

    4. Typography

    Typography carries more of a brand’s personality than most people expect, and it breaks more easily than most people plan for, especially on the web.

    • Primary and secondary typefaces, with the weights you actually use.
    • A type hierarchy: headings, body, captions, with relative sizing rules rather than one-off choices.
    • Web-safe fallbacks and licensing, so the identity survives when the custom font does not load.
    • Basic rules for spacing, line length and alignment.

    5. Imagery and iconography

    Two brands can share the same logo, colors and fonts and still look nothing alike, because their photography and icons follow different logic. This section is what keeps everything downstream feeling like the same brand.

    • Photography style: subject, framing, color treatment, and what to avoid.
    • Illustration or graphic elements, if the brand uses them, and how.
    • Icon style: line weight, corners, level of detail, so a new icon always matches the set.

    6. Voice and tone

    A brand is not only what it looks like, it is how it sounds. Guidelines that cover the visuals but ignore the words leave half the identity to chance, and it shows the moment two people write for the brand in two different styles.

    • How the brand speaks: a few defining traits (for example, direct rather than formal).
    • Before-and-after examples: the same message written on-brand and off-brand.
    • Practical rules: how you handle headlines, buttons, error messages, and the small copy nobody thinks about.

    7. Digital application

    This is the section most traditional guidelines miss entirely, and it is now the one that matters most, because your brand is experienced on screens more than anywhere else. Print-era guidelines describe how the brand looks. Digital application describes how it behaves.

    • How the identity translates to web and product: layout, spacing, and how color and type work on screen.
    • Core UI elements: buttons, forms, states, so the brand stays consistent where people actually use it.
    • Behavior in motion, if relevant: transitions, hover, and interaction basics.

    This is also the point where brand guidelines start to overlap with a design system, and where the difference between the two matters. We break that down in design system vs brand guidelines vs style guide.

    A brand guidelines document is not a decoration of your logo. It is a decision-making tool.

    How much is enough?

    The right length is not « as long as possible. » It is « enough to answer the questions your team actually asks. » A five-person startup does not need the same document as a multinational, and forcing one to fit the other is how guidelines end up unused.

    A simple test: could a new hire, or an external freelancer, produce something on-brand using only this document, without a single clarifying message? If yes, it is complete enough. If they would still have to guess, something on the checklist is missing. The goal is not volume, it is coverage of the decisions that come up in real work.

    Guidelines are a system, not a PDF

    The most important thing on this checklist is not any single section. It is that the document stays alive. A brand guidelines file that is written once and never updated starts drifting from reality the moment the product or the company changes. New channels appear, new needs emerge, and the gap between the document and the real brand widens until people stop trusting it.

    That is why we treat brand identity as a system rather than a one-off deliverable: a foundation that is documented, applied consistently, and maintained as the brand grows. It is the same reason consistency holds up better over time when someone owns it, which is exactly the failure pattern we cover in why brands lose consistency as they grow.

    Where to start

    You do not need to write all of it at once. If you are starting from a thin document, prioritize in this order:

    • Foundation first: nail the positioning and personality, because everything else depends on it.
    • Then the non-negotiables: logo system, color, typography, with exact values and misuse examples.
    • Then digital application, because that is where your brand is actually experienced today.
    • Finally, decide who owns it and how often it gets reviewed. A guideline with no owner is a guideline on its way to being ignored.

    The takeaway

    A brand guidelines document is complete not when it is long, but when it lets people make on-brand decisions without asking. Cover the three layers, the foundation, the visual identity and the digital application, keep it usable, and give it an owner. Do that, and the document stops being a file that sits in a folder and becomes what it was meant to be: the thing that keeps your brand coherent as it grows.

    FAQ

    What is the difference between a brand guidelines document and a design system?

    Brand guidelines define what the brand means and how it should look and sound. A design system turns part of that into reusable, coded components for building products. Guidelines describe the intent; a design system makes it repeatable in software. Many teams need both, at different stages.

    How long should brand guidelines be?

    Long enough to answer the questions your team actually asks, and no longer. A good test: could a new hire or a freelancer produce something on-brand using only the document, without asking for clarification? If yes, it is complete. Volume is not the goal, coverage of real decisions is.

    Do small companies really need brand guidelines?

    Yes, but a right-sized version. Even a two-page document that fixes the foundation, logo, color, type and tone will keep a small team consistent and save hours of back-and-forth. The point is not formality, it is making the brand’s decisions explicit so they do not get re-invented every time.

  • Pourquoi un site bien conçu peut quand même sembler confus

    Pourquoi un site bien conçu peut quand même sembler confus

    Ces dernières années, le niveau d’exécution en design a fortement grimpé. La plupart des équipes savent aujourd’hui livrer des interfaces qui font pro. Les design systems, les UI kits et les outils modernes ont standardisé une grande partie de la couche visuelle. Mais ce glissement a discrètement déplacé le problème ailleurs..

    Quand tout « fait assez propre », la qualité visuelle cesse d’être ce qui fait la différence. Ce qui reste, c’est la facilité avec laquelle les gens comprennent ce qu’ils regardent, la rapidité avec laquelle ils naviguent, et le naturel avec lequel ils avancent dans l’expérience. Le vrai enjeu n’est plus l’apparence. C’est le sens.

    En résumé : quand un site bien conçu semble quand même confus, la cause n’est presque jamais visuelle. C’est la structure en dessous, la façon dont l’information est hiérarchisée, dont les décisions ont été prises, et dont elles tiennent ensemble à mesure que le produit grandit.

    La clarté ne vient pas du visuel

    Il est tentant d’assimiler qualité visuelle et utilisabilité. Des mises en page nettes, des espacements cohérents et des composants bien construits créent une impression d’ordre, et cet ordre est souvent confondu avec la clarté. Mais la clarté n’est pas un résultat visuel. Elle découle de la façon dont l’information est structurée, dont les priorités sont définies, et dont les décisions s’articulent à travers l’expérience. Deux interfaces peuvent avoir la même qualité visuelle et produire des niveaux de compréhension complètement différents.

    Imaginez deux tableaux de bord construits avec exactement le même design system. L’un place en haut le seul chiffre qui compte et relègue le reste en dessous. L’autre affiche douze cartes de même taille et de même poids. Mêmes composants, même finition, clarté opposée. La différence n’est pas la qualité du design. C’est la décision de ce qui compte en premier, et cette décision est structurelle, pas visuelle.

    Ce que les utilisateurs vivent comme de la confusion se résume en général à trois choses :

    • Une hiérarchie floue : qu’est-ce qui compte d’abord ?
    • Des signaux concurrents : sur quoi dois-je me concentrer ?
    • Un manque de direction : que dois-je faire ensuite ?

    Aucun de ces problèmes n’est visuel. Ils sont structurels.

    Pourquoi une refonte règle rarement le problème

    Quand un site paraît confus, le réflexe est de le refondre. C’est logique : si quelque chose ne fonctionne pas, on améliore l’interface. Alors on itère sur les maquettes, on affine les composants, on rafraîchit le visuel. Parfois ça aide. Souvent non, parce que le problème vit rarement dans l’interface elle-même. Il vit dans la façon dont les décisions ont été prises en amont : comment le contenu a été priorisé, comment les parcours ont été définis, comment les fonctionnalités se sont ajoutées avec le temps.

    C’est pour ça qu’une refonte peut donner l’impression d’un progrès sans rien changer. Vous avez reconstruit la surface, pas les décisions en dessous. L’interface s’améliore, la clarté non, et quelques mois plus tard la même plainte revient dans un plus bel emballage.

    La confusion s’accumule avec le temps

    La plupart des produits numériques ne sont pas conçus en une seule phase maîtrisée. Ils évoluent. De nouvelles pages s’ajoutent, de nouveaux objectifs émergent, différentes personnes contribuent. Chaque décision règle un problème isolément, et prise séparément, chacune est souvent juste. Le problème, c’est l’accumulation. Sans structure partagée, les décisions se mettent à dériver, pas brutalement, mais progressivement. La navigation devient moins intuitive, le contenu perd sa hiérarchie, les interactions deviennent moins prévisibles. Rien n’est visiblement cassé.

    Mais la cohérence s’érode, une décision raisonnable à la fois.

    La clarté est un système, pas un coup unique

    La clarté n’est pas quelque chose qu’on atteint une fois et qu’on conserve automatiquement. C’est le résultat visible de décisions cohérentes maintenues dans le temps. Pour rester clair, un produit a besoin de principes stables, d’une prise de décision alignée et de continuité dans la façon d’appliquer les changements. C’est la différence entre un design qui a l’air fini et un design qui reste cohérent en grandissant.

    C’est aussi pour ça que nous traitons le design comme un système plutôt que comme un projet : une fondation structurée, des règles documentées et une direction continue qui gardent chaque nouvelle page et chaque fonctionnalité alignées avec l’ensemble. C’est la même raison pour laquelle la clarté tient mieux dans un partenariat long terme que dans une refonte ponctuelle. Les décisions restent alignées parce que quelqu’un les garde alignées.

    Comment savoir si votre problème de clarté est structurel

    Une interface confuse et un problème structurel ne sont pas toujours faciles à distinguer au premier coup d’œil. Quelques questions rendent en général les choses évidentes :

    • Les nouvelles recrues peinent-elles à expliquer à quoi sert vraiment une page ?
    • Quand vous ajoutez une fonctionnalité, la navigation devient-elle plus difficile à raisonner ?
    • Les refontes se succèdent-elles sans jamais régler la même plainte ?
    • Pouvez-vous pointer où « ce qui compte le plus » est décidé, ou est-ce redécidé page par page ?

    Si les réponses vivent dans des décisions dispersées, prises page par page, sans règle partagée, le problème est structurel, et aucune finition visuelle ne le réglera.

    Par où commencer

    On ne règle pas la structure avec une refonte plus grosse. On la règle en rendant les décisions explicites et reproductibles :

    • Cartographier les vraies priorités : ce qui doit compter en premier, sur chaque page et dans chaque parcours.
    • Faire de la hiérarchie une règle, pas un choix refait de zéro sur chaque écran.
    • Documenter les principes pour que les décisions restent alignées quand les personnes et les contraintes changent.
    • L’entretenir : la clarté est une cible mouvante à mesure que le produit grandit, elle demande une direction continue, pas un nettoyage ponctuel.

    C’est le même mécanisme d’échec que nous décrivons dans pourquoi les marques perdent en cohérence en grandissant : des choix raisonnables un par un, mais jamais pensés pour fonctionner ensemble.

    De l’exécution à la structure

    La bonne exécution est désormais la norme, pas l’avantage. Les équipes qui se distinguent sont celles qui traitent la clarté comme une discipline structurelle. Elles définissent comment les décisions sont prises, comment elles sont validées dans le temps, et comment elles restent alignées à mesure que le produit évolue. C’est là que le design passe de l’exécution à la structure, et que la clarté devient quelque chose qu’on peut soutenir plutôt que courir après.

    À retenir

    Les sites confus sont rarement le résultat d’un mauvais design. Ils sont le résultat de décisions qui n’ont jamais été structurées pour fonctionner ensemble dans le temps. Tant que ces décisions restent fragmentées, la clarté continue de se dégrader, peu importe le nombre de refontes qui suivent. Parce que la clarté ne s’ajoute pas. Elle se maintient.

    FAQ

    Mon site est-il confus parce que le design est mauvais ?

    En général, non. Si l’interface est nette et que les gens s’y perdent quand même, la cause est presque toujours structurelle, hiérarchie floue, priorités concurrentes ou décisions jamais alignées, plutôt que le design visuel lui-même.

    Une refonte va-t-elle régler un site confus ?

    Seulement si elle s’attaque aux décisions en dessous, pas seulement à l’interface. Une refonte qui rafraîchit le visuel sans corriger la hiérarchie et les priorités produit surtout une version plus jolie de la même confusion.

    Comment garder un site clair quand il grandit ?

    En traitant le design comme un système : des principes stables, des règles documentées et une direction continue, pour que chaque nouvelle page et fonctionnalité reste alignée avec l’ensemble au lieu de dériver une décision à la fois.