index.html

---
layout: page
title: Style Guide Guide
description: A boilerplate for creating superb style guides
---

The homepage of a style guide should provide high-level information around what the design system is, what benefits it provides, who it's for, and how to get started with it. Like any good index page, it should provide clear navigation to key parts of the website.

<div class="u-margin-bottom-double"><a href="{{ "/getting-started.html" | prepend: site.baseurl }}" class="c-btn">Get Started</a></div>

## Design System Benefits
Explain how the design system benefits users and the business. For inspiration, check out over 180 examples of design systems at [Styleguides.io](http://styleguides.io/examples).

## App Gallery
It can be a good idea to include a <a href="{{ "/gallery.html" | prepend: site.baseurl }}">list of applications</a> that use the design system. This helps provide credibility to the system, incentivizes teams to use the system, and shows components in the wild.

## Contributing info
If it's desirable to have people from across the organization contribute to the design system, linking to the <a href="{{ "/contributing.html" | prepend: site.baseurl }}">contributing page</a> from the homepage could be a good idea.