UX Glossary | S
Style guide
Documentation of how a brand or product should look and sound, without the working components.
A style guide documents visual and verbal rules: colour values, typography, logo usage, spacing, imagery, tone of voice. It predates digital product work by decades, coming from print and brand practice.
Style guide or design system
The distinction is between description and infrastructure.
A style guide describes. It says the primary colour is this and headings use that typeface, and a person reads it and applies it.
A design system provides. It contains working components in code, tokens the product actually consumes, and rules about when to use what. Nobody has to retype a value, so nothing drifts.
A style guide is a document. A design system is a dependency.
Why style guides drift
Because compliance is manual and voluntary. Every application of a rule is an opportunity to apply it slightly differently, and there is no mechanism that notices. This is exactly how design debt accumulates, and it is why teams that only have a style guide usually have five button variants.
Where they still make sense
Brand-level guidance that is not implementable as code: photography direction, illustration style, tone of voice, logo clear space. These need judgement and cannot be reduced to a token.
In practice
Most products need both: a style guide for the judgement calls, a design system for everything a machine can enforce.