Why It Matters
A style guide documents the "what" and "why" of design decisions. It's the reference manual for your visual language—how to use colors, which typeface for headings vs body, standard spacing values. Style guides existed before design systems and remain a crucial component, especially for branding consistency.
Examples
1
A brand style guide defining primary/secondary colors, logo usage rules, and typography hierarchy.
2
A component style guide showing correct and incorrect usage of buttons, with spacing and alignment rules.
3
Accessibility guidelines within a style guide specifying color contrast ratios and focus state requirements.
Related Terms
Design System
A comprehensive collection of reusable components, patterns, guidelines, and design tokens that work together to ensure consistency and efficiency across product development.
Design Tokens
Named, platform-agnostic values that store design decisions like colors, spacing, typography, and shadows, enabling consistent styling across design tools and code.
Naming Conventions
Standardized rules for naming design elements like layers, components, variants, and tokens to ensure consistency and improve team collaboration.
Design Governance
The policies, processes, and controls that ensure design system standards are maintained, contributions are reviewed, and quality is preserved at scale.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.