No more workarounds — you can now use our native Guidelines block to create structured and consistent component rules, content guidelines, or simply any do's and don'ts you need to document.
For any type of rule
A guidelines block can contain multiple items, and each of these items can choose from one of the three types we offer:
- Do: Show best practices
- Don't: Illustrate approaches to avoid
- Caution: Flag areas requiring attention
Flexible styles and use cases
You can choose from four style variants to match the look and feel of your documentation. Whether you prefer a minimalist approach or something more visually striking, there is a style to suit your needs.
Notice that your guidelines can also contain rich text formatting, including lists or even links. See examples below.
Example: Component guidelines
One of the main use cases for our new guidelines block is documenting Do’s and Don’ts for your design system's components and patterns.
With our new guidelines block, you can choose from different visual styles based on your preferences and needs.
Variant: Simple
A two column layout using the Simple style variant, with rich text for advanced tips or recommendations as content.
When using more avatars, always use their full shape with a small gap in between.
💡 Tip: Use gap-avatar-group for consistent spacing between avatars.
Don't overlap avatars to save horizontal space.
Variant: Contained
This style is ideal for blending the badge more naturally with the image and the surrounding page.
When using more avatars, always use their full shape with a small gap in between.
💡 Tip: Use gap-avatar-group for consistent spacing between avatars.
Don't overlap avatars to save horizontal space.
Variant: Prominent
The same content again, but with more prominent style. This might be the default option if you want your guidelines to stand out on each page.
When using more avatars, always use their full shape with a small gap in between.
💡 Tip: Use gap-avatar-group for consistent spacing between avatars.
Don't overlap avatars to save horizontal space.
Variant: Side border
Side border can help especially if there are wide images or longer text guidelines, but can work for any type of information. You can see one-column example below.
And with our recently released option to render your Figma layers as SVGs, your images will be crisp even when upscaled.
When using more avatars, always use their full shape with a small gap in between.
💡 Tip: Use gap-avatar-group for consistent spacing between avatars.
Don't overlap avatars to save horizontal space.
Example: Accessibility guidance
In some cases, you may want to focus only on positive framing. You can have all the items as Do's or any other combination that best suits your content needs.
Open by clicking the trigger button with a mouse
Open by focusing the trigger button and hitting return, space, or any arrow key
Source: Primer Design System
Example: Content guidelines
The Guidelines block has many use cases; documenting your writing guidelines is definitely one of them. Use more columns or leverage our caution type to bring attention to some specific information.
This example uses the Contained variant of the guidelines block.
- Send message
- Add to cart
- Create account
- Learn more
- Get started
- Ok
- Click here
- Submit
- More info
- Enter
Using "Cancel" in confirmation dialogs can be ambiguous.
Consider using more specific language like "Keep item" or "Go back" instead to avoid confusion.
Documenting your guidelines has never been easier with Supernova and we are excited to see how you’ll utilize this new feature in your design system documentation!
For a list of smaller improvements and bug fixes, visit our Bug fixes page here:
As always, if you have any questions or feedback, you can reach out to the team at any time.
This version was released on September 18, 2024.