As a UI/UX designer, creating style guides is indispensable if you hope to create great user experiences and interfaces.

In this article, you will learn what a style guide is, the importance of a style guide, and how to create one step by step.

What is a Style Guide?

A User Interface (UI) style guide is a standard that contains all the necessary details about the UI elements and interactions that occur within a product. It helps establish brand consistency.

A typical style guide contains information about typography, colours, layouts, components, and everything else that gives the UI its feel and look.

Creating a great and concise style guide for your product makes sure that the look and feel of the brand remains consistent.

Why Create a Style Guide?

Having a style guide is important for various reasons, which include:

1. It helps all your user interface elements remain consistent
2. It's a learning resource for newcomers and helps them onboard more quickly.
3. It improves communication between designers and developers.
4. And it can help boost your productivity.

What Should a Style Guide Include?

Some of the components of a typical style guide include:

Typography: this plays a huge role in every design. Each font you choose for your designs conveys a message to your user. Typography in your designs should be legible, easy to read and understand, and visually appealing.

Your style guide should include typefaces, font sizes and font weights. Limit your design to 2-3 type faces in order for your design to look neat and professional. Remember to choose typefaces that complement each other.

Colour palette: the right choice of colours for your designs can help determine the reaction of your audience, make them feel comfortable, and increase user satisfaction. You should have three categories of colours in your style guide: primary, secondary and neutral colours.

Primary colours are colours that are displayed frequently across all screens and elements in your design.

Secondary colours complement the primary colour(s). You can use them for micro interactions like arrows, progress bars, and even headings.

Iconography: this is the use of mostly symbols, figures, and images to convey more meaning to a user. Icons make communication easy and they are typically universal. You can choose a collection of icons that you'll use in your designs to keep them consistent.

Layout grids: a grid is a system that aligns a page based on rows and columns. Grids are indispensable in establishing consistency across all screens in a design. You cannot afford not to include a grid system in your style guide.

UI Elements: UI elements in a style guide typically includes buttons, input fields, checkboxes and alerts and notifications. Elements are essential, as a user cannot function effectively without them in your design. You should include these elements with their specific states – default, active, disabled and hover.

How to Create a Style Guide in Figma

Now we'll create a style guide from scratch in Figma, including the elements listed above.

Open your Figma file and select a frame.

Choose a Colour Palette

Getting the right colours is very important for creating great designs. You must be able to pick colours that complement each other for your style guide.

If you don't have a specific colour palette in mind, you can try sites like colors.muz.li or coolors.co to get colour inspiration.

If you're working with a client, they may already have a colour palette in mind.

Step 1: Choose your color categories

Choose three categories of colours: a primary colour, a secondary colour, and greys (neutral).

Step 2: Generate Shades for the Colours

Now you'll need to generate shades for your colours. Generating shades for your colour palette helps cater to varied use cases. It makes it convenient for when you have to tweak the colour opacity or brightness.

The Figma plugin Tints and Shades helps you generate colour shades.

Select a colour and click on Tints and shades to generate the shades.

Auto layout (Shift + A) the generated shades to give them one frame, and arrange them vertically/horizontally.

Step 3: Make the colour shades into colour styles.

To make the generated colours styles, first select the frame and hit the Enter key in order to select the boxes in the frame individually.

Rename the individual boxes, using the name of the colour category differentiating with numbers – for example grey 01, and so on.

If you renamed your boxes successfully, the names will appear on the left hand side of your canvas.

After you do this, you will need to make your colours into styles. You might use the Figma plugin Styler to style your colours. Click on the frame, selecting individual boxes using the Enter key.

If you do this correctly, you will get a notification as you can see in the image above.

Repeat these steps for all colour categories – grey, primary, and secondary.

Choose Your Typography

Choosing the right font family, font sizes, and font weights is very important for a good style guide. If you get confused on how to generate or choose a font family, weight, and size, you can use the Material Design type scale material.io to generate type scales.

Step 1: Open a frame after choosing a font of your choice.

Step 2: Establish the page hierarchy

Decide on how many headlines, subtitles, body and captions your design might have. Remember that you can communicate hierarchy through differences in font weight (light, medium, regular), size, letter spacing, and case.

Step 3: Make your fonts styles

After choosing your font weights, size, and letter spacing, it's time to make them styles. Just like you did for your colour palette, select the fonts and use the plugin Styler to create them as styles.

NB: Choose smaller font sizes when designing for mobile (16px, 18px, and so on) and larger font sizes for web.

As you can see in the image above, your text styles will appear on the right hand side of your screen.

Choose Your Iconography

Next up, we have iconography. Icons are an essential part of our designs, as they visually express actions and objects in our interfaces. They help the designer further communicate the meaning of an action or screen, like the home icon, search icon, and more.

You can get icons from plugins like Iconify, Font Awesome, and libraries like feathericons and Google icons.

Step 1: Select a frame.

Go to the frame tool and select a frame for your iconography.

Step 2: Get all your icons

Now you'll need to get the icons you need for your design. Make sure you include different states of each icon, like filled, outline, and so on.

NB: make sure the sizes of your icons are consistent.

Violà! You now have your iconography. To know more about iconography, check out design system icons.

Setup Your Layout Grids

Grids are a fundamental part of any style guide as they help achieve better alignment, hierarchy, and consistency in your designs.

Setting a standard for your grid depends on whether you are designing for web or mobile – each has different standards. For example, you should use a 960 grid (12 or 16 columns) when designing for web.

First, go ahead and select a frame.

Step 1: Add a layout grid

Then get your layout grid from the left hand panel of your canvas.

Input your desired number of columns for the frame and values for the margin and gutter (that is the vertical part of the frame).

Next up, you will need to include grids for the horizontal part of the frame, or the rows. Input your desired value for rows, margins, and gutter.

Choose your components

The components you choose play an important part in your user interface. Components typically include text fields, button states, checkboxes, alerts and notifications.

Define Your Input fields

Input fields, as the name implies, allow users to input text in a UI. And they need to be styled like everything else.

First, as always, select a frame.

Step 1: Design input fields in various states

You'll want to design each input field according to its state, like default, disabled, active, and error.

Step 2: Add icons to your input fields.

Design Your Buttons

Your buttons should include primary buttons and secondary buttons in their different states, like disabled, default, hover and pressed.

Primary buttons are usually strong visual indicators to help users complete their journeys – for example 'next', 'submit', and so on. Secondary buttons are usually the alternatives to the primary actions, like 'cancel', 'back', and so on.

The image above shows two buttons. The button on the left is a primary button while the button on the right is a secondary button.

First, select a frame.

Step 1: Design the primary button

First you'll want to design a primary button in its various states: default, hover, pressed and disabled.

Step 2: Design the secondary button

Then you'll design a secondary button in its various states: default, hover, pressed and disabled.

Step 3: Check buttons with icons

You might want to check how the various buttons would look like with icons. Add icons to your primary and secondary buttons in all their states.

Checkboxes

You'll use checkboxes mostly when users might need to select more than one option from a list – that is, each checkbox is independent of the others in the list/form.

First, select a frame.

Step 2: Design your checkboxes

You'll want to include various states like enabled, disabled, hover, focused and pressed states.

Alerts and notifications

With real time alerts, users can get notifications of reminders, errors, successes and so on. This reduces the risk of hacking, incorrect input, and loss of important information.

First, select a frame.

Step 1: Design notification and alerts

When you design your alerts, make sure to use the correct icons for warning, error, success and success states.

Live Style Guide Examples

Here is Mozilla's style guide:

Mozilla Style Guide

Here is freeCodeCamp's live style guide:

freeCodeCamp's Design Style Guide

Conclusion

Creating a style guide is a fundamental step in product development for any organisation. And as a UI/UX designer, this is something you cannot avoid.

Remember that your style guide isn't fixed and that you can make updates at any point in time. Practice till you get it just the way you want it.

You’ve written some HTML and now need to style it with CSS. One way is to use inline styles, which is what this article is about.

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>

Before we jump into the nuances of inline styles—when, why, and how to use them—it’s important to be aware of the other ways to style your HTML. That way, you choose the best option for your code.

Here’s a summary of your options.

External Stylesheet

Developers typically keep all of their CSS in an external stylesheet. In your HTML file, use the <link> element to link to your external stylesheet, which contains your CSS.

<head>
    <link rel="stylesheet" href="./index.css">
</head>

Inside the file, index.css, we have our CSS rules.

p {
    color: red;
    font-size: 20px;
}

Internal stylesheet

Another option for styling CSS is using an internal stylesheet. This means defining your CSS rules inside the <style> element in your HTML file.

<head>  
   <style>
       p {
           color: red;
           font-size: 20px;
       }
   </style>
 </head>

Inline Styles

Less frequently, you’ll find yourself reaching for inline styles. But they’re still important to know about because there are certain occasions when they come in handy.

With inline styles, you’ll add the style attribute to an HTML tag followed by your CSS to style an element.

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>
<p>This is my second paragraph.</p>

So in our case, the text of the first paragraph is red with a font-size of 20px. The second one, however, remains unchanged.

Let’s take a closer look at how and when to use inline styles. We'll also uncover why only one of our paragraphs is styled.

What’s an HTML Tag?

With inline styles, you apply CSS to the style attribute in the opening HTML tag.

Examples of HTML tags include:

• ...

• ...

• ...

Opening and closing tags are often part of the HTML element, which can contain text, data, an image, or nothing at all.

Here, we have an element of text.

<p>This is my first paragraph.</p>

We can use inline styles to style this element by adding the style attribute to the opening tag, followed by CSS property-value pairs.

<body>
   <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
   <p>This is my second paragraph.</p>
</body>

Let’s walk through how we used inline styles.

How to Use Inline Styles

Add the style attribute to the tag you want to style, followed by an equals sign. Start and end your CSS with double quotation marks.

<p style="....">

Add property-value pairs to the style attribute. Add a semicolon after each property-value pair.

color: red; font-size: 20px;

So when we put everything together, it looks like this:

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>

Key Points to Know

Unlike internal and external stylesheets, inline styles don’t contain curly braces or line breaks. That is, write your CSS all on the same line when using inline styles.

Also, keep in mind that inline styles only affect the specific element that you add the style attribute with CSS property-value pairs to.

For example, in the code below only the first paragraph is styled red with a font-size of 20px.

<body>
   <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
   <p>This is my second paragraph.</p>
</body>

If we want to style the text of both paragraphs with inline styles, then we need to add CSS to the style attribute to the second <p> as well.

<body>
  <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
  <p style="color: red; font-size: 20px;">This is my second paragraph.</p>
</body>

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p {
    color: red;
    font-size: 20px;
}

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

<html>
  <head>
      <title>My New Webpage</title>
      <style>
       p {
           color: pink;
       }
   </style>
  </head>

<body>
   <p style="color: blue;">A blue paragraph.</p>
   <p style="color: blue;">Another blue paragraph.</p>
</body>
</html>

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

• Add a style and see the change quickly, which can be useful for testing.
• Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.

Last night my small team and I headed out to do a little networking and learn about Design Systems. Being that is was the buzzword of 2017, we were eager to learn how we could create our own.

We had heard all the wonderful benefits of creating a design system: saving time, reducing debates, collaboration, adoption, and more. I was excited!

All the talks spoke about how to create a design system. However, these were big teams or they had dedicated resources, even a DesignOps team (2nd buzzword of 2017) to build and maintain the design system.

At the end of the evening we left a little discouraged. But we were not alone. During the Q&A session many were asking:

“How can I build a design system as a single designer?”

“I’m the only designer, what advice do you have for me?”

But my team and I decided we weren’t going to let this stop us. We are still going to create our own design system. Before I dive into that, here’s a bit of background.

What is a Design System?

“A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.” — Nathan Curtis

Simply put, a design system is a collection of reusable components to tie whole products together.

Many people have written in-depth articles and books on design systems. Here are a few you may find useful:

A comprehensive guide to design systems - InVision Blog
_Companies like Airbnb, Uber, and IBM have changed the ways they design digital products by incorporating their own…_www.invisionapp.comDesign Systems, Style Guides, and Pattern Libraries: Oh My! - UXcellence
_Many designers use the terms design system, pattern library, and style guide interchangeably. But they don't mean the…_uxcellence.comDesign Systems Handbook
_A design system unites product teams around a common visual language. In this book, learn how you can create a design…_www.designbetter.coCreating a Design System: The 100-Point Process Checklist
_Know how to build a design system step-by-step. Based on real projects. Create a UI inventory, get buy-in, create color…_www.uxpin.com

Style Guide vs. Design System

You may be thinking, great but isn’t that just a style guide?

“A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” — Nathan Curtis

Additionally, a design system is a bunch of different sized components (or molecules) that can be put together in endless ways to create a series of larger components. Brad Frost’s Atomic Design is the inspiration for component design.

Benefits of a Design System

“The challenge we face today is that tools don’t communicate to each other very well, details fall through the cracks, there is a huge gap between design and engineering and we need to do a lot of manual work to make sure we are always on top of everything.” — UX Bootcamp

As a small team working on B2B enterprise software, we were diving into creating a design system with limited time, budget and resources. I wanted to remind our team of the benefits.

Overall our team would be saving time because of:

• Reduced debate — No need to waste time revisiting design decisions for the same component
• Reusable components making scale possible
• Increased collaboration — improve working remotely and in different offices

I had a selfish reason for wanting to build a design system. I quickly realized, if successful, we could ‘automate’ many tasks allowing us to have time to do something I love, solving user problems! That is the core of UX.

Design System Structure

In order to create a design system, we need to break it down and understand its parts:

_[UX Pin — Design System](https://www.slideshare.net/uxpin/building-a-design-system-a-practitioners-case-study" rel="noopener" target="blank" title=")

A bit of soul searching is involved as well. Some questions to ask when creating a design system:

• How does the system work today and in the future?
• What is our vision?
• What problems are we trying to solve?
• Who does this problem most impact?
• What impact do we want a design system to have on how we work?

How others are attempting to approach this:

How we’re using Component Based Design
_Component Based Design is often talked about in context of large, complex projects. In this post we’re making the case…_medium.comSetup a design system
_Build a system that provides a unified set of UX, design rules and patterns._blog.prototypr.io

How can our small team make a design system?

Where do you start when you don’t have enough resources, time or budget?

1. Don’t start from scratch

“If you wish to make apple pie from scratch, you must first invent the universe.” — Carl Sagan

Our team is reviewing existing design systems out in the wild so we can — as Austin Kleon says:

_[Steal like and Artist — Austin Kleon](https://www.amazon.com/Steal-Like-Artist-Things-Creative/dp/0761169253" rel="noopener" target="blank" title=")

Many companies have made their design systems public and have even shared sketch files. I have shared a list below. This fact, and the many other sketch resources, makes it a no-brainer to use Sketch as our tool of choice.

Additionally, there are tools out there which can help you quickly create a baseline for your design system:

Frames for Sketch - Web Design System
_Carefully crafted components and best sketch techniques combined into a powerful web design system._framesforsketch.comSymbols & Styleguides
_The smartest template and your future starting point for every User Interfaces in Sketch. Stop wasting your time by…_symbols.janlosert.comSketch App Sources - Free design resources and plugins - Icons, UI Kits, Wireframes, iOS, Android…
_Sketch App Sources is the largest collection of icons, UI kits, wireframes, and free design resources for Sketch._www.sketchappsources.com

2. Know what you’re working with

We have decided that it is a must to complete a UI Audit of all our sites and properties. We may have to call in a few favors to get this done. But since it is just documenting what exists, enlisting help from others may not be that difficult. This will be time consuming, but in the end it will be worth it. We will be able to design holistically when creating new components.

This may be useful for learning how to conduct a UI audit:

The step-by-step guide to an effective UX audit — InVision Blog
_This step-by-step guide will teach you how to audit your user experience. But before we dive in, let’s first…_www.invisionapp.com

3. Build as you go

A design system is a living document. Realizing that the work is never done, we’ve decided to jump in and build as we go. As we iteratively work on our projects, we will design with components in mind and will eventually have a design system. Fortunately, there are a few of us, which allows us to be collaborative and “steal” from each other.

Quick tip: Build symbols in Sketch. I know, it seems time-consuming, but once you see the power of symbols you will appreciate the old saying:

“You have to go slow in order to go fast.”

4. Know your limits

Start small.

Some design systems include code snippets. That is the ultimate goal, because it will increase adoption across the company and create a consistent user experience. However, my small team can’t do that. Not yet, that is.

We are planning to start with a sketch file of simple components. Once we are far enough, we will work with our frontend devs to create CSS. Allowing developers to use their ‘weapon of choice’ when it comes to code may allow the design system to live. And with code bases changing on what seems to be a daily basis, keeping our hands out of it may be best.

5. Stay organized

Sounds simple, but with projects piling up and looming deadlines, it feels easier to do things the ‘quick and dirty’ way. Staying organized does take time and is never done, but it keeps everyone sane and reduces the email or slack clutter of files flying back and forth. As we start working on new things using a UI kit that we are going to build with one of the tools listed above, we need to keep track. Otherwise, we will end up where we started — different styles everywhere!

Design document versioning is a dream for all designers. No one product has gotten it 100% right. We are going to give Abstract and Plant a try to see how it can help keep us on track. Working for an enterprise, the only online platform we can use for file storage is One Drive. Google drive and Dropbox are other options if you aren’t restricted.

Abstract
_Version control and file management for your Sketch files. Abstract enables designers to reliably version and manage…_sketchapphub.comPlant - version control app and Sketch plugin for designers
_Plant is a version control app and Sketch plugin for designers. Sync design versions, invite teammates and take full…_plantapp.io

These are the first steps my team and I are going to try when starting this journey. Fingers crossed we make some headway. I would love to hear from other small teams, even a ‘team of one,’ to learn how they are tackling this challenge.

Design System Directory

As promised, here are some design systems for inspiration or for “stealing like an artist:”

miukimiu/design-systems
_design-systems - A curated list of design systems. Learning materials and tools for creating your own design system._github.comAtlassian Design Guidelines | Atlassian Design
_Design, develop, and deliver. Use Atlassian's end-to-end design language to create straightforward and beautiful…_atlassian.designBuilding a Visual Language
_Behind the scenes of our new design system. This article is part of a series on our new Design Language System. Karri…_airbnb.designBBC GEL | Homepage
_Our Global Experience Language (GEL) is the BBC's shared design framework which enables us to create consistent and…_www.bbc.co.ukCarbon Design System
_Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines…_carbondesignsystem.comHome - Office UI Fabric
_The official front-end framework for building experiences that fit seamlessly into Office and Office 365._developer.microsoft.comFluent Design System
_An eloquent design system for a complex world. Now's the time for bold, scalable, universal design. This is a…_fluent.microsoft.comHarmony Design System
_Harmony is a living design system that unites Intuit's small business products, brand and marketing experiences across…_harmony.intuit.comIBM Design Language
_Use the IBM Design Language to create beautifully crafted products and enlightening user experiences._www.ibm.comLightning Design System
_The Lightning Design System provides accessible markup which will serve as a foundation for your application…_www.lightningdesignsystem.comLonely Planet Travel Guides and Travel Information
_Style Guide Documentation Performance Monitoring About Rizzo_rizzo.lonelyplanet.comMaterial Design
_Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences._material.ioNachos | Trello
_Trello - Pattern Library_design.trello.comPega UX Design System
_Pega is a powerful UX system for engaging customers and employees. Pega software solves complex business problems…_design.pega.comPredix Design System
_Edit description_www.predix-ui.comU.S. Web Design Standards: A design system for the federal government
_The Standards provide research-backed design patterns for building accessible, responsive, and consistent digital…_standards.usa.govSAP Fiori Design Guidelines
_The original SAP Fiori user interface for web apps based on the SAPUI5 framework. Learn how to design engaging and…_experience.sap.comShopify Polaris
_Our style guide is the blueprint for our design system. It helps us collaborate across disciplines to build a great…_polaris.shopify.comPattern Lab | Build Atomic Design Systems
_Unlike static design tools, Pattern Lab lets you easily swap in different representative content into your components…_patternlab.io

Pattern Libraries / Style Guides

WTF is Solid? - Solid
_Solid is BuzzFeed's CSS style guide. Influenced by frameworks like Basscss, Solid uses immutable, atomic CSS classes to…_solid.buzzfeed.comStyle Guide
_Buffer makes it super easy to share any page you're reading. Keep your Buffer topped up and we automagically share them…_buffer.comDuolingo: Design Guidelines
_When written, Duolingo is always a single word with an uppercase 'D'. The 'L' is never capitalized, and the name is…_www.duolingo.comPattern library - FutureLearn
_Enjoy free online courses from leading UK and international universities._www.futurelearn.comDesign Guidelines - The way products are built.
_Web Developer from Somewhere_designguidelines.coWebsite Style Guide Resources
_A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries_styleguides.ioGrid System | MailChimp
_Our grid system is composed of 8 flexible columns with a gutter between columns of 30px. We apply border-box so that…_ux.mailchimp.comStyleguide
_Edit description_www.yelp.com

If you found this useful, you know what to do now. Follow me to get more articles and tutorials on your feed.