Hi, I’m Jared, and I have been in creative design since 2014. Here you will find all you need to create a Company Style Guide.
Included In This Article:
What Is a Style Guide | Logos | Logo Sizing & File Types | Favicons | Color Palette | Typography | Fonts | Styling | Images | Charts Graphs & Tables | Naming Conventions | Program Specific Styling
What is a Style Guide?
This document provides the guidelines for how to consistently present your company’s documents and presentations using consistent fonts, graphics, layout, and tone. The style guide’s goal is to make sure that multiple contributors create or update documents in a clear, cohesive, and consistent way with everything the company produces. Anything that is considered a company standard for any type of document should be included in the style guide.
What should you include in a Style Guide?
The following should be included in a style guide. There is no hard-fast rule regarding what is required to make a style guide. Include what you feel is necessary to create a cohesive vision for your company.
Logos
Display the log in various sizes, and any acceptable colors. Be sure to provide any significant details when placing or recreating the logo such as dimensions, fonts, and color schemes. Also be sure to indicate what is not acceptable for the logo. An example might be to "never turn the logo on its side" or "never change the color scheme of the logo". Display the log in various sizes, and any acceptable colors. Be sure to provide any significant details when placing or recreating the logo such as dimensions, fonts, and color schemes. Also be sure to indicate what is not acceptable for the logo. An example might be to "never turn the logo on its side" or "never change the color scheme of the logo". To the right is a concept logo for a reporting program. Red may be the default color, and this should be indicated in the style guide using HEX, Pantone, CMYK, and/or RGB codes. This will help contributors to find the exact colors being used, rather than having to make a guess. Other acceptable colors should be added, as well as when to use those variations of the logo. For instance: Use the All Black version for print, or when printing from a webpage may be an option. Use Primary Colors for internal documents only. RGB 192,0,0 may be used for all other sources. |    |
Logo Sizing & File Types
Sizing of the logo may vary from situation to situation. The logo can be enlarged or shrunk to the point of illegibility; however, it is recommended that the logo be no smaller than 1cm (H) x 2.5cm (W), and your style guide should mention this. The following chart depicts the various file types, and when they are best used for logos:
.jpg / .jpeg - Standard image type that can be used in most cases such as within Microsoft suites and on website pages. Using “lossy” compression, jpg files compress to smaller files sizes.
.png - Using “lossless” technology, this format is good for storing small-sized file objects like icons. It may be more suitable for websites than jpegs.
.pdf - A compression that allows for very high-quality images. To be used for websites, brochures and catalogues, or any documents that will be printed in high-quality.
.ai - Photoshop Illustrator’s file format that adheres to vectors and equations over pixels. Thus, these images can be infinitely sized in either direction. Few programs recognize this format; however, it may be the best choice for printing certain promotional materials.
Favicons
A Favicon is the image web browsers like Chrome places beside bookmarks and website links. Favicons must be 32x32 pixels in .png format for transparency. Define the standard and describe its elements. If the icon is kept in a specific directory in the company's database, you may list it in the guide as well.
For best contrast all black is preferred, but this may not be best for some browser bars.
Color Palette
The style guide should include samples of acceptable colors that may be used for company documents, marketing materials, and other company products. A visual sample such as the one to the left should be included, allowing the contributor to see what are acceptable variations. Be clear as to which colors are the primary company colors, and when variations are allowed. Include codes like Hex, Pantone, CMYK, and RGB so contributors can find exact matches. There are online color finders that can help you to find your exact match.
Use RGB for screen output
Use CMYK for printing
Hex is primarily for coding purposes
Pantone is a recognized system for professional printing. When sending documents or brochureware to the printer, pantone colors may be the best source
 | RGB: 183, 30, 40 CMYK: 19, 100, 95, 10 Hex: b71e28 Pantone: 7620C |
It may be useful to show charts and graphs in the company's colors so the contributor can have a clear direction regarding such illustrations. Provide samples for tables, charts, graphs, and other illustrations.
Incorrect: Non-standard company colors used
Correct: Standard company colors used
Your company may have define Best Practices for color and Accessibilites, and these should be noted in your style guide. Here are some examples of what would be considered a Best Practice:
Ratio: Text and interactive elements should have a color contrast ratio of at least 4.5:1.
Color as indicator: Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
Color blindness: Red/green color blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” and “good” indicators).
A good tool for online color checking can be found at WebAim.org, where colors can be tested for contrast and accessibility compliance. The link is: https://webaim.org/resources/contrastchecker/
If you're a programmer using Bootstrap to create your websites and need to look into color schemes, the following site has some good reading material: https://getbootstrap.com/docs/4.4/utilities/colors/
Typography
Your company might have strict guidelines regarding text, paragraph styles, and other typographical elements. Fonts likely need to be clear and legible no matter what the size, and they might need to be accessibility compliant. Perhaps your guidelines include being web-friendly, or being installed on most systems already. All of this (and any other guidelines) should be included in your style guide.
Fonts
Define your company's standard font collection. It looks unprofessional to have many company documents using different fonts, and it almost never looks good mixing fonts within the same document. Below is an example of a company document using multiple font families. While the signature is acceptable, the other fonts look strange together.
Make notes on the font of choice, and what variations are acceptable:
Calibri comes in a few different weights (regular, light, bold) and one style (italics), making it slightly limited in variation when compared to other common font families like Arial; however, it is subjectively cleaner, more professional looking, and modern. It is also widely recognized and is preinstalled in most computers today.
Here are some pointers when outlining font usages:
Use one font family when possible per document. Variations within the font family may be used in a single document but should be avoided.
Outline when it is okay to use a secondary font, and be sure to indicate what that secondary font is.
Outline when it is okay to use other fonts (such as fonts clients use, and working with their documents)
Discuss where it is okay to pull fonts from. Fonts aren't always free, or even free for commercial use. Be sure if your contributors are going to use an outside font that it is one you won't get in trouble for using
It is a good idea to list out the acceptable fonts, using examples and key elements to define them in your style guide. An example of this is as follows:
Header 1
Arial, 20pt, Orange Accent 2, Left-Aligned, 8pt line spacing at end of paragraph. Top level categorization.
Sub Header
Arial, 14pt, Orange Accent 2 Darker 50%, Left-Aligned, 8pt line spacing at end of paragraph. Secondary level categorization.
Styling
It may be necessary to outline how content should be displayed in either document or online forms. An example of this might be a style indicating how the company's help guides should outline instructional content. The following provides an example, followed by the Do's and Don'ts when creating Help Content in Microsoft Word:
When creating a table in this format, keep the following in mind:
Content on the left, Image on the right
Use one row for all content. A second column can be used for images
Use the Company-Bold character style for specifically referred to fields or buttons.
Highlight the tip text in a standard 25% grey.
With the cursor inside the table, select Table Tools | Layout (it shows up on the right, not to be confused with the standard Layout tab), then Properties. In the Row tab, turn off Allow row to break across pages. This will ensure the instruction block does not get cut between pages.)
Do not add blank lines before or after the text in the table. Instead make sure there’s a 6pt cushion before the top line, and after the bottom line (Home > Paragraphs > Spacing Before / After)
Do not create multiple rows, or the panel could be split up between pages in a Word document
Do not add outlines or use special formatting like shadowing to images. They do not look presentable within the two red upper and lower borders
Images
As with fonts and styles, the guide should include how images should be displayed in both document and web format. Include sizing, quality, color, and any do's and don'ts that should be defined. Consider whether images should have borders, or what sort of alignment they should follow (left, center, etc.).
Indicate the proper procedure for saving files. Where in the company's database should they be stored? What is the naming convention for these images? You can also indicate how images should be placed within documents. For instance, when an image is copy/pasted into a document it tends to clutter up the file (and sometimes make the file size larger) than if the same image was inserted using the programs Add Image feature.
Include screenshot policies, like how to locate and treat sensitive information that may be captured. Also include how Alt Text and captioning should be treated.
Like with images, shapes and icons should also be acknowledged in the style guide. Indicate how shapes should be treated: what colors should they be, and where in the document or near the paragraph should they be located. In the following example the style indicates the shape (arrow) should be a certain color and thickness, and it should not have an outline or any special effects like a shadow.
A good source for free icons is Font Awesome: https://fontawesome.com/icons?d=gallery. Modifications to icons in FontAwesome.com can be made directly on their site; however, the rights to using these icons do not allow the user to modify them after they are downloaded. Use their online modification software to set the icon how you like it, and then download.
Charts, Graphs, and Tables
In the color section of this article charts were touched upon, demonstrating the need to include color schemes for illustrations. to elaborate further, other elements and properties for tables and charts should be defined as well. Indicate acceptable colors and fonts that may be used, and also define the alignment of titles and legends. Include how dates should be written (December 09, 2020 vs. 2020-12-09), and indicate if any particular graph or chart is preferred over another.
Naming Conventions
Your company may have specific naming conventions or unique terminology that must be used company wide. Things to consider are:
How files are named (whether for internal or external use). Should naming include spaces or underscores? Should capitalization be included? Should all files be appended with dates?
How outgoing documents or guides should be named
When mentioning a proprietary product, should it be written in a special style?
How dates and other typically formatted text should be written, for instance:
Times
Proper Format: 12:34 AM, 13:00
Improper Formats: 12:34a.m. 12.34pm
Dates
Proper Format: DD-MM-YYYY DD/MM/YYYY
Improper Formats: Jan 12-2020
Phone Numbers
Proper Format: (xxx) xxx – xxxx (Use the “–” n-dash)
Improper Formats: xxx-xxx-xxxx, xxxxxxxxxx, (xxx)xxx-xxxx
Postal Codes
Proper Format: X0X – 0X0
Improper Formats: MM-DD-YYYY MM-DD-YY
Things to keep in mind:
To rename a file or folder in Windows, select it and press F2. To rename a file or folder on a Mac, select it and press the 'return' key.
Some organizations don't yet support # and % in names. If you're a global admin or SharePoint admin in Microsoft 365, see Enabling # and % Support on the SharePoint blog to learn how to allow these characters.
If you're using Office 2010, you can't use "&" in file and folder names.
For more information, see When OneDrive renames items with invalid characters and Why has my filename changed from comma to ^J.
Program Specific Styling
If your company uses specific programs and applications that require styling instruction, it is wise to include this in the style guide. An example of this is when a company uses Microsoft Outlook or another email application, the guide should define how employee signatures should look. The following is a sample of a company's signature line in Outlook:
Remember: creating a style guide will unify the company's vision, and it will ensure all contributors and employees create content with uniformity.
Nice article!