display-1

Hero Header

Large, one-off headers, usually at the top of the page

Font Size: 66px Line Height: 77px Font weight: 100 Font family: VisbyCF-Heavy
headline

Heading 1

Section heading corresponding to the <h1> tag.

Font Size: 44px Line Height: 50px Font weight: 100 Font family: VisbyCF-Heavy
title

Title Heading

Section heading corresponding to the <h2> tag.

Font Size: 34px Line Height: 38px Font weight: 100 Font family: VisbyCF-DemiBold
subheading-2

Subheading 2

Section heading corresponding to the <h3> tag.

Font Size: 24px Line Height: 29px Font weight: 100 Font family: VisbyCF-Medium
subheading-1

Subheading 1

Section heading corresponding to the <h4> tag.

Font Size: 18px Line Height: 24px Font weight: 100 Font family: VisbyCF-Medium
body-1

Body 1

Base body text

Font Size: 14px Line Height: 17px Font weight: 400 Font family: Lato
body-2

Body 2

Bolder body text

Font Size: 14px Line Height: 17px Font weight: 700 Font family: Lato
caption

Caption text

Smaller body and hint text

Font Size: 12px Line Height: 15px Font weight: 400 Font family: Lato
button

BUTTON TEXT

Buttons and anchors.

Font Size: 16px Line Height: 19px Font weight: 700 Font family: Lato
input

Input field text

Form input fields.

Font Size: 15px Line Height: 18px Font weight: 400 Font family: Lato


Coral Regular:



Coral 2x:



Coral 4x:



Light Regular:



Light 2x:



Light 4x:



Dark Regular:



Dark 2x:



Dark 4x:





#fc5d43
main

#c22619
dark

#ff906f
light

#8b9196
main

#5e6468
dark

Wallet

Profile

Account

Support

Sign out

Buttons

Primary

Secondary

Selection

Primary

Secondary

Switches and sliders

Primary

Secondary

Cards

Title

Subhead

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Menu

Text Field

Primary

Secondary

Tool Bar

menu Title
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante