What is a Style Guide?

A style guide is a document that includes all the main elements of your brand’s visual identity. It works as a single source of reference for the whole team, including product owners, content creators, designers, and developers, when making updates or changes to the website.

In general, a style guide is helpful for the following purposes:

Consistency

A consistent visual style is one of the most important parts of building a strong brand identity. It helps you earn trust and build lasting relationships with your audience.

Shared understanding

When everyone on the team uses the same reference document, it becomes easier to collaborate and stay aligned.

Smooth onboarding

New designers can jump in and contribute right away without needing to ask for guidance every time. The style guide gives them clear direction from the start.

Code alignment

UI style guides help front-end developers write consistent HTML, CSS, and JavaScript. This makes sure the code matches the visual design standards.

Note

A style guide is not the same as a brand guide. Brand guidelines usually focus on logo use, fonts, colors, and other elements used in marketing and PR. Many companies publish these publicly. Our style guide is internal and more focused on design and development consistency.

Below is an overview of how our internal Style Guide is structured:

Grid Setup

UI designers use lines, columns, and margins to build the structure of a web page. Every web design project starts with a grid. Defining a clear grid system helps keep all pages consistent in layout and alignment.

When setting up a grid, it’s important to consider a few key elements like the container, the number of columns and rows, the size of margins, and the gutter space. Developers focus on making the layout functional, so it’s important that design elements are placed correctly and don’t break the structure.

A basic grid system includes:

Units – These are the building blocks of a grid.
Gutter – The white space between units. It keeps content from feeling crowded.
Columns and containers – Groups of units and gutters that define the main layout structure

Responsive Layouts

When a digital product is built using a responsive grid system, the UI style guide should include layout rules for different screen sizes. As the screen size changes, the columns in the grid adjust automatically based on predefined breakpoints.

For example, if you resize your browser window, you’ll notice how the grid columns shrink or expand to fit the new width. This ensures the design looks good and works well on all devices, from desktops to mobile phones.

Spacing System

Spacing gives content room to breathe and helps create a clear visual hierarchy. It improves readability and makes the layout more organized and efficient.

The goal is to give each element enough space so it doesn’t feel crowded. We use margin and padding to separate text, images, videos, and other elements.

Top and bottom padding values should be defined in the Style Guide for desktop, tablet, and mobile views to keep spacing consistent across all screen sizes.

Padding vs Margin

In CSS, spacing is created using two main properties: padding and margin.

• Padding is the space inside an element, between the content and its border.

• Margin is the space outside the element, separating it from other elements.

In the example below, you can see how each part is placed:

1. Padding – the inner space

2. Border – the edge of the element

3. Margin – the outer space around the element

Color Palette

Using colors consistently is key to a strong and professional-looking interface. When colors are used randomly or without clear rules, it can quickly weaken the design. That’s why a well-defined color palette is important.

Start by listing your brand colors along with their codes such as HEX, RGB, and CMYK. But don’t stop there. Also include examples of how and where to use each color.

Here are a few tips for organizing colors in your style guide:

• Show color codes in HEX, RGB, and CMYK
• Define opacity levels for each color if needed
• Include background colors with examples
• List text and link colors and explain when to use each. For example, light blue for links or dark red for alerts

Typography Scheme

Typography is a big part of how a product looks and feels. Just listing the fonts isn’t enough. The style guide should clearly show how to use fonts for things like titles, subtitles, headings (H1, H2, H3), body text, and captions.

Make sure to include font sizes, weights, and styles. It’s also important to add line height and letter spacing so everything looks balanced and easy to read.

These text styles should be set up separately for desktop, tablet, and mobile to make sure everything stays clear and readable on all screen sizes.

Headline styles and the spacing between elements, such as titles and subtitles, should be included in the Style Guide. These details often vary from project to project, so it’s important to document them clearly.

Here’s an example of the spacing between a title and a list:

Example of spacings between title and subtitle:

UI Elements

Each product has its own set of unique UI elements. Below is a list of commonly used components that may vary depending on the project. What’s important is that all UI elements should be built using the typography, colors, spacing, and icon styles defined earlier in the Style Guide.

Typical UI elements include:

• Navigation (main menu, secondary menu, breadcrumbs, pagination)
• Buttons (primary and secondary actions, tool buttons)
• Alert messages (warnings, errors, info messages, validation states)
• Tooltips and popovers
• Modals
• Data tables
• Forms (input fields, radio buttons, checkboxes, dropdowns, inline validation, toggle switches)
• Markers (user types, patient status, document types)
• Additional components (calendars, timelines, lists, cards, modal panels)
• Content grid lists
• Vertical lists
• Date and time pickers
• Loading indicators
• Dropdowns
• Alerts

Below, we’ll walk through some of the UI elements that are part of our Style Guide.

Icon Set (Iconography)

Icons help users quickly understand actions, content, and navigation. When used correctly, they can often communicate more clearly than text, color, or images alone.

Here are some key guidelines for using icons in design:

• Keep all icons grouped together for visual consistency
• Provide versions for both light and dark backgrounds
• Use a consistent set of sizes across all icons
• Set predefined spacing or slicing areas to make SVG exports easier and more accurate

Buttons

Buttons are one of the most common elements in any interface, so it’s important to clearly define their styles in the Style Guide. Include details like size, color, typography, spacing, placement, and how they’re used in different contexts.

It’s a good idea to group buttons into categories, such as:

• Primary
• Secondary (or default)
• Reversed
• Outlined
• With background or border styles that can be easily translated into code

When designing buttons, focus on the following:

• Purpose – Use strong colors for primary buttons to guide users toward key actions
• States – Show the normal and hover states. In most cases, these two are enough
• Styling – Include font details, background color, border radius
• Extras – Don’t forget to show details like shadows or icons if they are used

Clear and consistent button design helps guide users and improves the overall experience.

Input Fields, Dropdowns, and Selectors

Forms are essential for making a website or web app interactive. They allow users to enter information, which the system can then process.

It’s important to define a clear structure for form elements. This includes input fields, dropdowns, and selectors, along with the different states they can have. Be sure to cover:

• Active
• Hover
• Error messages (for example, “Invalid email”)
• Warnings (such as “Password is too weak”)
• Success messages (like “Email was sent”)

For each form element, include visual details such as:

• Border style
• Border radius
• Font size
• Background color

Consistent styling helps users understand how to interact with the form and improves the overall user experience.

Pagination

Pagination helps users navigate through large amounts of content by splitting it into separate pages. It can be shown with steps or without them.

Step-based pagination displays all available pages or content items, highlights the current page, and lets users jump directly to any other page. This makes it easier for users to see where they are and how much content is left.

Widget

Depending on the project, different widgets, progress bars, and other animated elements may be included in the page layout. These elements should follow the overall design system and stay consistent with the rest of the interface.

Menu (Desktop and Mobile)

The Style Guide should include the menu layout for desktop, tablet, and mobile views. In most cases, the tablet version follows the same structure as the desktop. The mobile version typically uses a burger menu. All menu elements should be shown for each view to ensure consistency across devices.

A clear and well-structured Style Guide keeps design and development aligned from start to finish. It ensures consistency across all pages and devices, helps teams work more efficiently, and makes it easier to onboard new team members. In the end, it supports a smoother workflow and a better user experience.