Design system template

by Atlassian

Scale your design team by developing a unified design system – with help from the pros

KEY FEATURES
Documentation
Team Alignment
Knowledge Base

CATEGORIES

Design
Page template

As your organization grows, you’ll likely need to evolve your brand and design too. Developing a design system will help you speed up the design process, eliminate inconsistencies, and reduce design debt across your whole organization. The design system template gives you the tools you need to define your design principles, document components, and clarify rules and best practices for design, writing, and more. It’s the perfect starting point for any design system.

How to use the design system template

Step 1. Define your design principles

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.

Step 2. Describe your visual language

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.

Step 3. Write your writing rules

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.

Step 3. Write your writing rules

Step 4. Build out best practices

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.

Step 5. Document your components

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.

Step 5. Document your components

Related Templates

Content design glossary

Content design glossary

Teach writers how to use product names, industry terms, and other content with an A-Z guide.

By Atlassian
Learn more
Content strategy

Content strategy

Map out your content strategy and organize your editorial calendar

By Atlassian
Learn more
Content design glossary

Content design glossary

Teach writers how to use product names, industry terms, and other content with an A-Z guide.

By Atlassian
Learn more
Content strategy

Content strategy

Map out your content strategy and organize your editorial calendar

By Atlassian
Learn more
Customer interview report

Customer interview report

Turn customer interviews into insights with the customer interview report.

By Atlassian
Learn more