Typography
Every text-on-background combination at a glance — find what reads best
Centered Hero
Build something amazing
4.4 LowprimaryBuild something amazing
5.3 AAsecondaryBuild something amazing
7.0 AAtertiaryBuild something amazing
9.2 AAAaccentBuild something amazing
12.0 AAAsurfaceBuild something amazing
15.1 AAAhighlightBuild something amazing
18.0 AAAneutralHero with Subtitle
Your workspace, reimagined
Everything you need to stay organized and productive
4.4 LowprimaryYour workspace, reimagined
Everything you need to stay organized and productive
5.3 AAsecondaryYour workspace, reimagined
Everything you need to stay organized and productive
7.0 AAtertiaryYour workspace, reimagined
Everything you need to stay organized and productive
9.2 AAAaccentYour workspace, reimagined
Everything you need to stay organized and productive
12.0 AAAsurfaceYour workspace, reimagined
Everything you need to stay organized and productive
15.1 AAAhighlightYour workspace, reimagined
Everything you need to stay organized and productive
18.0 AAAneutralGradient Hero
Endless possibilities
2.2 LowprimaryEndless possibilities
9.7 AAAsecondaryEndless possibilities
11.6 AAAtertiaryEndless possibilities
13.7 AAAaccentEndless possibilities
15.8 AAAsurfaceEndless possibilities
17.8 AAAhighlightEndless possibilities
19.3 AAAneutralSection Underline
Featured products
Hand-picked selections for you
primaryFeatured products
Hand-picked selections for you
secondaryFeatured products
Hand-picked selections for you
tertiaryFeatured products
Hand-picked selections for you
accentFeatured products
Hand-picked selections for you
surfaceFeatured products
Hand-picked selections for you
highlightFeatured products
Hand-picked selections for you
neutralSection Bar
Recent activity
Your latest updates and changes
primaryRecent activity
Your latest updates and changes
secondaryRecent activity
Your latest updates and changes
tertiaryRecent activity
Your latest updates and changes
accentRecent activity
Your latest updates and changes
surfaceRecent activity
Your latest updates and changes
highlightRecent activity
Your latest updates and changes
neutralSection with Label
Getting started guide
Learn the basics in 5 minutes
primaryGetting started guide
Learn the basics in 5 minutes
secondaryGetting started guide
Learn the basics in 5 minutes
tertiaryGetting started guide
Learn the basics in 5 minutes
accentGetting started guide
Learn the basics in 5 minutes
surfaceGetting started guide
Learn the basics in 5 minutes
highlightGetting started guide
Learn the basics in 5 minutes
neutralCard Title
Monthly performance
Track your key metrics over time
primaryMonthly performance
Track your key metrics over time
secondaryMonthly performance
Track your key metrics over time
tertiaryMonthly performance
Track your key metrics over time
accentMonthly performance
Track your key metrics over time
surfaceMonthly performance
Track your key metrics over time
highlightMonthly performance
Track your key metrics over time
neutralColored Header Card
Team members
4.4 LowManage roles and permissions for your team
Team members
5.3 AAManage roles and permissions for your team
Team members
7.0 AAManage roles and permissions for your team
Team members
9.2 AAAManage roles and permissions for your team
Team members
12.0 AAAManage roles and permissions for your team
Team members
15.1 AAAManage roles and permissions for your team
Team members
18.0 AAAManage roles and permissions for your team
Colored Text
Think different
Innovation starts with a bold idea
primaryThink different
Innovation starts with a bold idea
secondaryThink different
Innovation starts with a bold idea
tertiaryThink different
Innovation starts with a bold idea
accentThink different
Innovation starts with a bold idea
surfaceThink different
Innovation starts with a bold idea
highlightThink different
Innovation starts with a bold idea
neutralGradient Text
Next generation
Powered by cutting-edge technology
primaryNext generation
Powered by cutting-edge technology
secondaryNext generation
Powered by cutting-edge technology
tertiaryNext generation
Powered by cutting-edge technology
accentNext generation
Powered by cutting-edge technology
surfaceNext generation
Powered by cutting-edge technology
highlightNext generation
Powered by cutting-edge technology
neutralHighlighted Text
Make it stand out
Draw attention to what matters most
primaryMake it stand out
Draw attention to what matters most
secondaryMake it stand out
Draw attention to what matters most
tertiaryMake it stand out
Draw attention to what matters most
accentMake it stand out
Draw attention to what matters most
surfaceMake it stand out
Draw attention to what matters most
highlightMake it stand out
Draw attention to what matters most
neutralPull Quote
Design is not just what it looks like. Design is how it works.
— Steve JobsprimaryDesign is not just what it looks like. Design is how it works.
— Steve JobssecondaryDesign is not just what it looks like. Design is how it works.
— Steve JobstertiaryDesign is not just what it looks like. Design is how it works.
— Steve JobsaccentDesign is not just what it looks like. Design is how it works.
— Steve JobssurfaceDesign is not just what it looks like. Design is how it works.
— Steve JobshighlightDesign is not just what it looks like. Design is how it works.
— Steve JobsneutralColor Pairings
Great typography begins with readability
18.5 AAAprimary 50 / neutral 950Great typography begins with readability
18.5 AAAneutral 950 / primary 50Great typography begins with readability
18.5 AAAhighlight 50 / neutral 950Great typography begins with readability
18.5 AAAneutral 950 / highlight 50Great typography begins with readability
18.5 AAAneutral 50 / neutral 950Great typography begins with readability
18.5 AAAneutral 950 / neutral 50Great typography begins with readability
18.3 AAAprimary 50 / highlight 950Great typography begins with readability
18.3 AAAhighlight 950 / primary 50Great typography begins with readability
18.3 AAAhighlight 50 / highlight 950Great typography begins with readability
18.3 AAAhighlight 950 / highlight 50Great typography begins with readability
18.3 AAAhighlight 950 / neutral 50Great typography begins with readability
18.3 AAAneutral 50 / highlight 950Great typography begins with readability
18.3 AAAprimary 50 / primary 950Great typography begins with readability
18.3 AAAprimary 950 / primary 50Great typography begins with readability
18.3 AAAprimary 950 / highlight 50Great typography begins with readability
18.3 AAAhighlight 50 / primary 950Great typography begins with readability
18.3 AAAprimary 950 / neutral 50Great typography begins with readability
18.3 AAAneutral 50 / primary 950Great typography begins with readability
18.2 AAAprimary 50 / neutral 900Great typography begins with readability
18.2 AAAneutral 900 / primary 50Great typography begins with readability
18.2 AAAhighlight 50 / neutral 900Great typography begins with readability
18.2 AAAneutral 900 / highlight 50Great typography begins with readability
18.2 AAAneutral 50 / neutral 900Great typography begins with readability
18.2 AAAneutral 900 / neutral 50