Elements of a Style Guide

How We Build Front-End Code from Design Specifications

Designers create a style guide to provide direction for each of these patterns on a granular level: the font size, line height, letter spacing, color, weight, hover effects (for interactive elements), the spacing between block typography elements, and the way each style responds in different browser sizes.

Documenting these details to hand off to front-end developers can be overwhelming on the scale of a large website. What unit types are “best practices”? How are responsive changes or themes conveyed? How are different states (hover, focus, disabled, etc.) handled?