Typography

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

Cards Components Charts Headings Logos

667EEAprimary

586BC5secondary

4B59A1tertiary

3D477Faccent

30365Esurface

23263Fhighlight

161722neutral

Centered Hero

Build something amazing

4.8 AAprimary

Build something amazing

4.9 AAsecondary

Build something amazing

6.5 AAtertiary

Build something amazing

8.7 AAAaccent

Build something amazing

11.6 AAAsurface

Build something amazing

14.8 AAAhighlight

Build something amazing

17.8 AAAneutral

Hero with Subtitle

Your workspace, reimagined

Everything you need to stay organized and productive

4.8 AAprimary

Your workspace, reimagined

Everything you need to stay organized and productive

4.9 AAsecondary

Your workspace, reimagined

Everything you need to stay organized and productive

6.5 AAtertiary

Your workspace, reimagined

Everything you need to stay organized and productive

8.7 AAAaccent

Your workspace, reimagined

Everything you need to stay organized and productive

11.6 AAAsurface

Your workspace, reimagined

Everything you need to stay organized and productive

14.8 AAAhighlight

Your workspace, reimagined

Everything you need to stay organized and productive

17.8 AAAneutral

Gradient Hero

Endless possibilities

2.4 Lowprimary

Endless possibilities

8.9 AAAsecondary

Endless possibilities

10.8 AAAtertiary

Endless possibilities

13.1 AAAaccent

Endless possibilities

15.4 AAAsurface

Endless possibilities

17.4 AAAhighlight

Endless possibilities

19.1 AAAneutral

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.8 AA

Manage roles and permissions for your team

primary

Team members

4.9 AA

Manage roles and permissions for your team

secondary

Team members

6.5 AA

Manage roles and permissions for your team

tertiary

Team members

8.7 AAA

Manage roles and permissions for your team

accent

Team members

11.6 AAA

Manage roles and permissions for your team

surface

Team members

14.8 AAA

Manage roles and permissions for your team

highlight

Team members

17.8 AAA

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