Typography

264653primary
2A9D8Fsecondary
E9C46Atertiary
F4A261accent
E76F51surface

Centered Hero

Build something amazing

10.1 AAAprimary

Build something amazing

5.2 AAsecondary

Build something amazing

10.4 AAAtertiary

Build something amazing

8.4 AAAaccent

Build something amazing

5.6 AAsurface

Hero with Subtitle

Your workspace, reimagined

Everything you need to stay organized and productive

10.1 AAAprimary

Your workspace, reimagined

Everything you need to stay organized and productive

5.2 AAsecondary

Your workspace, reimagined

Everything you need to stay organized and productive

10.4 AAAtertiary

Your workspace, reimagined

Everything you need to stay organized and productive

8.4 AAAaccent

Your workspace, reimagined

Everything you need to stay organized and productive

5.6 AAsurface

Gradient Hero

Endless possibilities

14.1 AAAprimary

Endless possibilities

2.6 Lowsecondary

Endless possibilities

4.5 AAtertiary

Endless possibilities

3.8 Lowaccent

Endless possibilities

2.7 Lowsurface

Section Underline

Featured products

Hand-picked selections for you

primary

Featured products

Hand-picked selections for you

secondary

Featured products

Hand-picked selections for you

tertiary

Featured products

Hand-picked selections for you

accent

Featured products

Hand-picked selections for you

surface

Section Bar

Recent activity

Your latest updates and changes

primary

Recent activity

Your latest updates and changes

secondary

Recent activity

Your latest updates and changes

tertiary

Recent activity

Your latest updates and changes

accent

Recent activity

Your latest updates and changes

surface

Section with Label

New

Getting started guide

Learn the basics in 5 minutes

primary
New

Getting started guide

Learn the basics in 5 minutes

secondary
New

Getting started guide

Learn the basics in 5 minutes

tertiary
New

Getting started guide

Learn the basics in 5 minutes

accent
New

Getting started guide

Learn the basics in 5 minutes

surface

Card Title

Analytics

Monthly performance

Track your key metrics over time

primary
Analytics

Monthly performance

Track your key metrics over time

secondary
Analytics

Monthly performance

Track your key metrics over time

tertiary
Analytics

Monthly performance

Track your key metrics over time

accent
Analytics

Monthly performance

Track your key metrics over time

surface

Colored Header Card

Team members

10.1 AAA

Manage roles and permissions for your team

primary

Team members

5.2 AA

Manage roles and permissions for your team

secondary

Team members

10.4 AAA

Manage roles and permissions for your team

tertiary

Team members

8.4 AAA

Manage roles and permissions for your team

accent

Team members

5.6 AA

Manage roles and permissions for your team

surface

Colored Text

Think different

Innovation starts with a bold idea

primary

Think different

Innovation starts with a bold idea

secondary

Think different

Innovation starts with a bold idea

tertiary

Think different

Innovation starts with a bold idea

accent

Think different

Innovation starts with a bold idea

surface

Gradient Text

Next generation

Powered by cutting-edge technology

primary

Next generation

Powered by cutting-edge technology

secondary

Next generation

Powered by cutting-edge technology

tertiary

Next generation

Powered by cutting-edge technology

accent

Next generation

Powered by cutting-edge technology

surface

Highlighted Text

Make it stand out

Draw attention to what matters most

primary

Make it stand out

Draw attention to what matters most

secondary

Make it stand out

Draw attention to what matters most

tertiary

Make it stand out

Draw attention to what matters most

accent

Make it stand out

Draw attention to what matters most

surface

Pull Quote

Design is not just what it looks like. Design is how it works.

— Steve Jobsprimary

Design is not just what it looks like. Design is how it works.

— Steve Jobssecondary

Design is not just what it looks like. Design is how it works.

— Steve Jobstertiary

Design is not just what it looks like. Design is how it works.

— Steve Jobsaccent

Design is not just what it looks like. Design is how it works.

— Steve Jobssurface

Color Pairings

Contrast
Background
Color
Showing 24 of 500 combinations

Great typography begins with readability

18.8 AAAsecondary 50 / accent 950

Great typography begins with readability

18.8 AAAaccent 950 / secondary 50

Great typography begins with readability

18.8 AAAsecondary 50 / tertiary 950

Great typography begins with readability

18.8 AAAtertiary 950 / secondary 50

Great typography begins with readability

18.7 AAAprimary 950 / secondary 50

Great typography begins with readability

18.7 AAAsecondary 50 / primary 950

Great typography begins with readability

18.6 AAAsecondary 50 / surface 950

Great typography begins with readability

18.6 AAAsurface 950 / secondary 50

Great typography begins with readability

18.6 AAAsecondary 50 / secondary 950

Great typography begins with readability

18.6 AAAsecondary 950 / secondary 50

Great typography begins with readability

18.6 AAAprimary 50 / accent 950

Great typography begins with readability

18.6 AAAaccent 950 / primary 50

Great typography begins with readability

18.6 AAAprimary 50 / tertiary 950

Great typography begins with readability

18.6 AAAtertiary 950 / primary 50

Great typography begins with readability

18.5 AAAtertiary 50 / accent 950

Great typography begins with readability

18.5 AAAaccent 950 / tertiary 50

Great typography begins with readability

18.5 AAAprimary 50 / primary 950

Great typography begins with readability

18.5 AAAprimary 950 / primary 50

Great typography begins with readability

18.4 AAAtertiary 50 / tertiary 950

Great typography begins with readability

18.4 AAAtertiary 950 / tertiary 50

Great typography begins with readability

18.4 AAAaccent 950 / surface 50

Great typography begins with readability

18.4 AAAsurface 50 / accent 950

Great typography begins with readability

18.4 AAAprimary 50 / surface 950

Great typography begins with readability

18.4 AAAsurface 950 / primary 50