Document your UI designs using a style guide

You are a UI/UX designer (fresher or experienced) assigned to your first green-field project. The requirements are well-documented, and you’ve read the user stories in and out. It’s your responsibility to define the look & feel - from colours and typography to the overall tone of the app. You’ve spent a good few hours preparing a mood board with inspiring images, colour palettes and font combinations.

Like most designers, if your next step is to start designing the home page (or the dashboard), STOP. Instead, start with a style guide.

What is a style guide?

A style guide is a blueprint for your design - a detailed breakup of various elements, components, and attributes. It serves as a documentation of your design elements and design choices.

What's in a style guide?

Colours

Colour codes (HEX or RGB) for,

1. Tones - Primary, secondary and tertiary if required.
2. Backgrounds - Light and dark themes.
3. Text - Headings, body text and links.

Fonts

Font family, size, line height and letter spacing for,

1. Headings
2. Body text
3. Special-purpose elements like code blocks and quotes.

Buttons

Font, colour and box-sizing for

1. Colour variants - Default, Primary and Secondary
2. Content variants - Default, With Icon
3. Sizes - Default, Compact and Large
4. States - Default, Mouse over, Clicked and Disabled.

Form controls

Font, colour and box-sizing for,

1. Native input elements - Text box, Radio buttons, Checkboxes and Dropdown menu.
2. Interaction states - Default, Mouse over, Focused, Clicked and Disabled.
3. Validation states - Validation in progress, Valid and Invalid.

Custom components

Font, colour and box-sizing for non-native, project-specific components like,

1. Alert messages
2. Modal windows
3. Searchable dropdown menus

Design choices

Most importantly, a style guide documents decisions that define the design language.

Examples,

1. Corners - Should you use flat or rounded corners? If round, what is the default value?
2. Shadows - Should you use shadow decorations to highlight depth? If so, are they single-layered or multi-layered? What is the default value?
3. Gradients - Should you use solid colours or gradients? What is the permitted number of colour steps? What is the default gradient angle?
4. Margins - Unidirectional (bottom-only) or bi-directional (top and bottom)?

Benefits of using a style guide

1. Consistency: Elements are consistent across pages/screens. Even when you return to a project after six months, the design style guide will get you up to speed within minutes.
2. Saves time: Reuse elements across screens. Change variants and states with a click. To modify a design element across screens, changing the master will let you update all child instances.
3. Easy translation - A design style guide eases building the frontend style guide (using KSS). More on this in a separate blog post.

I use Figma for all my designs. If you are new to Figma (or to design style guides), I have a sample design for you. Check out the saved colours, text style definitions and components. If you liked this post, please share it with one other person whom this might help.