How to Create a Style Guide for Your Product or Brand

A style guide tells your team how to express your brand and product visually and verbally. It's the reference document that prevents a designer from using the wrong shade of blue, a writer from inventing new terminology, and a developer from hardcoding hex values.

Here's how to create one that gets used.

Style guide vs design system

These terms get conflated. They're different things at different levels of scope.

A style guide documents your visual and verbal language: colors, typography, spacing principles, imagery style, logo usage, voice and tone. It's primarily a reference document.

A design system includes everything in a style guide plus: a component library, usage guidelines for each component, design tokens, code documentation, and contribution processes. It's a living system.

If you're a small team, a product company at early stage, or a client agency delivering a brand, a style guide is what you need. A full design system is bigger than what the situation requires.

Start with a style guide. Evolve it into a design system as your team and product grow.

What a style guide should include

Color. Your full color palette with hex values, names, and usage notes. Which color is your primary action color? What's used for error states? Which combinations are approved? Show approved pairings — not just the individual colors.

Typography. Your typefaces, their approved weights, and how each is used. Show actual examples: "Heading 1 is Inter 700 at 40px with -0.5px letter spacing, used for page titles." Scale from heading down to caption with specific values for each level.

Spacing and layout. Your base unit (typically 4px or 8px), your spacing scale, and column grid specifications. This section often gets skipped and causes inconsistency more than anything else.

Iconography. Which icon library you're using (or your custom icons), sizing rules, stroke weight standards, and how icons should be used with text.

Imagery and illustration. Photo style guidelines (do you use real photography or stock? what tone — candid and real or polished and aspirational?), illustration style if applicable, how images should be cropped and framed.

Logo usage. Clear and dark versions, minimum sizes, exclusion zones, what you're not allowed to do with the logo (distort, recolor, place on clashing backgrounds).

Voice and tone. How you write. Active or passive? Formal or casual? First person or second? What words does your brand use? What words should it avoid? A few before/after examples are worth more than paragraphs of description.

Building your style guide in Figma

Create a dedicated Figma file for your style guide. Structure it with pages:

• Cover — project name, version, last updated date
• Colors — swatches with all color values, semantic role labels
• Typography — all type styles shown at actual sizes
• Spacing — visual representations of your spacing scale
• Iconography — icon library overview
• Components overview — light-touch reference to your component library (link to the full component file)
• Voice and tone — text-heavy, written guidelines

Use Figma's Color Styles and Text Styles for every value in your style guide. Don't hardcode values — use styles so the guide and your actual designs stay in sync.

Keep the Figma file clean and presentable. Your style guide Figma file is not your working file — it's a communication document.

Publishing to Zeroheight

A Figma file is not an accessible style guide for non-Figma users. Developers, writers, marketing teams, and external partners shouldn't need to open Figma to find out what your brand's primary font is.

Zeroheight connects to your Figma file and publishes your styles and components as a web-accessible documentation site. You write prose content in Zeroheight (usage guidelines, rationale, examples), and it pulls the visual assets directly from Figma.

When you update a color in your Figma file and re-sync, Zeroheight updates automatically. This is the key advantage over maintaining a separate document — there's one source of truth.

Try Zeroheight Free

Zeroheight starts at $149/month for teams (one team seat free during trial). For a style guide that external partners or a larger team needs to reference, it's worth the cost. For a small internal team, a well-structured Figma file or Notion page may be sufficient.

The one-page brand guide

For small projects, clients, or brand delivery work, a one-page brand guide is often more practical than a full style guide. It fits everything essential onto a single Figma frame or PDF:

• Logo (clear and dark versions, with sizes)
• Color palette (primary, secondary, neutrals — hex values)
• Typography (primary typeface, secondary typeface, key sizes)
• A few example applications

This format works well for:

• Freelance brand projects delivered to clients
• Small startups who need alignment without documentation overhead
• Side projects and personal brands

Keep it to one A4 or letter-size page. If it won't fit, you're including too much.

Maintaining your style guide

A style guide that isn't maintained becomes worse than no style guide — it actively misleads people.

Establish who owns it. One designer or a small group should be responsible for keeping it current. Every time a significant design decision changes (you rebrand, add a new color to the system, update your type scale), someone is responsible for updating the guide.

Try Notion Free

Keep a changelog — a Notion page or a changelog section in Zeroheight noting what changed and when. When a developer asks "which version of the brand is current?", a dated changelog answers that question immediately.

Review the style guide when you onboard new designers or developers. If someone joins your team and the style guide takes more than a day to understand, it's too complex.