Style Guide Checklist

A style guide establishes and enforces style to improve communication.

This is a checklist of potential things that might want to be considered when constructing a style guide for a company or project. Currently a work in progress so please feel free to open issues or pull requests.

Table of Contents

• General
• Company Brand
  • Logo
  • Illustrations and Digital Media
  • Photos
  • Videos
  • Legal
  • Displaying Company Assets
  • Presentational Assets
  • Misc materials
  • Email
  • Social media
• Writing
  • Voice and Tone
  • Formatting
  • Punctuation
• Design Primitives
  • Units of Measure
  • Colors
  • Gradients
  • Typography
    • Typefaces
    • Type scale
    • Leading / line-height
    • Tracking / letter-spacing
    • Font weights
    • Measure
    • Text Alignment
  • Borders
  • Drop & Box Shadows
  • Layout
    • Spacing
    • Breakpoints
    • Grid
    • Vertical alignment
  • Headings
  • Graphs and Data Visualizations
  • Animations
  • Icons
  • Misc
• UI Patterns
  • Text
  • Headings
  • Links
  • Inputs
  • Forms
  • Tables
  • Buttons
  • Pagination
  • Actions
  • Navigation
  • States
• Consuming the styleguide
• Further Reading

General

• About
• Overview
• Getting Started

Company Brand

Logo

• General usage guidelines
• Logo
• Logomark
• Logotype
• Clearspace notes
• Sizing notes
• Color rules, notes, guides, restrictions
• Using against
  • Background images
  • Background gradients
  • Background colors
• Usage restrictions
• Appropriate asset usage
• Assets
  • .eps
  • .ai
  • .sketch
  • .psd
  • .svg

Illustrations and Digital Media

• General guidelines and usage
• Examples
• Resources

Photos

• General guidelines and usage
• Saliency
• Content
• Composition
• How to combine with text

Videos

• General guidelines and usage
• Aspect ratios
• Compression formats
• Closed captioning
• Autoplay
• Initial volume
• Platforms

Legal

• Using company Trademarks
• Using company Copyrights
• Trademark symbols

Displaying Company Assets

This section might be documentation for 3rd party vendors or affiliates

• Outdated graphics

Presentational Assets

• General rules and guidelines
• Slide decks (powerpoint & keynote)
• Internal template
• External template
• Shared assets
  • Client / Vendor logo assets

Misc materials

• General guidelines and usage
• T-shirts
  • Materials
  • Colors
  • Company Logo Placement
• Buttons
• Pamphlets
• Posters
• Booth decals / structure
• Billboards

Email

• Email signatures

Social media

Twitter

• General usage guidelines
• Avatar
• Background Image

Facebook

• General usage guidelines
• Profile photo
• Background Image
• Photo albums

Vimeo / Youtube (Support videos?)

• Avatar

Writing

Style to be good must be clear. Clearness is secured by using words that are current and ordinary. - Aristotle

Voice and Tone

• General guidelines and overview
• Goals
• Principles
• Examples of acceptable text
• Examples of unacceptable text
• Marketing
• App
• Gender
• Pronouns
• Age
• Vision
• Personal attributes
• US vs UK
• Grammar
• Acronyms

Formatting

• Numbers
• Dates
• Time
• Datetime/Number ranges
• Decimals, Fractions, Percentages
• Value ranges
• Currency
• Telephone numbers
• Temperature
• URLS
• Citations
• Quotes
• Contractions
• Author
• Address
• States, cities, countries
• About company
• About other companies
• Capitalization
• Slang
• Internationalization (i18n) considerations
• Copyright
• Trademarks
• Other symbols
• Capitalization
• Wordlist e.g back end vs back-end. Bcc vs BCC

Punctuation

• Colons
• Commas
• Dashes and hyphens
• Ellipses
• Periods
• Question marks
• Exclamation points
• Quotation marks
• Semicolons
• Ampersands

Design Primitives

Base visual styles that can be used for both digital and analog assets.

Units of Measure

• Names
• Symbol usage
• Web (note and document if multiple units are used)
• Email
• Print

Colors

• General usage guidelines
• Palette
• Combinations of colors for use
• Color Swatch
  • Color Name
  • CMYK
  • PMS
  • Hex
  • RGB
  • hsl

Gradients

• General usage guidelines
• Combining with text
• Color values
• Type(s)
• Direction

Typography

Typography exists to honor content. - Robert Bringhurst

Read the text before designing it. - Robert Bringhurst

Typefaces (Font family)

• General usage and guidelines
• Web typeface(s)
• Email typeface(s)
• Print typeface(s)
• iOS typeface(s)
• Android typeface(s)

Type scale

• General usage and guidelines
• Web
• Email
• Print

Leading / line-height

• General usage and guidelines
• Copy
• Titles / Large font-size
• Special cases

Tracking / letter-spacing

• General usage and guidelines
• Tight value
• Spaced value

Font weights

• General usage guidelines
• Define, if any, constraints with font-size
• Available weights (values)
• Restriced weight values (if any)

Measure (Length of lines of text)

• General usage notes
• Narrow
• Default
• Wide

Text Alignment

• Horizontal text alignment value options
  • Right
  • Left
  • Centered
  • Justified
• Considerations / guidelines for centering text
• i18n considerations (Right to Left, Left to Right)
• Vertical Alignment general usage guidelines

Borders

• Colors
• Styles
• Size (width)
• Radii

Drop & Box Shadows

• Colors
• Blur
• Size
• Direction

Layout

• Spacing (margins and padding)
  • General usage and guidelines
  • Values
  • Ratio
• Breakpoints
• Grid
  • Gutters
  • Column sizing
  • Column divisions
  • Responsive patterns (Collapsing and expanding columns)
• Component layouts / structure
• Page layouts
• Vertical alignment (the whens and hows)

Headings

• General usage and guidelines
• Font size changes across breakpoints

Graphs and Data Visualizations

• General usage and guidelines
• Colors
• Styles
• Gradients
• Labels
  • Orientation
  • Capitalization

Animations

• Easing functions
• Timing of animations
• Animation types i.e Bounce, fade, glow
• Animated properties

Icons

• General usage guidelines
• Icon grid system
• Size API
• Colors
• Use w and w/o text
• Alignment
• Collect icon assets
• Icon
• Name
• Colors
• Formats for various platforms

Misc

• Existing websites
• New websites and pages
• Internal tools
• Third party site integrations (zendesk)
• Logged in app

UI Patterns

Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem. - A Pattern Language

Text

Headings

Links

Inputs

Forms

Tables

Buttons

Pagination & Infinite Scroll

Actions

• Creating
• Reading
• Updating
• Deleting

Navigation

• App
• Page
• Intra
• Inter

States

• Error states
• Success states
• Empty states
• Loading states

Misc.

• Content organization

Design Assets & Resources

These are things people can download and use to play with and implement various aspects of the style guide.

Code

• Prototyping templates and resources
  • React
  • Vue
  • Angular
  • Static HTML
• CSS toolkit
  • Sass
  • Stylus
  • Less
  • Postcss
  • Vanilla

File Downloads

• Design Templates (XD, Photoshop, Illustrator, Sketch)
• Icons
• Typefaces (Actual font files, useful for print design and using apps like photoshop)

Code

API

• General guidelines and usage
• Errors
• Naming patterns
• Changelog

Coding style guides

You might find it appropriate

• General rules and guidelines
• Html
• Js
• Css
• TBD

Git

• Commit comment formats
• Commit comment grammar
• Commit templates

Style Audit

To understand where we need to go and how we are going to get there, we need to understand what the current reality is

1. Audit the existing styles for each separate front-end codebase

• Find intersections of common styles
• Visualize and compare how values relate to eachother

2. Collect prior print collateral: letterhead, marketing etc.
3. Collect email screenshots
4. Visualize flows for common patterns

• Log in
• Sign up
• Delete account
• Lost password reset
• Change email
• Change credit card
• Change address

Pages

Common pages. Some of these might be more appropriate as sections on a page depending on your particular content.

• Home
• About
• Contact
• Help
• Privacy
• Terms

Error pages

• 404
• 500
• 503

Consuming the Style Guide

• Who is the audience?
• What are their biggest needs?
• What needs do they not have that we are assuming they have?
• Onboarding a new designer. What is their process? How can we structure the styleguide in a way that reduces friction and unknowns for a new teammate or person that is collaborating with us?
• Video tutorials
• Written guides and visual examples
• Resources?

Further Reading

While style guides on the web are a relatively new phenomenon, they have been used by designers and writers for a long time.

• Grid Systems
• A Pattern Language
• Strunk and White: The Elements of Style
• Elements of Typographic Style
• ISO 690
• AMA Manual of Style
• ALA Standards Manual
• MLA Handbook
• Chicago Manual of Style
• The New York Times Manual