What is a Design System?

A Design System is a framework of practices and processes for people who build products. It is a platform to identify, decide on, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy. It is comprised of three interrelated systems you’ll need to solve for to be successful:

1. A kit of reusable, interconnected parts: A design system offers a library of visual style and components documented and released as reusable code for developers and/or tool(s) for designers. It may also offer guidance on accessibility, page layout, and editorial and less often branding, data viz, UX patterns, and other tools.

2. A set of cohesive, interconnected products: A design system is adopted by and supported for other teams making experiences. These teams use it to develop and ship features more efficiently to form a more cohesive customer journey.

3. A community of collaborative, interconnected people: A design system is made by an individual, team, and/or community. While some arise less formally, organizations now dedicate small to large squad(s) to develop and release system versions and processes over time.

From “Houzz Design System Report” 2018 by Jackie Ngo

Houzz Design System Goals

What would the Houzz product look like if it was designed by one designer with unlimited time and resources? This type of coordination would help us achieve:

1. Speed and efficiency designing and implementing features

2. 1:1 alignment between design component library and engineering component library

3. Houzz brand and product alignment between Houzz and Houzz Pro (Each product being part of the same family)

What’s next?

In our initial release we’ve defined and developed a series of atom level components and foundations to use in Houzz. We plan to continue building out our infrastructure of components and look for ways to build out our component library with molecules, organisms, page templates etc.