Scaling CSS

in Design Systems

@glrodasz

What is a Design System?

@glrodasz

A long time ago...

@glrodasz

Multi-device universe

Image from Atomic Design by Brad Frost

"The generally-accepted definition of a design system is that it’s the outer circle—it encompasses pattern libraries, style guides, and any other artefacts. But there’s something more. Just because you have a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rulebook. It’s what tells you how those patterns work together."

@glrodasz

Jeremy Keith

http://bradfrost.com/blog/link/design-systems/

https://adactio.com/journal/13844

https://varya.me/blog/design-systems-review/

@glrodasz

Types of

Style Guides

@glrodasz

Brand Identity

@glrodasz

Brand identity guidelines define the assets and materials that make a company unique.

@glrodasz

Image from Atomic Design by Brad Frost

Design language

@glrodasz

While brand identity guidelines are fairly tactile, design language guidelines are a bit harder to pin down.

@glrodasz

Image from Atomic Design by Brad Frost

Voice and Tone

@glrodasz

People interact with brands across a huge array of channels and media. In addition to the digital media we’ve discussed so far, brands also operate in print, retail, outdoor, radio, TV, and other channels.

@glrodasz

Image from Atomic Design by Brad Frost

Writing

@glrodasz

The rise of the web and content managed websites makes it easier than ever for many people within an organization to publish content.

@glrodasz

Image from Atomic Design by Brad Frost

Code style guides

@glrodasz

It’s essential for teams to write legible, scalable, maintainable code. But without a way to promote and enforce code consistency, it’s easy for things to fall apart and leave every developer to fend for themselves.