Style guide: the difference between a coherent brand and a patchwork
A style guide (charte graphique) is the brand user manual. Without it, every salesperson improvises their email signature, every flyer uses a different shade of blue, every Instagram post has its own font, and after 12 months the brand looks like a visual patchwork that destroys trust.
In 2026, a serious SME cannot go without one once it exceeds 5-10 people or communicates on more than 2 channels. Here is the full structure of a modern style guide.
Contents of a complete style guide
1. Logo and variations
- Main logo (horizontal + vertical + monogram)
- Protection zones (minimum empty space around logo)
- Minimum sizes (web 24 px, print 15 mm)
- Color, black mono, white mono and grayscale versions
- Forbidden uses (10-15 dos-and-don’ts: stretching, rotation, shadow, unplanned gradient, non-contrasted background)
2. Color palette + AA accessibility
A standard SME palette has:
- 1-2 primary colors (brand DNA)
- 2-4 secondary colors (accents, CTAs, states)
- 1 neutral scale (5-7 grays from white to black)
- System colors (success green, error red, warning orange, info blue)
Each color must be specified in:
- HEX (#0A2540) for web
- RGB (10, 37, 64) for digital
- CMYK (95, 75, 35, 35) for print
- Pantone (exact ref.) for screen printing, textile, packaging
WCAG 2.1 AA accessibility: text/background contrast must reach 4.5:1 for normal text and 3:1 for large text. Tools: Stark Figma plugin, WebAIM Contrast Checker, Adobe Color.
3. Typography and hierarchy
- 1-2 typefaces maximum (heading + body)
- Full families (Regular, Medium, Bold, Italic)
- H1/H2/H3/H4/body/caption/legal hierarchy with sizes, weights, line heights
- Print and web versions (sometimes different: Inter for web, Söhne for print)
- Self-hosted solutions or Google Fonts for GDPR (Google Fonts via CDN = US data transfer, avoid in EU)
4. Iconography
- Consistent style (line, filled, duotone — only one style)
- Construction grid (icons aligned on 24×24 or 32×32)
- Library of 30-100 ready-to-use icons
- Rules for creating new icons
5. Photography
- Style (natural light vs studio, wide-angle vs portrait, color grading)
- Allowed / forbidden subjects (represented diversity, stock photos avoided)
- Recommended image banks (Unsplash, Pexels, or in-house photographer)
- Treatment (filters, cropping, aspect ratio 16:9, 4:3, 1:1)
6. Illustrations
If the brand uses illustrations:
- Style (flat, isometric, 3D, sketch)
- Illustration palette (sometimes broader than logo palette)
- Base library and creation rules
7. Tone of voice (verbal identity)
- Personality (serious, friendly, technical, premium…)
- Formal vs casual address
- Vocabulary to use / avoid (30-100 word glossary)
- Standard phrases (CTAs, slogans, email sign-offs)
- Multilingual (FR, EN, sometimes WO/BM in West Africa)
8. Usage rules and applications
Need a professional website?
Kolonell builds websites that attract clients, optimized for the Sénégalese market. Free quote in 2 minutes.
- Stationery (business card, letterhead, envelope)
- Email signature
- Social media templates (Instagram, LinkedIn, Facebook, TikTok)
- PowerPoint / Keynote / Google Slides decks
- Website (header, footer, buttons, forms)
- Packaging, vehicle, storefront (depending on industry)
Typical structure — Complete style guide
| Section | Pages | Key content |
|---|---|---|
| 1. Logo | 4-6 | Variations, protection zones, forbidden uses |
| 2. Colors | 3-5 | HEX/RGB/CMYK/Pantone palette + AA contrast |
| 3. Typography | 3-4 | Heading + body, hierarchy, web + print |
| 4. Iconography | 2-4 | Style, library, grid |
| 5. Photography | 2-3 | Style, subjects, treatment |
| 6. Illustrations | 0-3 | Optional depending on brand |
| 7. Tone of voice | 2-4 | Personality, vocabulary, examples |
| 8. Applications | 5-10 | Stationery, social, web, templates |
| Total | 20-40 | Complete SME guide |
2026 deliverables
A modern style guide ships in 2 complementary formats:
- Interactive PDF (20-40 pages) — for non-designers (marketing, HR, sales), bookmark navigation
- Shared Figma library — for designers and the agency, with components, color tokens, ready-to-drag-and-drop type styles
- Optional: hosted web version (Zeroheight, public Notion) — accessible by URL, easier to maintain
2026 style guide pricing (Senegal and international)
| Tier | Pages | FCFA | EUR | USD |
|---|---|---|---|---|
| Mini guide (freelance) | 8-12 | 350,000 – 600,000 | 535 – 915 | 580 – 990 |
| Standard SME guide (studio) | 20-30 | 700,000 – 1,500,000 | 1,070 – 2,290 | 1,155 – 2,475 |
| Complete guide + Figma library (agency) | 30-50 | 1,500,000 – 3,000,000 | 2,290 – 4,570 | 2,475 – 4,950 |
| Large-group corporate guide | 50-100+ | 5,000,000+ | 7,620+ | 8,250+ |
Tools used in 2026
- Figma + Tokens Studio (reference for design tokens)
- Adobe Illustrator + InDesign (print deliverables)
- Zeroheight, Frontify, Notion (web publishing)
- Stark, Contrast (accessibility audit)
- Specify (design ↔ code token sync)
FAQ
Style guide vs brand book: difference?
The style guide covers visual identity (logo, colors, typography, applications). The brand book goes further: it includes brand strategy (mission, vision, values, archetype, brand story) on top of the visual. Brand book = style guide + strategy.
How long to produce a style guide?
3-5 weeks for a mini guide, 6-10 weeks for a standard SME guide, 10-16 weeks for a complete guide with Figma library delivered.
Should the guide be redone every year?
No. A good guide lasts 5-10 years with annual micro-updates (new templates, new channels, broader palette). A complete refresh is needed only for major rebranding.
Does a 5-person SME need a guide?
Yes, in a light version (mini guide 8-12 pages, 350-600K FCFA). Without one, as soon as a salesperson or freelancer is hired, visual inconsistency sets in.
Does the guide cover digital UI?
A traditional guide usually stops at print + social applications. For full digital (reusable UI components, dark mode, motion design), you need a design system that complements the guide. See our dedicated article.
Let’s talk about your style guide
Kolonell delivers style guides with Figma libraries directly usable by your team. WhatsApp +221 77 596 93 33.
Mohamed Bah
Fondateur, Kolonell
Passionate about digital and entrepreneurship in Africa, Mohamed has been helping Sénégalese businesses with their digital transformation since 2020. Founder of Kolonell, he believes every SME deserves a professional and accessible online présence.
