🎨

Design system

Stage
Scale
Author

Made by HeadspaceHeadspace

Description

How Headspace organizes their shared design resources.

How to use this design system

Every designer, new and old, should review this system and leave comments, feedback, or questions. This design system is meant to be a single source of truth for the entire design team to stay consistent and reduce duplicative work.

Type

Use this section to organize your team's typography, from button text to body paragraphs. Easily embed your Figma files (that automatically update) and get your team on the same page.

Templates

Include pre-made components that are stitched together into commonly used templates. If you want to add a new template, you can add it in this Figma file, which is where you can also find all of your design team's templates:

Themes

This section is where your team can find colors, contrast and accessibility guidelines for different themes in your product.

Light and Dark Theme

Icons

List out all iconographic design your team uses. Showcasing brand guidelines and common use cases will help your team stay consistent.

Filled and Outlined Icons

Native components

Display ready-built iOS and Android components used throughout the app experience.

iOS and Android Components

iOS Components Repository
Android Components Repository

Brand Guidelines

Outline specific visual details regarding the do's and don't of your company design. Use of logo, color, and type are just some of the rules you can include.

Designs Patterns to Avoid

image