Design Systems Pattern Language

The whole concept of a styleguide is to provide clarity, but yet there is still none when we talk about the different types available. ‘Styleguide’ has become a catch-all term to describe a system to document something.

The word ‘style’ is subjective and is the reason why there is miscommunication when we talk about styleguides. Does it mean something to do with UI styles, writing styles, coding styles? It can mean all of these, or none.

A styleguide’s purpose and value is derived directly from the needs of it’s consumers, contributors and stakeholders and these needs are often unique, and to understand what a styleguide is it’s important that we first have a shared vocabulary so that we’re all on the same page.

Having recently seen Claudina Sarahe’s talk on ‘Pattern Languages’ at Clarity Conf, it has inspired me to start a styleguide pattern language to help achieve a little more clarity into what all the styleguide buzzwords mean.

A pattern language is a method of describing good design practices with a field of expertise

Christopher Alexander

--

Note: Due to the multple nomenclatures of ‘styleguide’, ‘style guide’, ‘style-guide’, it will be refered to as styleguide in the pattern language to avoid spelling confusion.

--

FAQs

• What the preferred nomenclature of styleguide? Is it ‘styleguide’, ‘style guide’ or ‘style-guide’?
• What is a ‘design system’?
• What is a ‘living’ styleguide?
• What is a ‘structure’ styleguide?
• What is ‘Styleguide Driven Development’?
• What is the difference between a ‘UI Library’ and a ‘Pattern Library’?
• What is the difference between ‘Branding Guidelines’ and ‘Design Language’?
• What is the difference between a ‘styleguide’, ‘guideline’ and ‘documentation’?
• What is a ‘style tile’?
• What is the difference between a ‘component’, ‘dumb component’ and ‘smart component’?
• What is ‘voice and tone’?
• What is a ‘coding styleguide’?

Pattern Index

A

• Styleguide Generator

B

• Branding Guidelines

C

• Code Styleguide
• Component
• Component, Dumb (see Dumb Component)
• Component, Smart (see Smart Component)
• Component Library
• CSS Styleguide

D

• Design Language
• Design System
• Design Tokens
• Documentation
• Dumb Component

E

• Editorial Styleguide

F

G

• Guideline

H

I

• Interface Styleguide

J

K

L

• Living Styleguide
• Living Design System

M

N

O

P

• Pattern Library
• Pattern Portfolio

Q

R

S

• SDD (see Styleguide Driven Development)
• Smart Component
• Structure Styleguide
• Styleguide
• Style guide (see styleguide)
• Style-guide (see styleguide)
• Styleguide Driven Development
• Style tile

T

• Type Styleguide

U

• UI Library

V

• Visual Styleguide
• Voice and Tone

W

X

Y

Z

Glossary Index

Can't find what you're after?

Try checking the glossary for common terms & phrases used when talking about Design Systems and Styleguides