Style guide
Definition
A style guide is a reference document that defines the visual and editorial standards for a brand or product, covering typography, color, logo usage, imagery rules, and often writing tone, so that anyone creating content or design can work consistently without asking for approval on every decision.
Style guides exist to create consistency at scale. When one designer makes a product, consistency comes from that designer's taste. When ten designers make a product, consistency requires documentation.
A product style guide typically covers:
Typography, the typefaces in use, the scale (heading sizes, body size, small text), and the rules for when each level is used.
Color, the full palette with hex codes, the semantic meaning of each color (primary action, destructive action, success, warning), and accessibility requirements (contrast ratios).
Iconography, the icon style (filled vs. outlined, stroke weight, corner radius), the library in use, and rules about when icons appear with vs. without labels.
Spacing and layout, the grid, the spacing scale, the safe margins.
Imagery, photography style, illustration style, rules about what's in and out.
Writing tone, voice (active, direct, concrete), vocabulary preferences, and vocabulary prohibitions.
A style guide differs from brand guidelines in scope. Brand guidelines cover identity, logo, colors, fonts, and how they're used in the world. A style guide goes deeper on product-specific patterns: component usage rules, content patterns, motion principles.
Style guides are often produced after a product reaches a certain scale and inconsistency becomes a visible problem. The creation process involves a design audit, often run at a whiteboard, that inventories what's currently inconsistent and establishes the correct standard. BoardSnap captures those audit sessions as structured summaries.
Examples
- A product style guide with a color token table, a typography scale, and icon usage rules
- An editorial style guide for marketing copy: active voice, no jargon list, preferred product terminology
- A design audit whiteboard session where the team inventories inconsistent button styles before establishing the standard
Snap a style guide. Ship its actions.
BoardSnap turns any whiteboard, including this one, into a summary and action plan.