Laying the Found— ations

A book about design systems

— by Andrew Couldwell

Scroll

About the book

Laying the Foundations is a comprehensive guide to creating, documenting, and maintaining design systems, and how to design websites and products systematically. It's an ideal book for web designers and product designers (of all levels) and especially design teams.

This is real talk about creating design systems and digital brand guidelines. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips.

System design is not a scary thing — this book aims to dispel that myth. It covers what design systems are, why they are important, and how to get stakeholder buy-in to create one. It introduces you to a simple model, and two very different approaches to creating a design system. What's unique about this book is its focus on the importance of brand in design systems, web design, product design, and when creating documentation. It's a comprehensive guide that’s simple to follow and easy on the eye.

Swipe left-to-right on the image below to preview the book.

Reviews

“You could read 100 hot takes on Medium OR read this one book filled with practical advice from an industry vet. There's so much valuable stuff in this book.”

Nick Stamas, Principal Product Designer

“This book is outstanding. I'm about halfway through and it's already heavily influenced our team's design system work.”

Ryan Nordyke, Product Designer

“If you want to learn or improve your skills around design systems, I highly recommend buying this book. I have worked with Andrew. The dude is absolutely brilliant and this book is pure gold.

C.M. Kennedy, Designer

“It's thorough and smart, and written in an accessible tone of voice that is both encouraging and lucid.”

Molly Young, New York magazine

“Mind. Blown. Going to go retire in the woods now... Seriously, it's a good read. He recommends a very similar process to what we [Lyft] follow.”

Linzi Berry, Lyft

“I wish we had this book when setting up our design system! It has already proved essential in ongoing iteration and evolution of our design system. Worth every penny!”

Matt O, Designer, UK

“This book cuts through the noise and hype around designs systems. Andrew really digs in to every part of creating and using a design system in the real world.”

Nick Stamas, Candid

“Probably the most comprehensive guide on design systems yet. A detailed look at how large organisations use their design systems and how to go about setting up your own.”

Paul Davies, Behavioural Psychologist

“It was a great read. I am constantly getting back to it while working on my current project. It's more than a book. It's a manual.”

Milos Mirkovic, Product Designer

“It's awesome! Incredibly thorough, down to earth and doesn't shy away from the nitty gritty.”

Linn Vizard, Designer

“The extremely talented Andrew Couldwell has written the book on design systems. Just buy it.”

Will Cookson, Creative Director

Chapters

—Foreword by Meagan Fisher Couldwell

10Introduction

Who is this book for? • The role of development in design • System design is not a scary thing • Systematic design • This book will help you and your team

> Read the intro for free

20What is a Design System?

    “
  1. Design systems bring order and consistency to digital products.
  2. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products.
  3. They are a source of truth and a system of record for our design decisions.
  4. They hold us to high standards, keep teams on the same page, and help to onboard new team members.
  5. They document the why, when, where, and how.
    6. ”

Why are design systems important? • When do we need design systems?

> Read this chapter for free

26Selling a Design System

Find your partners • Start small, and adjust your pitch accordingly • At what stage do you sell? • The importance and quality of ‘the sell’ • A word on office politics

> Read this chapter for free

38Laying the Foundations

Putting up scaffolding • The importance of brand in system design • Marketing vs. product • Digital Foundations • Mission, values, and principles • Brand identity • Brand tone of voice and copywriting • Formatting • Accessibility and inclusivity • Responsive design • Design process • How are brand guidelines different to design system documentation? • Make it visible, make it count • Flaunt it • Don’t lose sight of why you’re doing this...

80Design System Model

Speaking the same language • The Foundations Model • Design system components • Design system patterns • Templates and Pages • Design systems in product design • A case study of a design system at work • Allow for flexibility

106Getting Started

Start by identifying the problems • Where do we go from here? • Be smart about which approach you choose

114An Iterative Approach

Find your team • Interface audits • Colour audits • Code audits • What now? • Managing the workload • The Frankenstein monster effect • Refinement vs. exploration

128A Wholesale Approach

Design exploration • Ground your work in reality • Building a visual language • Build and launch plans • It doesn’t have to be perfect • Wholesale design, and an iterative build and launch • The disruption factor • Rolling out a design system, responsibly

140Systematising the Design

Set a design system up for success • You need a design system library • Constraints are not a bad thing • Tools for the job • Naming conventions • Colour system • Guidelines for colour • Limited text styles • Editable components • Cover all states of components • Pattern library • Design tokens and Sass variables • Designer access to code • Tracking and organising system tasks

180Document Everything!

More than a style guide • The basics • Better together • Don’t leave documentation until last • Document as you go • What should you document? • Do’s and don’ts • Colour • Brand identity • Typography • Copywriting • Design system components • Design system patterns • Don’t forget the small things • Grid, layout, and spacing • Design tokens • How do you document a design system? • Getting started, the easy way • Living style guides

220Gallery

Inspirational examples of great documentation

242Maintaining a Design System

Work with shared design assets • Working with patterns • Keep documentation up to date • Keeping the design and code in sync • Code as a design tool • Keep your team in the loop • Guardians, ambassadors, and leaders • Closing thoughts

The author

Andrew Couldwell is a designer who codes, with over 19 years of experience. In recent years he’s led the design and creative direction of digital brands, products, and design systems at Adobe and WeWork, and has worked on projects for the likes of Red Bull and NASA. He’s now a freelance web designer and developer based in Los Angeles. He’s also the founder and curator of Club of the Waves. Andrew is a British expat, now living in California with his wife and two kids. He loves what he does, and is excited to share what he’s learned with you in this book.

Buy the book