Best Friends Design System: Typography & Colors
Link to Drupal overview | Link to Design System (Adobe XD)
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
bf-button-small: OpenSansBold700, #ffffff
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
Alert Yellow #FFBF46
Link Blue #003EB8
Teal #4c758a