Close

Categories

Design system template

by InVision

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

Use template
Design system 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 InVision 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

InVision is the digital product design platform used to make the world's best customer experiences.

  • Customer interview report template

    Atlassian

    Customer interview report

    Turn customer interviews into insights with the customer interview report.

    Use template Learn more
  • Design component template

    Tony Starr

    Lead Content Designer
    Atlassian

    Design component

    Document components in your design system with this handy template.

    Use template Learn more
  • Design sprint template

    Figma

    Design sprint

    Create a framework for answering critical business questions through design and testing.

    Use template Learn more