Buttons
Buttons communicate actions that users can take.
Typography
Our design system leverages a purposeful set of typographic styles. We’ve stress-tested this typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any project, while remaining as accessible as possible for everyone.
Display 2xl
Regular
Display 2xl
Medium
Display 2xl
Semibold
Display 2xl
Bold
Display xl
Regular
Display xl
Medium
Display xl
Semibold
Display xl
Bold
Display lg
Regular
Display lg
Medium
Display lg
Semibold
Display lg
Bold
Display md
Regular
Display md
Medium
Display md
Semibold
Display md
Bold
Display sm
Regular
Display sm
Medium
Display sm
Semibold
Display sm
Bold
Display xs
Regular
Display xs
Medium
Display xs
Semibold
Display xs
Bold
Text xl
Regular
Text xl
Medium
Text xl
Semibold
Text xl
Bold
Text lg
Regular
Text lg
Medium
Text lg
Semibold
Text lg
Bold
Text md
Regular
Text md
Medium
Text md
Semibold
Text md
Bold
Text sm
Regular
Text sm
Medium
Text sm
Semibold
Text sm
Bold
Text xs
Regular
Text xs
Medium
Text xs
Semibold
Text xs
Bold
Colors
Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project.
Primary colors
These are the main neutral, brand and semantic colors that make up the majority of the colors used in the design system and components.
Base
Here goes your text ... Select any part of your text to access the formatting toolbar.
White
#FFFFFF
Black
#FFFFFF
Transparent
#FFFFFF 0%
Gray (light mode)
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.
25
#FDFDFD
50
#FAFAFA
100
#F5F5F5
200
#E9EAEB
300
#D5D7DA
400
#A4A7AE
500
#717680
600
#535862
700
#414651
800
#252B37
900
#181D27
950
#0A0D12
Gray (dark mode)
This is a separate gray color palette used specifically for dark mode. This gray has been desaturated and optimised to work well within dark mode variables.
25
#FDFDFD
50
#F7F7F7
100
#F0F0F1
200
#ECECED
300
#CECFD2
400
#94979C
500
#85888E
600
#61656C
700
#373A41
800
#22262F
900
#13161B
950
#0C0E12
Brand
The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
25
#FFF5F6
50
#FFF1F3
100
#FFE4E8
200
#FECDD6
300
#FEA3B4
400
#FD6F8E
500
#F63D68
600
#E31B54
700
#C01048
800
#A11043
900
#89123E
950
#510B24
Error
Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
25
#FFFBFA
50
#FEF3F2
100
#FEE4E2
200
#FECDCA
300
#FDA29B
400
#F97066
500
#F04438
600
#D92D20
700
#B42318
800
#912018
900
#7A271A
950
#55160C
Error
Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.
25
#FFFCF5
50
#FFFAEB
100
#FEF0C7
200
#FEDF89
300
#FEC84B
400
#FDB022
500
#F79009
600
#DC6803
700
#B54708
800
#93370D
900
#7A2E0E
950
#4E1D09
Success
Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.