What is a Design System

If you're a Front-end Developer, UX Designer or Product Owner, you may have heard the term 'Design System' and wondered what it meant. In this article we'll discuss what Design Systems are, why there is a need for them, and how you can get started leveraging a systems thinking approach to deliver better quality digital products (hopefully, faster).

How did we get here?

Over the past decade, the tools and techniques that designers would use to create design deliverables has changed a lot. Photoshop used to be the go-to software. A designer might iterate on a home page design for desktop, and 1 internal page. They may design a nice logo, colors and typography treatment, and had it over to a developer, whose job it was to faithfully recreate the design in code.

Photoshop was never created as a tool for designing websites though; it was initially designed for.. photo editing. Designers could create some amazing effects in photoshop: drop shadows, box shadows, linear and radial gradients, masked shapes, and and use layer blend modes that came together to create a rich look and feel for a website.

Unfortunately, the web wasn't quite ready for some of these more complex user interfaces. CSS, the language of the web that allows you to bring style, color and design to a site, was playing a constant game of catchup. The features of CSS are described in an ever evolving document known as the Spec (or CSS Specification). The World Wide Web Consortium (W3C) has the job of creating and managing the current CSS Specification, which details the features of CSS that web browsers should implement.