Building Your Brand Style Guide

What is a Brand Style Guide?

A brand style guide, or brand book, is a document that explains how an organization presents itself to the world. It covers everything from the logo and colors to the tone of voice. Its primary purpose is to ensure consistency.

To get a clear idea of what these guides look like and what they contain, let's start with a short video.

As you can see, these guides can be very extensive. For our purposes, we will focus on three core elements:

1. Logo: The final logo and rules for using it.
2. Color Palette: The specific colors that define the brand's look and feel.
3. Typography: The selected fonts and their usage for headings and body text.

Our goal is to create a simple, one-page guide, often called a "style sheet" or "cheatsheet."

Step 1: Set Up Your Style Guide in Figma

Let's get our canvas ready in Figma. We'll continue working in the same file where you created the "Aura Coffee" logo.

1. Create a New Page: In the Layers panel on the left, click the '+' icon next to "Page 1" to add a new page. Rename this page to "Brand Style Guide". This keeps your project organized.
2. Create a Frame: Press F to select the Frame tool. In the Design panel on the right, you can choose a preset size. Let's select Desktop > Desktop (1920x1080). Rename this frame "Aura Coffee Style Guide".
3. Create Section Titles: Using the Text tool (T), create titles for our three sections: Logo, Color Palette, and Typography. Use the headline font you chose in the previous lesson. Arrange them on your frame, leaving space below each to add the content.

Step 2: Document Your Brand Elements

Now, let's populate the style guide with the brand assets for "Aura Coffee".

A. The Logo

In this section, we'll specify how the primary logo should be used and present its variations.

1. Add the Primary Logo: Copy the final logo you created (logomark + logotype) from your other page and paste it into the "Logo" section of your style guide. This is your primary logo.
2. Define Clear Space: To ensure the logo is always legible and impactful, we must define a "clear space" or "exclusion zone" around it. This is a minimum amount of empty space that no other element can intrude upon. A common practice is to use a key dimension from the logo itself (like the height of the logomark or a letter) to define this space.
   • Draw a rectangle around your logo that represents this buffer. In the Design panel, change its Fill to "No fill" and add a Stroke. For the stroke style, choose the dashed line option. This visually communicates the clear space rule.
3. Show Logo Variations: It's also useful to show other acceptable versions of the logo. For a basic guide, let's just add the logomark on its own. Copy your logomark and place it next to the primary logo. You can label it "Logomark" or "Submark".

B. The Color Palette

Even though we haven't officially defined colors for "Aura Coffee" yet, we can choose a palette that matches the brief: modern, elegant, calm, high-quality. A coffee-shop theme suggests warm, earthy tones. Let's establish a simple palette:

• Primary/Dark: A deep, rich brown (for text, dark backgrounds).
• Secondary/Light: A creamy off-white (for backgrounds).
• Accent: A warm, welcoming color like a soft terracotta or gold (for buttons and highlights).

Now, let's add these to our guide.

Your Task:

1. Under your "Color Palette" title, create three squares using the Rectangle tool (R).
2. Select the first square and choose a deep brown for the fill. A good starting point is #4A2E2A.
3. Select the second square and choose an off-white. Try #F5F3F0.
4. Select the third square and choose a warm accent color. Let's try a terracotta like #D98C6B.
5. Using the Text tool (T), add labels below each color swatch indicating its HEX code. This is crucial for anyone using the guide to replicate the colors perfectly. You can also give them names like "Rich Black," "Cream," and "Terracotta."

C. Typography

This section formalizes the font pairing you chose in the previous lesson. You need to clearly state what font, weight, and size to use for different text elements to maintain a consistent hierarchy.

Your Task:

1. Under the "Typography" title, create a text element for your main headline style (e.g., "Heading 1"). Type something like "Headline Text" and apply the headline font you chose.
2. Next to it, add a text block that specifies its properties:
   • Font: [Your Headline Font Name]
   • Weight: [e.g., Bold, SemiBold]
   • Size: [e.g., 48px]
3. Repeat this process for your body text style. Create an example ("Body Text") and specify its properties (e.g., Font: [Your Body Font Name], Weight: Regular, Size: 18px).

This process is also covered in the "How to Create Style Guides in Figma" video from 10:24 to 15:40, should you need a visual guide.

Step 3: Making Your Guide Smarter with Figma Styles

To make your style guide truly powerful, you can save your colors and text properties as Styles in Figma. This allows you to apply them with a single click and update them everywhere at once. This is a crucial step for maintaining consistency as you build more designs.

For a detailed walkthrough, you can consult this article.

Your Task (Quick Version):

• Create a Color Style: Select your primary brown color swatch. In the Design panel on the right, click the four-dot "Style" icon in the Fill section. Click the '+' icon, name it "Primary/Rich Black", and click "Create style".
• Create a Text Style: Select your "Headline" text element. Click the four-dot "Style" icon in the Text section. Click the '+' icon, name it "Typography/Headline", and click "Create style".

Now, whenever you design something for Aura Coffee, you can apply these styles directly from the Design panel instead of manually setting the hex code or font properties every time.

Conclusion

Congratulations! You have successfully created a basic but professional brand style guide for "Aura Coffee". This document is the single source of truth for the brand's visual identity and is a testament to the thoughtful design decisions you've made over the last few lessons.

Key Takeaways:

• A brand style guide is a crucial document for ensuring brand consistency.
• A basic guide should, at a minimum, document the logo usage, color palette (with HEX codes), and typography system (font, weight, size).
• Figma is an excellent tool for creating style guides, and using Color and Text Styles makes your design system scalable and easy to maintain.

In our next lesson, we will take this concept of reusable assets a step further. You will learn how to create reusable components in Figma for brand assets like logos and buttons. The styles you created today are the building blocks for these powerful, intelligent components.