top of page

Style Guide

Logo

Primary Logo

Two Color, Dark

DreamSF logo transparent single color bl
DreamSF logo transparent double color bl
DreamSF logo transparent double color wh
DreamSF logo transparent single color wh

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.

bottom of page