top of page

Style Guide


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



Red Carnation color

  • Quote box

  • Buttons

  • Titles

  • Accents


Wild Sand

  • Topic box

  • Background sections


Mine Shaft

  • 10% font color

  • Second to black. 


Dodger Blue

  • Fellow name boxes. 


​Primary Typeface​



  • Raleway,

  • Raleway semibold


  • 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


  • 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