You can read about different ways to contribute to the Primer Design System in primer.style/contribute.
If you are designing new components, please read the design contribution guidelines.
If you are writing documentation, please read the documentation guidelines.
Even though some guidelines follow a different format, most can use the following template as a starting point. Required sections are indicated.
💡 The action list component documentation is a good example of design guidelines.
| Section | Description | Notes |
|---|---|---|
| Name / Title (required) | Name of the component | Use the singular form. Keep it as short as possible. Use sentence case ("Select menu", and not "SelectMenu"). |
| Description (required) | In a sentence, what is this component used for. | It should allow the reader to decide if they should continue reading or move on. Avoid going into specific usage and implementation detail. Don’t include guidelines. Don’t repeat words from the title to describe the content. |
| Anatomy (required) | A labelled image of the most representative view(s) of the component, followed by a glossary of the constituent parts. | What smaller components constitute the larger pattern. |
| Usage (required) | List of dos and donts covering the most important ways of how to (and not) use the component. This section can also be referred to as Options. | Consider when and how this component could be used incorrectly, what are the ideal ways of using it, special cases, alternative components (include links if needed). |
| Hierarchy and placement | Where to use the component and how it interacts with the rest of the UI. | Include images and dos and donts of how the component should be used within the UI. |
| Accessibility | Accessibility considerations when using the component. | Include keyboard navigation, descriptions, common mistakes to avoid. |