%20-%20white%20%26%20red.png)
STYLE GUIDE FOR FPM.ORG
TYPOGRAPHY
Header 1
For page titles and hero text.
Scala Sans OT, 46px, color #212121, line spacing 1.7
​
HEADER 2
For the titles of sections within a page.
Scala Sans OT Bold, 28px, color #E21C21, line spacing 1.7
Header 3
For titles of sections within paragraphs
Cormorant Garamond Semi Bold, 24px, color #212121, line spacing 1.7
​
HEADER 4
For button text and in-page sub menus
Scala Sans OT Bold, 17px, color #E21C21, line spacing 1.7
​
Header 5
For emphasised paragraphs
Cormorant Garamond Light, 19px, color #212121, line spacing 1.7
​
Paragraph 1
For main, standard paragraphs
Scala Sans OT, 18px, color #333333, line spacing 1.7
​
Paragraph 2
For subtext and asterisk text
Scala Sans OT, 12px, color #7A7979, line spacing 1.7
​
Link text
For hyperlinked paragraph text
Scala Sans OT Bold, 18px, color #E21C21, line spacing 1.7
​
​
Quote Text
For brief quotes, call-outs, and stylized emphasis on body text
Cormorant Garamond Light, 32px, color #212121, line spacing 2.2
“
”
COLOR
(in accordance with FPM's 2019 Style Guide)
Primary Palette
For text, backgrounds, and background overlays
Accent Palette
For buttons, emphasis, or just contrast (of background, text, etc)
HEX #333333
HEX #FFFFFF
HEX #E21C21
HEX #790000
HEX #FFEACC
HEX #94897A
PHOTOGRAPHY & PHOTO BACKGROUNDS
Either the photo will be a background to text and will have this screened-charcoal overlay to provide enough contrast to be ADA compliant, or...
...or photos will be without an overlay, and have no text on them.
BUTTONS & ICONS
Primary button and calls to action.
The button we most want the user to press to continue forward.
Button background = HEX #E21C21
Text = Header 4 formatting
Secondary button
This button is used for regressing, or doing the less-desirable action.
Button background = HEX #94897A
Text = Header 4 formatting