Design systems are an integral part of building out a website or application. They provide developers with a structured way to create components across digital channels faster and more efficiently.

The Zesty.io team embarked on a website update recently, which required an overhaul of all of our page content and design. To aid our development process, we chose to implement a new design system, which helped us get our new website live in just 3 weeks.

We wanted a design system that created visual consistency, lowered the barrier to entry for contribution, and provided rapid prototyping.

This article will highlight the most important areas to consider when choosing a design system.

1. Customization System

A customization system, or styling system, is a set of tools that provide a fast and simple way of applying the correct design tokens for specific CSS properties directly to a React component. These require the use of CSS-in-JS to generate the desired CSS changes.

Some of the features provided are:

• Theme value selection

• Breakpoint targeting

• CSS shorthands

• Spacing system usage

• Object style syntax for CSS

This system provides a superset of CSS (contains all CSS properties/selectors in addition to custom ones) that maps values directly from the theme, depending on the CSS property used.

It also provides a simple way of defining responsive values that correspond to the breakpoints defined in the theme.

All CSS-in-JS libraries generate unique CSS class names, a technique pioneered by CSS modules. All styles are scoped to their respective component, providing encapsulation without affecting any styling defined outside the component.

With this feature built-in, you don't have to worry about CSS class name collisions, specificity wars, or wasted time spent coming up with unique class names across the entire codebase.

This feature is invaluable for component-based development.

Another consideration: do you need to migrate existing CSS code? Using a library that supports Tagged Templates would make the migration easier and faster.

2. Theming

Theming allows an API to systematically modify the entire design system as a whole. This is useful for the following reasons:

• Allows for global modification of all design system (DS) components.

• Allows for multi-theme variations of our DS depending on user preference or application use

• Provides a source of truth for all variables used within the DS

3. Layout

Layouts, spatial systems, and grids provide rules that give designs a consistent rhythm, streamline decision-making, and help teams stay aligned.

This helps you abstract any and all layout utilities such as grid and flexbox to create concise, readable and reusable layouts

4. Colors

The DS should provide an abstraction on top of colors in order to be used in a more semantic and uniform way.

5. Forms/Inputs

Form and input control gives teams a common way to handle user input success/errors and provide consistent user feedback. All HTML input should be supported. The input should also be able to support labels, placeholder and helper text, and error states.

6. Typography

Typography should be clearly and efficiently defined to present information as consistently as possible. A typographic scale should be used to limit the sizes. Typography should be mapped to HTML elements (h1…h6).

7. Accessibility

The DS should provide attributes for accessibility such as aria labels, roles and tabIndex.

8. Overlays

The DS should provide standards for modals, dialogues, tooltips, popovers, etc. It is also very important that these overlays be flexible enough to modify their implementation details to account for stacked overlays and different overlay implementation methods (portal vs local).

9. Feedback Indicators

The DS should provide standards for alerts, notifications, toasts, banners, etc. A baked in notification system is a plus.

10. Loading Indicators

The DS should provide standards for loading states such as spinners, progress bars, skeletons

Learn three more areas to consider, plus compare 7 React-based design systems in our Developer's Guide to Selecting a Design System.