Alexis Abakasanga

Day 19: Design Systems, Pattern Libraries, and Style Guides

Coherence, efficiency, and productivity.

Alexis Abakasanga's photo
Alexis Abakasanga
·

2 min read

Table of contents

Visual design, here we go! Today I learned about these three terms that share the common goal of making design efficient and productive.

What is a system?

This is a set of connected things or parts forming a complex whole.

Design system?

A comprehensive set of values, semantics, syntax, and context that are the foundation of a shared design language.

Pattern library?

This is an organized set of related, reusable components, often containing code examples, design guidelines, and use cases.

Style guide?

A physical or digital document that represents the styles, patterns, practices, and principles of a company and teaches us how to use it

We have four parts: colors, typography, shadows, and grids. We will briefly go into style guides, cover colors, and typography.

Establishing a Consistent Style Guide

  1. Color Palette

    • Start with base, complementary, and accent colors.

    • Generate shades and tints.

    • Generate error, warning, and success states.

    • Create neutral colors from an existing color palette.

  2. Typography

    • Generate a type scale.

    • Establish line heights for paragraphs and headings.

    • Establish line heights for labels and buttons.

    • Use font weights with caution.

    • Use a good font pairing.

Importance of Style Guides

  1. Consistency.

  2. Newcomers are onboarded quickly.

  3. Enhances productivity.

  4. Improves communication between designers and developers.

Resources

Key Learnings

I neglected to learn this and have struggled thus far in my design career. I will revisit these resources until I am comfortable creating style guides. For designing systems, I will learn about that later, but for now, early in my career, it is not required. I enjoyed this resource and can't wait to use this newfound knowledge to speed up my workflow.

References

60daysUXchallengeux designstyleguidefigma