Typography

The default font in Best Friends UI is Open Sans. These styles are to be used in all instances possible.

Font-size is determined using rem units to keep harmony and hierarchy of type across devices. (Typography will dynamically adjust depending on screen resolution, desktop vs. mobile, etc.)

Notes:
Subheads are to be used after H1. Subhead 1 is the preferred style. (Do not use adjacent to other H styles.)
In limited cases, subhead style can be used as call out text within a large block of body copy.

hh: OpenSansBold700, #ffffff

Lorem ipsum dolor sit amet consectetur adipiscing

h1: OpenSansBold700, #000000

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor

h2: OpenSansBold700, #292929

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor

h3: OpenSansBold700, #292929

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna

h4: OpenSansBold700, #292929

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

h5: OpenSansBold700,#3D3D3E

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

subhead1: OpenSansBold700, #7A7A7A

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

subhead2: OpenSansSemiBold600, 000000

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

bf-body: OpenSansRegular400, #363636

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

bf-body2: OpenSansRegular400, #363636

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

card-title: OpenSansBold700, #000000

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

story-marker: OpenSansBold700, #3D3D3E

Story Marker Lorem ipsum dolor

bf-button: OpenSansBold700, #ffffff

Large Button

bf-button-small: OpenSansBold700, #ffffff

Small Button

Colors

Text links, when on white backgrounds, appear #003DB8 Link Blue.

Web buttons use #ec720b to meet accessibility contrast standards.

The Best Friends logo is #f58220.

Principal Colors:

Orange #ec720b

Dark Slate #3d3d3e

Slate #636466

White #ffffff

Black #000000

Secondary Colors:

Light Gray #F7F7F7

Buff #F7F6F2

Section Nav #2B2B2B

Border Gray #888888

Additional Colors:

Highlight #F88A2D

Hover Orange #BD5B09

Button Gray #363636

Alert Yellow #FFBF46

Link Blue #003EB8

Teal #4c758a