Design Systems, Styleguides – What are they and what is their purpose?

What is a design system?

A design system is a collection of building blocks and a set of shared practices, design standards, documentation, and principles to effectively achieve and execute standards consistently across the board.

The building blocks of a design system include things like a logo, buttons, color palettes, layout, links, typography and typographic scales ( fonts, font sizes ), sizing, spacing, etc…

Your design system is the shared language that defines who you are, how you are perceived in order to create more compelling experiences across more screens, more devices, and more people. The focus is on unity, cohesiveness, and connectedness.

What is a styleguide?

A styleguide is part of a design system and contains documentation covering a set of shared practices / guidelines on how to correctly implement a design system’s components correctly and consistently.

Simply a styleguide visually defines the way a brand will look and feel and helps keep design elements consistent and uniform across all marketing touch points ( ie website, business cards, stationary, etc. ).


A styleguide is the visual DNA of your branding and is part of a wider design system integral to content strategy and how your company / brand should be presented across various visual media including print, web, and interactive.