Creating a Website Brandkit

The Problem

When designing & building a website, quite often there’s no supplied Brandkit or styleguide, there is just the clients logo. This is especially true when working with a startup company. Much of the task of developing the rest of the brand is left to you, the Web Designer.

This can lead to bland looking websites or a ‘brand’ that may not be inline with the clients vision.

The Solution

To ensure your understanding of the brand is aligned to the clients vision. Develop the Brand Kit as a separate project prior to launching into the design of the website,

What UI elements do you need for a website brandkit?

The below is a list of UI (user interface) elements required for a website Brandkit.

Color Palette

  • Primary brand
  • Secondary brand
  • Tertiary brand
  • Neutral
  • Supporting colors

More info for creating color palettes

Heading & Subheadings

  • Font size
  • Font family
  • Color combinations

Body Copy

  • Font size
  • Font family
  • Color combinations
  • Links within body copy
  • Lists within body copy

Images Treatments

  • Tints and tones
  • Texture overlays
  • image style

Textures and Graphical Elements

  • Shapes
  • Linework
  • Patterns


  • Slideshow arrows and pages
  • Phone icons
  • Email icons
  • List icons


  • Font size
  • Font family
  • Color combinations
  • Primary, secondary and tertiary

You might say that this is apart of the job as the Web Designer to create all this stuff as part of the website. Which is fine as long it’s factored into the cost. Keep in mind that a lot of the UI elements and graphics created as part of the website can be reused for other digital assets such as YouTube video covers, Linkedin banners & banner ads. And for continuity, any print assets will also take into account the Brandkit established by the Web Designer.

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.