Useful Sections for a Design System Reference Site

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

May 8 2020 at 6:51 AM

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 this next

SuperFriendly + COVID-19

What SuperFriends are doing about this global pandemic.