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.
Montserrat
Headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Aa
Regular
Font weight: 400
Aa
Medium
Font weight: 500
Aa
Semibold
Font weight: 600
Aa
Bold
Font weight: 700
Montserrat
Body
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Aa
Regular
Font weight: 400
Aa
Medium
Font weight: 500
Aa
Semibold
Font weight: 600
Aa
Bold
Font weight: 700
Display 2xl
Font size: 72px / 4.5rem | Line height: 90px / 5.625rem | Tracking: -2%
Display 2xl
Regular
Display 2xl
Medium
Display 2xl
Semibold
Display 2xl
Bold
Display xl
Font size: 60px / 3.75rem | Line height: 72px / 4.5rem | Tracking: -2%
Display xl
Regular
Display xl
Medium
Display xl
Semibold
Display xl
Bold
Display lg
Font size: 48px / 3rem | Line height: 60px / 3.75rem | Tracking: -2%
Display lg
Regular
Display lg
Medium
Display lg
Semibold
Display lg
Bold
Display md
Font size: 36px / 2.25rem | Line height: 44px / 2.75rem | Tracking: -2%
Display md
Regular
Display md
Medium
Display md
Semibold
Display md
Bold
Display sm
Font size: 30px / 1.875rem | Line height: 38px / 2.375rem
Display sm
Regular
Display sm
Medium
Display sm
Semibold
Display sm
Bold
Display xs
Font size: 24px / 1.5rem | Line height: 32px / 2rem
Display xs
Regular
Display xs
Medium
Display xs
Semibold
Display xs
Bold
Text xl
Font size: 20px / 1.25rem | Line height: 30px / 1.875rem
Text xl
Regular
Text xl
Medium
Text xl
Semibold
Text xl
Bold
Text lg
Font size: 18px / 1.125rem | Line height: 28px / 1.75rem
Text lg
Regular
Text lg
Medium
Text lg
Semibold
Text lg
Bold
Text md
Font size: 16px / 1rem | Line height: 24px / 1.5rem
Text md
Regular
Text md
Medium
Text md
Semibold
Text md
Bold
Text small
Font size: 14px / 0.875rem | Line height: 20px / 1.25rem
Text sm
Regular
Text sm
Medium
Text sm
Semibold
Text sm
Bold
Text xs
Font size: 12px / 0.75rem | Line height: 18px / 1.125rem
Text xs
Regular
Text xs
Medium
Text xs
Semibold
Text xs
Bold
underlined 1
Color
Base
These are base black and white color styles to quickly swap out if you need to.
AAA 21.1
White
#FFFFFF
AAA 21:1
Black
#000000
Transparent
#FFFFFF 0%
Gray
Gray is very close to dark gray and 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.
AAA 7.49
25
#FDFDFE
AAA 7.35
50
#F8F9FA
AA 6.97
100
#EFF1F3
AA 6.49
200
#DBDEE1
AA 5.21
300
#AFB2B4
2.58
400
#A4A7A9
AA 4.95
500
#838587
AAA 7.65
600
#636465
AAA 10.41
700
#363737
AAA 16.02
800
#393A3C
AAA 17.79
900
#242627
AAA 18.85
950
#0E0F0F