Two Color, Dark
Two Color, Light
Red Carnation color
10% font color
Second to black.
Fellow name boxes.
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
USAGE: Fellow name in Bio.
Header 5 (18px) - Raleway Semi Bold
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.