Alerts
Buttons
Content Types
Form Elements
Hero
Navigation
Revenue
Checklist of 8 Main Requirements
Style guides are distinct from design pattern libraries, which are a long-standing tool used by UX practitioners to define broad design ideas, rather than specific implementation details.
When creating a style guide, make sure to include the following 8 key features:
- Table of contents that splits components into easily-findable categories
- Responsive layout or grid systems used to place common UI elements
- Color palette of the product (in appropriate format, e.g. HEX for the Web, UIColor for an iOS app)
- Typeface styles (e.g. H1 Title, Body text, Photo caption text), which should include typeface name and foundry, sizes, weights, leading/line height, tracking/kerning, and the appropriate contexts of use for that text style
Then, for each of the specific UI components and elements in your product include the following information:
- Description of the appropriate context of use: When does it make sense to use one particular component versus a similar one?
- Code snippets, often hidden in an accordion feature
- Specs for implementation, including positioning and spacing information
- Do's and don’ts for that element.
Include Responsive Design Patterns
In responsive designs, the front-end style guide should not only define the interface components, but also describe how their styling and usage will differ across different screen sizes. Here are some pieces of information that are useful:
- Layout grids indicating how various components should be used in various screen-size contexts
- Spacing around common elements when used on different screen sizes
- Guidelines for where in the interface specific components should be placed
(These guidelines can help enforce consistency: for example, in a mobile app, the title bar and navigational elements will typically be present in most screens at the top, so defining that in the style guide can help to avoid one-off screen designs.)