Style Guide
Logo
Primary Logo
Two Color, Dark




Multi-color, Dark
Multi-color, Light
Two Color, Light
Colors
#F2545B
Red Carnation color
-
Quote box
-
Buttons
-
Titles
-
Accents
#F4F4F4
Wild Sand
-
Topic box
-
Background sections
#303030
Mine Shaft
-
10% font color
-
Second to black.
#2EB2FF
Dodger Blue
-
Fellow name boxes.
Typography​
​Primary Typeface​
Titles
-
Raleway,
-
Raleway semibold
​
Paragraph
​
-
Helvetica
​
​
Website Headings
The heading structure has been implemented here and across the entire website. This is the basic breakdown of standard heading
sizes and their relationship to the body copy. Use headers appropriately and do not reset.
Obviously, exceptions exist, especially between different page templates. All headings are not bold. Bold headings and change color only if need it to fit a specific section. Make sure headings stay consistent across the site.
Header 1 (90px)
Raleway Semi Bold
USAGE: Page titles, banners, and slogan.
​
​
Header 2 (52px) - Raleway Semi Bold
USAGE: Banners, page section titles.
​
​
Header 3 (36px) - Raleway Semi Bold
USAGE: Body/description section titles, Coordinator name, “Applications for 2020 now closed” line in Apply page.
​
​
Header 4 (24px) - Lulo Clea
Character spacing: -0.1 & Line
Spacing: 1.1
USAGE: Fellow name in Bio.
​
​
Header 5 (18px) - Raleway Semi Bold
USAGE:
-
Main page Highlight body section, What is the DreamSF fellowship blocks and quotes in colored blocks, and navigation bar text.
-
Some Header 5s have been changed to between 18px and 24px to adequately fill its content-specific block.
​
​
Header 6 (12px)
USAGE: Button 1.
​
​
Paragraph 1 (15px) - Helvetica Light
USAGE: Fellow Bio body and fellow quotes(16px) in Meet the Fellows.
​
​
Paragraph 2 (18px) - Helvetica
USAGE: Page description body section and FAQ answers.
​
​
Paragraph 3 (22px) - Helvetica
USAGE: FAQ questions and large page body content.