UI Colors

Primary Colors
Blue #0076BB
Light-Blue #E8F0F0
Charcoal #354145
Ivory #FCFAF8
Secondary Colors
Barrier #4FC8EC
Remedy #FF6371
Eczema #4195D1
Recovery #00ACBB
Inked #000000
Correct #3BD4AE
Charcoal #354145
Resurface #D9E79A
Grayscale
Gray900 #292929
Gray800 #4D4D4D
Gray700 #8A8A8A
Gray600 #B8B8B8
Gray500 #D6D6D6
Gray400 #EDEDED
Utility Colors
Error #E62D19
Success #85BB40
Focus #0076BB
Black #000000
White #FFFFFF

Borders & Dividers

Grayscale 600 - 1px #B8B8B8
Grayscale 600 - 2px #B8B8B8
Charcoal - 1px #354145
Charcoal - 2px #354145

Fonts

Font Family
Produkt FUTURA PT Open Sans
Font Weight Name
Regular DEMI BOLD Regular
Font Weight
400 500 400

Global Headline Styles

Desktop

Display

Font: Produkt | Weight: Regular | Size: 80px | Line Height: 85px | Letter Spacing: 0px

Header text 1

Font: Produkt | Weight: Regular | Size: 55px | Line Height: 70px | Letter Spacing: 0px

Header text 2

Font: Produkt | Weight: Regular | Size: 34px | Line Height: 40px | Letter Spacing: 0px

Header text 3

Font: Produkt | Weight: Regular | Size: 27px | Line Height: 37px | Letter Spacing: 0px

Header text 4

Font: Produkt | Weight: Regular | Size: 19px | Line Height: 27px | Letter Spacing: 0px
Header text 5 (Eyebrow)
Font: Futura PT | Weight: Regular | Size: 17px | Line Height: 20px | Letter Spacing: 2px
header text 6 (collection)
Font: Futura PT | Weight: Regular | Size: 15px | Line Height: 16px | Letter Spacing: 1px
Mobile

Display

Font: Produkt | Weight: Regular | Size: 35px | Line Height: 40px | Letter Spacing: 0px

Header text 1

Font: Produkt | Weight: Regular | Size: 27px | Line Height: 37px | Letter Spacing: 0px

Header text 2

Font: Produkt | Weight: Regular | Size: 24px | Line Height: 34px | Letter Spacing: 0px

Header text 3

Font: Produkt | Weight: Regular | Size: 17px | Line Height: 27px | Letter Spacing: 0px

Header text 4

Font: Produkt | Weight: Regular | Size: 15px | Line Height: 20px | Letter Spacing: 0px
Header text 5 (Eyebrow)
Font: Futura PT | Weight: Regular | Size: 15px | Line Height: 17px | Letter Spacing: 2px
header text 6 (collection)
Font: Futura PT | Weight: Regular | Size: 13px | Line Height: 14px | Letter Spacing: 1px

Body Copy Styles

Desktop + Mobile
Body Copy Large Font: Open Sans | Weight: Regular | Size: 22px | Line Height: 32px | Letter Spacing: 0px
Body Copy Base Font: Open Sans | Weight: Regular | Size: 17px | Line Height: 25px | Letter Spacing: .25px
Body Copy Small Font: Open Sans | Weight: Regular | Size: 13px | Line Height: 22px | Letter Spacing: 0px
Desktop + Mobile link
Body Copy Large Link Font: Open Sans | Weight: Regular | Size: 22px | Line Height: 32px | Letter Spacing: 0px
Body Copy Base Link Font: Open Sans | Weight: Regular | Size: 17px | Line Height: 25px | Letter Spacing: .25px
Body Copy Small Link Font: Open Sans | Weight: Regular | Size: 13px | Line Height: 22px | Letter Spacing: 0px

Buttons + Links

Primary CTA
Default
Hover
Focus
Disabled
Secondary CTA
Default
Hover
Focus
Disabled
Disabled View Collection
Primary Link
Default Learn More
Hover Learn More
Focus Learn More
Disabled Learn More
Secondary Link
Default Learn More
Hover Learn More
Focus Learn More
Disabled Learn More

Nav Links

Animation Note: On hover, Blue underline moves in from left to right. Off hover will reverse the animation

Icons

Arrows Large
Arrows Medium
Arrows Small
Utility Large

Pagination

Carousel Arrow Styles
Note: Carousel arrows will always be at the left and right ends of the viewport.
Left Right
Carousel Arrow Styles
Note: Carousel arrows will always be at the left and right ends of the viewport.
Carousel Dots
Box + Arrows + Dots

Form Elements

Input Field
Please enter valid input
Dropdown
  • Placeholder
  • Placeholder
  • Placeholder
  • Placeholder
  • Placeholder
  • Placeholder

Form Elements

Checkbox Select
Radial Select