Typography System

Main Title

Secondary Title

Main Heading

Sub Heading

Label

Paragraph text, Quasimoda Regular, 20px. This is paragraph text which should be used for the majority of all text content on the page. Inline links, which look like this, may be added to paragraph text using the link icon.

Small paragraph text, Quasimoda Regular, 13px. This is small-paragraph text which should be used for content that is second in heirarchy, like the Helpful links sidebar.

Large Paragraph, Adobe Garamond Pro Regular, 22px. It should be used for an introductory sentence or short paragraph. There should never be more than one paragraph of intro text.

Color Palette

Dark Brown

#351A0E
rgba(53, 26, 14, 100)

Brown

#583617
rgba(88, 54, 23, 100)

Ginger

#C88A3D
rgba(200, 138, 61, 100)

Beige

#E8E8D9
rgba(232, 232, 217, 100)

White

#FEFEFB
rgba(254, 254, 251, 100)

UI Elements

Button Text

primary Button

Button Color: #583617
Type Style: Label, White #FEFEFB

Button Text

Hover State

Button Color: #351A0E
Type Style: Label, White #FEFEFB

Button Text

Secondary Button

Button Outline Color: #583617
Outline: 3px
Type Style: Label, Dark Brown #351A0E

Button Text

Hover State

Button Color: #351A0E
Type Style: Label, White #FEFEFB

Footer Social Icons

Icon color: #FEFEFB
Circle color: #C88A3D

Footer Social Icons

Icon color: #C88A3D
Circle outline: #C88A3D
Circle outline weight: 3px

Footer Social Icons Updated

Icon color: #FEFEFB
Circle color: #C88A3D
CSS class: social-share--v2

Footer Social Icons Updated

Icon color: #C88A3D
Circle outline: #C88A3D
Circle outline weight: 3px
CSS class: social-share--v2

Left and Right Arrows

 Main Icon

Input fields

Default Field

Field lab: Label
Input text style: Paragraph at 50% opacity

Input Field

Field lab: Label
Input text style: Paragraph at 100% opacity

Error Field

Input Border: #FC3A3A, 2px