Introduction to Design Systems

Design system checklist

Before a component is considered complete, it must meet several design and development requirements:

Design Requirements


All users, regardless of circumstance, must be able to accomplish the same tasks within our product. Our designs must account for users with visual impairments and must ensure all facets are consumable.


How should a component respond when a user interacts with it? Is there validation feedback that must occur? The interaction definition must be defined.


How and where should this component be used? When should I use a link versus a tertiary button, for example?


Are all states, including neutral, hover, focus, and disabled, defined?


What type of content does this component rely upon? Does it accurately embody the brand identity?


Are aspects of this component customizable? If so, how? For example, if my design system serves multiple products, the primary button might have a different background color for product A versus product B. We must define these customizable parameters.


How does this component look on varying screen resolutions? How does the layout change?

Development Checklist


In addition to an accessible color palette, we must develop our components with semantic HTML elements in order to ensure compliance with assistive technologies. We also must account for keyboard navigation.


Our components must respond to browser window resizing and varying screen resolutions.


Does this component account for all aspects of the design? Have we implemented a near pixel-perfect component?


Have we implemented all of the customizable aspects of this component?

Error Handling / Data Validation

How do our components respond when something breaks? Have we incorporated type checking with React Prop Types or TypeScript to ensure our parameters comply with expected data types?

Browser Compatibility

Do the technologies we use work across all supported browsers or must we include polyfills?