Typography

Every text-on-background combination at a glance — find what reads best

Cards Components Charts Headings Logos

FF0000primary

F1351Csecondary

E24B2Ftertiary

D25A40accent

C16650surface

AF7060highlight

997970neutral

Centered Hero

Build something amazing

4.4 Lowprimary

Build something amazing

4.4 Lowsecondary

Build something amazing

4.4 Lowtertiary

Build something amazing

4.4 Lowaccent

Build something amazing

4.4 Lowsurface

Build something amazing

4.4 Lowhighlight

Build something amazing

4.4 Lowneutral

Hero with Subtitle

Your workspace, reimagined

Everything you need to stay organized and productive

4.4 Lowprimary

Your workspace, reimagined

Everything you need to stay organized and productive

4.4 Lowsecondary

Your workspace, reimagined

Everything you need to stay organized and productive

4.4 Lowtertiary

Your workspace, reimagined

Everything you need to stay organized and productive

4.4 Lowaccent

Your workspace, reimagined

Everything you need to stay organized and productive

4.4 Lowsurface

Your workspace, reimagined

Everything you need to stay organized and productive

4.4 Lowhighlight

Your workspace, reimagined

Everything you need to stay organized and productive

4.4 Lowneutral

Gradient Hero

Endless possibilities

2.2 Lowprimary

Endless possibilities

2.2 Lowsecondary

Endless possibilities

2.2 Lowtertiary

Endless possibilities

2.3 Lowaccent

Endless possibilities

2.2 Lowsurface

Endless possibilities

2.3 Lowhighlight

Endless possibilities

2.3 Lowneutral

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

Featured products

Hand-picked selections for you

highlight

Featured products

Hand-picked selections for you

neutral

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

Recent activity

Your latest updates and changes

highlight

Recent activity

Your latest updates and changes

neutral

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

New

Getting started guide

Learn the basics in 5 minutes

highlight

New

Getting started guide

Learn the basics in 5 minutes

neutral

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

Analytics

Monthly performance

Track your key metrics over time

highlight

Analytics

Monthly performance

Track your key metrics over time

neutral

Colored Header Card

Team members

4.4 Low

Manage roles and permissions for your team

primary

Team members

4.4 Low

Manage roles and permissions for your team

secondary

Team members

4.4 Low

Manage roles and permissions for your team

tertiary

Team members

4.4 Low

Manage roles and permissions for your team

accent

Team members

4.4 Low

Manage roles and permissions for your team

surface

Team members

4.4 Low

Manage roles and permissions for your team

highlight

Team members

4.4 Low

Manage roles and permissions for your team

neutral

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

Think different

Innovation starts with a bold idea

highlight

Think different

Innovation starts with a bold idea

neutral

Gradient Text

Next generation

primary

Next generation

secondary

Next generation

tertiary

Next generation

accent

Next generation

surface

Next generation

highlight

Next generation

neutral

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

Make it stand out

Draw attention to what matters most

highlight

Make it stand out

Draw attention to what matters most

neutral

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

“

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

— Steve Jobshighlight

“

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

— Steve Jobsneutral

Color Pairings

Contrast

Background

Color

Showing 24 of 500 combinations