Design system template

Your design principles are the foundation of your design system: they are the values that guide you as you create new products, features, and functionality, and they interact to create your unique look and feel. Choose principles that are concrete, that reflect your organization’s unique point of view, and that designers can apply – using their expert discretion to resolve any tensions or conflicts.

Once you have your design principles figured out, it’s time to move on to the elements of your visual language. These are things like your color palette, typography, sizing and spacing rules, and your icon and illustration libraries. For each design element, list the rules designers should apply and include a few “dos and don’ts” to demonstrate how the elements are used in practice.

After you’re done with the visuals, it’s time to move on to words. Every organization has a different writing style and a different voice. Even conventions for capitalization, punctuation, and numbers can vary from one design team to another. Get your nitty-gritty writing rules down on the page, add brand terms to your lexicon, and create a cheat sheet at the top to answer common questions or remind the design team of important writing conventions.

You know what works and what doesn’t for your design team. In the next section, write down your best practices for things like accessibility, browser support, and mobile design. That way, designers have a nice little cheat sheet to help them craft tried-and-true designs that are both beautiful and inclusive.

Now it’s time to get into the weeds. Paste in a code snippet for each component in your design system and use the tables in this section to describe the ways it can be modified in different design contexts. This section is critical for ensuring that your designs are implemented correctly and consistently by the developers in your organization, so make sure you give it your full attention and time.