Difference between brand/design style guide and a UI Pattern Library and how to avoid conflicts?

Question

What is normally covered in a brand style guide that is not included in a standard design style guide in the context of traditional and digital production? Does the brand style guide only cover the use of company/brand logos and colours/fonts? It seems like often an agency will be tasked with creating the brand style guide for a company, but doesn't necessarily take into account of the existing design style guides for their products and services.

How do people normally make a link between the brand and design style guide when it comes to conflict with colours, fonts and other visual design elements?

Answer 1

Usually, brand guidelines are for everyone, while design guidelines are the subset for designers.

---

It varies (particularly by geography and size of organisation), but usually "brand guidelines" are the broad umbrella including:

• "Vision" or "Mission statement" etc etc
• Tone of voice and writing style guidelines
• Logo files and usage guidelines (e.g. white space, minimum size, which variants to use on what backdrops)
• Other brand assets such as letterheads, business cards and slide templates
• Colour palettes (which are used more widely than just by designers)
• Briefing documents or commissioning guidelines

• Design guidelines << which are written for designers and go into detail on grids, styles, colour usage, typography, etc, and might include UI patterns, print specs, etc

• Any other specialist guidelines e.g. for video, music, product design, shop layout, customer service, responding to complaints, uniforms, company song...

Regarding the edit about UI pattern libraries - how these fit in varies as they are a comparatively new edition. They might be part of the design guidelines (e.g. this could be separated into "print" and "web"), or, they might be standalone or part of a separate document or suite on digital publishing standards aimed at not just designers and UX specialists but also content commissioners, editors, writers, IA people etc.

The latter is probably a "better" practice, as how online content is interacted with is closer to how it is planned and structured than it is to, say, print specifications; but I'm not aware of any firm standard (yet).

Answer 2

A brand guide is usually specifically in reference to the actual logo mark or brand. A Style guide is usually used for something like a website it can include type, colours, components, and items specific to the project

Answer 3

Based on your comment to your question, I believe you're asking about what UX teams typically call a Pattern Library. A good example is the one that MailChimp publicly shares:

https://ux.mailchimp.com/patterns

A pattern library is typically going to be more about the details of the interactions. It will include things such as:

• when to use the particular component
• when NOT to use it
• states
• accessibility requirements
• content requirements
• variances
• and sometimes actual code/CSS

As for how it conflicts with brand guidelines--it shouldn't. Brand/design guidelines should be fairly technology agnostic and, as such, not overlap too much.

As long as your pattern library's styles adhere to the brand guidelines, you should be good.

If you get to a point where something just has to conflict, so be it. At that point it becomes a process question for your organization. One option would be to allow for UI exceptions, then have those go back to the branding team to determine if the brand guidelines need updating.