Design System rules

Question

I would like to get your input and experiences with styleguides. Some of the designers I work with insist that the design system should have rules to be followed to the T.

Some sample rules are:

A cards border is always 16px from the left.

Content is always separated by vertical padding of 24px.

Dashboard buttons are always to the top right with 16px vertical padding from the content.

Our company has multiple in house applications in development. While I understand the need to have consistency (typography, buttons, color palette, iconography etc..) I disagree with having rules like these where a change of pixels becomes a rigidity to other designers.

I would like to know how your team is using your design system / styleguide, and if it is riddled with spacing rules that all designers must follow.

Answer 1

I think the days of strict spacing rules in style guides worked well when the screen sizes and resolutions on devices were not as diverse as it is today. But with responsive web design the main motivations of setting up design systems, it is more advantageous to have design system rules based on proportions and ratios rather than absolute values, because you can't scale or adapt to different displays and devices very well that way.

But it is also worth taking into consideration whether you are looking at spacing as an isolated instance of design system/style guide rules or if there are other aspects that are also set in stone. I think you'll find that strict spacing rules will have an impact on other parts of the design system as well, so I would expect that if you set very specific rules for spacing then you will also need specific rules for UI component dimensions so that the spacing rules will work well.

When you say that your "company has multiple in house applications in development", I assume that these are internal facing applications that are probably deployed within a standard operating environment (e.g. company desktop machines and laptops that are similar enough), so it could make sense to use more strict rules when there are less variables to consider and deal with.

As usual, it is also important to consider a design system/style guide as a product or service, so it is good practice to ensure that the product or service is fit for purpose for the users (i.e. the designers and developers).

Answer 2

When it comes to design systems and styleguides, it is important to strike a balance between consistency and flexibility. On one hand, consistency is important in order to maintain a consistent look and feel across different products and platforms. On the other hand, flexibility is important in order to allow designers to be creative and to adapt to different contexts and use cases.

In terms of specific rules such as the ones you mentioned, it is important to consider the reasoning behind them. Are they in place to ensure consistency and maintain a cohesive look and feel, or are they overly restrictive and limiting for designers?

One approach to consider is to have guidelines rather than strict rules. These guidelines can provide general direction for designers, but also allow room for interpretation and creativity. For example, instead of saying "a card's border is always 16px from the left," you could say "a card's border should be visually balanced and separated from the content."

Another approach is to have a set of core principles that guide the design system, and use them as a basis for decision making. These principles can be used to evaluate any new rules or changes to the design system, and ensure that they align with the overall vision and goals of the design system.

It's also important to consider the different use cases that the design system is applied to, and ensure that the rules and guidelines are flexible enough to adapt to different contexts and applications.

Finally, it's important to have an open communication with the designers and to gather their feedback on the design system. This can help identify any issues or concerns that they may have, and find ways to address them.

In summary, it's important to strike a balance between consistency and flexibility when it comes to design systems and styleguides. Having guidelines rather than strict rules, having core principles, considering different use cases and having open communication with designers can help to ensure that the design system is effective and efficient while still being flexible enough to adapt to different contexts and allow designers to be creative.

Answer 3

Our design system has some rules for spacing but it is flexible. e.g. a button can have a variant with different padding.

But the pixel-based grid is rigid, we use a pixel grid based on 8px so we will never use 3 or 7 pixels for spacing.

We only use multiples of 8 and some exceptions like 4px.