Useful Sections for a Design System Reference Site

More people will use your design system if it’s easy to browse.

Published on

Around 4 minutes to read

There’s a high probability, that your first encounter with any particular design system happens through its public reference site. For example, if you wanted to learn more about Google’s Material Design system, you’d be browsing the content at https://material.io/. Or if you wanted to learn more about Shopify’s Polaris Design System, you’d be browsing the content at https://polaris.shopify.com/.

Also called a “documentation site” or “styleguide site,” we define a reference site to be “a visible manifestation of a design system, typically a URL that displays both the full component library and a set of guidelines.” The first homework assignment in our Design Systems 101 class is to build a few pages with an existing design system, and part of the point of the assignment is to emphasize how important a reference site for design system users. It’s a non-starter for your design system if you can’t even figure out how to download or import the dang thing.

Across our work with many teams creating design systems, we’ve collected a few best practices and recommendations for what sections and content users expect to find in a reference site, and where. While your terminology, syntax, and order may vary, these types of sections represent many of the things design system users need and want from a reference site. If you’re creating a reference site, consider this a starting point for your site’s information architecture.

Read Next

Making Design Systems Public

Join 5,300+ subscribers to the weekly Dan Mall Teaches newsletter. I promise to keep my communication light and valuable!