Maintain consistent patterns
A design system isn’t just made up of a big set of assets and components you use to build a UI. All the individual pieces might be consistent, but that doesn’t guarantee that the composition of those pieces will be.
Consistent patterns should be maintained in a well designed app. They are harder to nail down and define in a smaller, consumable, example because patterns span more than a single component. Sometimes, patterns show up with how resuable components are combined, other times it is in the behavior of animations or usability.
Attempting to visualize patterns
An inconsistent pattern would be using a modal for user management on one table, and a form that renders inline on another.
Consider this example with a number of dummy components composed together, where border radii start creating inconsistent distances between elements.
- Inconsistent distance between the borders of the children and the border of the parent (see corners).
- Corners fit neatly inside each other which groups items more naturally.
Or to see it side by side
In this example, the elements inside the card are purposefully left undetailed, because the consistent pattern to follow here would be border radius size. An easier rule to codify could be:
- Parent elements:
border-radius: 1 x <token for border radii> - Child elements:
border-radius: 1/2 x <token for border radii>
Consider other elements working in tandem, like in a table:
There are users rendered in rows, with an avatar at the start. These avatars have a good amount of color that competes with the button on the right used to verify an action with these users.
If we think back to module 1 on visual importance, we may want the button to hold the highest visual importance, thus de-emphasizing the avatars by reducing their color.
- User uploaded content can be more visually eye-grabbing than buttons you want users to see.
- Grayscaled images de-emphasizes avatars which are less important.
This kind of pattern that describes how your UI components like avatars work with buttons or table cells are what comprise this piece of your design system.
These patterns are a bit subjective, you get to decide what goes and what does not. You will sometimes see these patterns included alongside individual UI components in a Design System's documentation. Shopify Polaris has a page of do's and don'ts, and then includes more individual do's and don'ts with other components:
