Colors

Gray

Gray 50
#F7F8FA
Gray 75
#F0F2F5
Gray 100
#E8EBF0
Gray 200
#DBDDE2
Gray 300
#CACCD1
Gray 400
#9B9FA9
Gray 500
#8A8D91
Gray 600
#65676B
Gray 700
#4E5259
Gray 800
#2C2E31
Gray 900
#050505

Blue

Blue 50
#EBF8FF
Blue 75
#D2E7F8
Blue 80
#BCDCF5
Blue 100
#B9E6FF
Blue 200
#65C8FF
Blue 400
#009BE2
Blue 500
#2778C4
Blue 600
#0055A3
Blue 800
#001F5B
Blue 900
#000F40

Gradients

Primary Gradient
Logo, Call to action buttons
Mint Gradient
Marketing
Purple Gradient
Marketing
Orange Gradient
Highlights
Yellow Gradient
Marketing
Gold
Badges & Awards
Dark Gradient
Marketing
Silver Gradient
Marketing
Sterling Blue
Badges
MARKETING TEST GRADIENT
Marketing
MARKETING TEST BLUE
Marketing

Typography

h1

This is an H1. It should be used as the page title

h2

This is an H2. It should be used for any titles of lower value than the page title

Content Card Title

This is the default title size for a content card.

Subheading

This is any subheading text we may need to include. For example a subheading on a page that needs more explanation than a title.

Body text - Default

This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text. This is all default body text.

Buttons

Primary

Button

Primary (SM)

Button

Blue Outline(SM)

Button

White - Outline

Button

White - Outline (SM)

Button

White

Button

White (SM)

Button

Primary - Icon

Button

White - Outline - Icon

Button

White - Icon

Button

Close 1

Close 2

Close 3

Close 4

Containers

XL - 1280px

LG - 1024px

MD - 768px

SM - 640px

Tabs

Standard Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Compact Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Avatars

Standard Avatar

Medium Avatar

Small Avatar

Shadows

xs

sm

base

md

lg

xl

2xl

Outline

Inner

Dark Lg

Radii

none
0rem
sm
0.125rem
base
0.25rem
md
0.375rem
lg
0.5rem
xl
0.75rem
2xl
1rem
3xl
1.5rem
full
9999px