UPQODE Style Guide instructions

upqode | Jan 20th, 2020

Few words about Style Guide

A style guide is a document gathering all elements of your brand’s visual style. A style guide is a “one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations.”

Generally, the style guide is useful for the following functions:


A unified visual experience is one of the main qualities of brand identity that helps you create a trustful relationship with your audience.

Shared vocabulary.

When all your team members have one document they can refer to, the work really becomes collaborative.


New designers can be involved in making design decisions from the very first day and don’t have to constantly bug older employees.

Code standardization.

UI style guides help create consistent HTML, CSS, and JavaScript code so front-end developers can follow the same standards designers do.

Important: Don’t confuse a style guide with a brand guide. A brand style, AKA brand guidelines, is a document listing correct usage of a brand’s logos, icons, names, and sometimes even sounds. Most companies post their brand styles for marketing and PR purposes. 

Below let’s overview our internal Style Guide structure:

Grid setup

UI designers use lines, columns, and margins to create the backbone of a web page. Every web page designing process starts with a grid. So, setting a grid policy will ensure that all pages have the same proportions and component alignment.

To set up a grid you will need to take in consideration certain mandatory aspects like container, units, number of rows and columns, margins and gutter. Developers are mainly interested in the functionality of the product, so all your elements need to be placed properly, without affecting the layout.

A basic grid system consists of:

Units. Building blocks of a grid. 

Gutter. Whitespace that separates units. These are thin white vertical lines.

Column or container. Blocks of interface comprised of several units and gutters.

Responsive Layouts

When digital products are designed around responsive grid systems, UI Style Guides must address interface layouts across screen sizes. Different column sizes automatically change dimensions once they reach certain breakpoints. To illustrate, resize your browser window and you will see the grid columns change size.

Extra small
Extra large
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

Spacing system

Spacing helps content to breathe as well as create hierarchy and depth. It ensures optimal readability and space efficiency.

Spacing is about giving every piece of content its own space on the screen. We use margin and padding to keep content separated from other elements such as images, video embeds and text.

Top/bottom paddings should be indicated in the Style Guide as well for desktop, tablet and mobile view:

Padding or Margin

In CSS, the two properties that make spacing possible are padding and margin.

  • The padding represents the inner space of an element
  • The margin is external

In this example, padding and margin are shown around border:

1 – Padding

2 – Border

3 – Margin


Color Palette

One of the quickest ways to wreck an interface is inconsistent color use, so color combinations need to be clearly defined. Listing colors and their values (HEX, UIColor) is a good start, but specific pairings and use examples should also be given.

Here are a few tips about color organization in a style guide:

  • Provide color instructions in different codes: Hex, RGB, CMYK
  • Specify different levels of opacity for each color
  • Don’t forget about background colors
  • Include text and link colors with clear use cases for each hue (e.g. light blue for links, burgundy for alerts).

color palette

Typography Scheme

Typography is one of the most common interface design elements, so it’s not enough to merely list the names of typefaces used in a product. Clear instructions should be given for Titles, Subtitles, Headings (H1, H2, H3), Body Text, and Captions.

Additionally, font sizes should be provided, weights indicated, and styles defined. Line height and kerning are also needed.

Typography should be indicated for desktop, tablet and mobile design:


tablet heading

mob heading

Headline styles and spaces between the elements (title + subtitle) can be indicated in the Style Guide if this is a case and will be different from project to project.

Example of spacings between title and list:


Example of spacings between title and subtitle:


UI Elements

At first it needs to be said that every product requires its individual elements. So, below there is a list of elements which may be used for different projects. The key is that all elements should be built upon previously defined typography, colours, spacing and iconography:

  • navigation (main nav, secondary nav, breadcrumbs, pagination, …),
  • buttons (primary/secondary action buttons, tools buttons, …),
  • alert messages (warnings, errors, information, validations, …),
  • Tooltips and popovers
  • Modals
  • Datatables
  • forms (fields, radio buttons, checkboxes, poplists, infield validation, on-off switches…),
  • markers (person types markers, patient states markers, document types, …),
  • additional elements (calendar, patient timeline, patients lists, documents lists, cards, modal panels, …).
  • Content grid list
  • Vertical lists
  • Data and time picker
  • Loading indicator
  • Dropdowns
  • Alerts

Let’s overview some of the UI Elements which are present in our Style Guide below: https://invis.io/HGVBCMQZXS8#/398303481_Style_Guide_

Icon set (iconography)

Icons in your projects will give an instant idea to visitors as to what’s going on and what will happen next. Picking the right icons will give more context to content than color palette, copy or graphics. 

General rule for using icons in design:

  • all icons shown together (that will help you with visual consistency),
  • icons versions for light and dark backgrounds,
  • unified range of sizes,
  • predefined slicing areas for easier SVG exports.



Nearly every interface includes buttons, so take the time to document their sizes, styles, colors, placement, spacing, and typographic elements. If various buttons are used in different contexts, make that clear as well.

A best practice is to group the buttons into classes: primary and secondary or (default), reversed, outlined, with specific backgrounds or borders that can easily be translated into code.

When designing buttons, make sure you bring in front details like:

  • Importance. Using a powerful color on primary buttons, gives a visual indicator leading the user to perform a desired action.
  • States. There are a few states here, but you can stick just with normal and hover and most of the time you don’t need more than that. 
  • Indicate fonts, backgrounds, border radius for buttons.
  • Emphasize details like shadows, icons.


Input fields and dropdown, Selectors

Forms are what make your website or web app interactive and dynamic so the user can enter the data and you can then manipulate it and do the work.

Make sure to establish a hierarchy and include possible feedback from forms — active, hover, add error, warning and success messages including things such as a password being too weak, email being not valid or simple success messages e.g. “email was sent.

Border, Border radius, font size, background color should be also indicated for all types of buttons and dropdowns.




Pagination is used for changing larger page content items. It can be shown in steps or without steps.

The step-based display shows all available and directly selectable pages or content items as well as the current position.


Depending on the projects we might have different widgets, progress bars and other animated elements included into the page structure. 


Menu (desktop/mobile)

For the menu part we need to have the desktop version, tablet version (usually is the same as for the desktop) and mobile version (burger menu) of all menu elements.



Filed under: Web Design WordPress Development

Related posts


What They Say

This is a team that pays great attention to detail and does great work. I had a design done for my website by a separate designer, and Nick implemented the design perfectly for both mobile and desktop. His team uses project management software to track tasks and break up the work for his team into sprints. You aren’t just getting a developer when you hire Nick, you’re also getting great project management and organization. I 100% recommended it.

Erik DiMarco

Manager, NimbleDesk

UPQODE delivers high-quality web work quickly, thanks to their expertise in PHP and WordPress. Regular communication and reasonable prices further smooth the workflow. We've been very pleased with the results. UPQODE responds far more quickly to development changes than our core team would be able to. They are highly knowledgeable about best practices in WordPress, and their ability to rapidly scale up whenever we need a project completed makes them a valuable asset for us in our development needs.

Jim Kreyenhagen

VP Marketing and Consumer Services, doxo

The engagement resulted in an aesthetically pleasing website that satisfied internal stakeholders. They dedicated capable resources that ensured effective collaboration. UPQODE’s attentiveness and flexibility support a successful partnership. They created a beautiful website that we love. The site functions to advertise a certain medical procedure, so I can’t speak to any traffic metrics. UPQODE's responsiveness was their most impressive quality.

Jessica Echevarria

Administrator, University Division

UPQODE delivered a functioning and accessible website. Their adaptable approach to customer service allowed for a smooth development process and set the foundation for possible future collaborations. The delivered website met all of my requirements and explains everything I need it to. UPQODE was very understanding and accommodating of my changing needs throughout the project. The communication was excellent. I plan to work with them again for future needs.

Darren Devost

Owner, Devost's Dynamic Marketing

The vendor succeeded in creating innovative WordPress solutions. Their availability enabled the client to deliver products more quickly. UPQODE's project management was good—their staff met weekly with the client and was always very punctual. UPQODE brought troubleshooting, recommendations, and ideas that our previous partner was unable to provide. They deliver work on-time and within budget. The design they’ve inserted into the product has enabled us to deliver products more quickly. They have always been very helpful in recommending better solutions.

David Bill

President & Founder, Liquid Knowledge Group
Request a Design