Here’s Why Style Guides are Not Basic Design Systems
There’s a difference between a book and volume. There’s also a difference between a story and a narrative. And yes, a sentence is quite different from a paragraph. In all three examples, the whole is greater than the sum of its parts, but the parts can stand on their own as a complete whole. “It was the best of times, it was the worst of times” is a pretty powerful sentence. But the entire Tale of Two Cities story multiplies the effect. Thus, with their powers combined (Enter: Captain Planet opening sequence), the parts that are also the wholes, create this super-whole that knocks your socks off. However, once these parts are treated merely as parts — like puzzle pieces — the entire paradigm falls apart, and the whole is no longer a system. It’s reduced to a by-the-numbers painting. The same goes for the difference between a style guide and a design system.
A style guide is not a puzzle piece that fits into a design system. And in my pursuit of becoming the greatest design systems thinker in the world, if I’ve ever publicly subscribed to that erroneous notion, forgive me! A style guide is its own whole. You can have your style guide cake and eat it too. However, a design system cannot work effectively — if at all — without a style guide.
What’s a Style Guide?
A style guide describes and prescribes how a company looks, sounds, tastes, feels, and smells. I guarantee that your favorite well-branded hotel or department store has a patented smell. Style guides go beyond just a logo and typography. It digs deep into the company’s mission, vision, values, personality (also known as a brand archetype), and tone of voice. These are pieces to the brand’s puzzle. A brand archetype without a company mission is just a temperamental legal entity meandering in its half-chosen vertical.
Style guides help branding, marketing, and content creators to understand and use the appropriate visual elements for print, digital, audio deliverables, features or platforms, like a website, brochure, podcast, or mobile application. Style guides help produce content. Style guides provide brand consistency. Style guides save time. If you need one, here’s a typical list of what a style guide contains (most will have the “typical six” elements, but here are a few more pieces):
- Mission
- Vision
- Target Audience
- Brand Personality
- Core Values
- Brand Story
- Logo
- Color Palette
- Typography
- Imagery
- Voice/Tone
What’s NOT a Style Guide?
A style guide is not a simplified design system. I repeat: A style guide is not a basic version of a design system. A style guide cannot help developers directly implement any of the brand’s elements because it is not intended to support coding. It supports the content. And design systems that do not have style guides included cannot help content creators make content. Design systems are an extension of a style guide. The proper design system will consist of the design tokens where developers can pull UI elements from the system and readily use for coding.
Which Comes First: Style Guide or Design System?
Short answer: The style guide. It’s the single source for your physical and digital products, pages, and print material. Style guides don’t include UX interactions (at least not efficiently). Design systems do that. A style guide helps to articulate the brand’s promise. A design system differentiates that promise by including the brand’s prescriptive manifesto (i.e., the style guide) and documentation and design tokens for how every single promise is to be made a tangible reality with coding or engineering.
Here’s a half-baked anatomical analogy that just might work: If a style guide is like the skeletal, muscular, integumentary (skin), cardiovascular and reproductive systems of the company, then a design system is the circulatory, nervous and digestive systems. Hm, on second thought, let’s just stick to my explanations above.
