Style Guide


Headings

Page and Post Titles

font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
color: #ec3348;
font-weight: 800;
font-size: 58px;
text-transform: none;

Heading 1

font-family: Roboto, sans-serif;
text-transform: none;
color: #333;
font-weight: 300;
font-size: 30px;

Heading 2

font-family: Roboto, sans-serif;
text-transform: none;
color: #333;
font-weight: 300;
font-size: 26px;

Heading 3

font-family: Roboto, sans-serif;
text-transform: none;
color: #333;
font-weight: 900;
font-size: 36px;

Heading 4

font-family: Roboto, sans-serif;
text-transform: none;
color: #333;
font-weight: 900;
font-size: 26px;
Heading 5
font-family: Roboto, sans-serif;
text-transform: none;
color: #333;
font-weight: 900;
font-size: 16px;
margin: 0;

Paragraphs

paragraph (sans-serif) – We sat down with Dr. Audrey Lobo-Pulo to unpack how open source models are being used in government to inform public policy. Dr Lobo-Pulo is the founder of Phoensight and a policy modelling enthusiast with considerable expertise in the Australian public service. She also has a strong interest in how data sharing arrangements between government, the private sector and not-for-profits may contribute to better social outcomes for citizens.

font-family: Roboto, sans-serif;
text-transform: none;
color: #333333;
font-weight: 300;
font-size: 20px;

Links

links

Links will be red (#ec3348) on hover/active/focus

Links in the footer will be white and underlined, and black on hover

font-family: Roboto, sans-serif;
text-transform: none;
color: #000000;
font-weight: 300;
font-size: 20px;
color: #00c1db;
box-shadow: none;

Buttons

Button text is always sentence case; first letter capitalized and all other words lowercase.

Button block, Styles: outline, Advanced: btn-border-blue.
Also a button with a white border and white text (add class btn-border-white under Advanced)
All button text and borders/background become red (#ec3348) on hover/focus/active
Buttons alongside images are aligned left/right against the edge of the screen (not centered)

border: 2px solid #00c1db;
text-transform: uppercase;
border-radius: 0;
font-size: 16px;
padding: 10px 20px;
font-weight: 900;
margin-right: 5px;
box-shadow: none;
line-height: 28px;
color: #00c1db;
background-color: rgba(0,0,0,0);

Button block, Styles: squared, Advanced: btn-solid-blue.

border: 2px solid #00c1db;
border-radius: 0;
font-size: 16px;
padding: 10px 20px;
font-weight: 900;
margin-right: 5px;
box-shadow: none;
line-height: 28px;
color: #ffffff;
background-color: #00c1db;

Unordered List

  • bulleted list – We sat down with Dr. Audrey Lobo-Pulo to unpack how open source models are being used in government to inform public policy. Dr Lobo-Pulo is the founder of Phoensight and a policy modelling enthusiast with considerable expertise in the Australian public service. She also has a strong interest in how data sharing arrangements between government, the private sector and not-for-profits may contribute to better social outcomes for citizens.

Numbered List

  1. numbered list – We sat down with Dr. Audrey Lobo-Pulo to unpack how open source models are being used in government to inform public policy. Dr Lobo-Pulo is the founder of Phoensight and a policy modelling enthusiast with considerable expertise in the Australian public service. She also has a strong interest in how data sharing arrangements between government, the private sector and not-for-profits may contribute to better social outcomes for citizens.

Quote

“Quote – Styles: regular. I was here and pitched Onavo, my company, we picked up one of the top prizes and later we get picked up by Facebook. It’s awesome.”

– citation

Pullquote

“Pullquote – Styles: regular.
I was here and pitched Onavo, my company, we picked up one of the top prizes and later we get picked up by Facebook. It’s awesome. ”

– citation

Table

Table
Styles:regular
8:00 AM – Breakfast
9:00 AM – From idea to business model
10:30 AM – How to find your business model

Columns

AcceleratorFest is a specialized event, designed for the directors, program managers and community managers who drive acceleration programs across the globe.

Only open to the directors, managing directors, and community managers of accelerator programs.

Table
Styles:regular
8:00 AM – Breakfast
9:00 AM – From idea to business model
10:30 AM – How to find your business model

Media & Text

Harper Reed presents in a Canadian jacket

The morning is packed with practical content, and the afternoon connects accelerator recruiters with promising startups.


Separator

wide line


Page widths

full-width: 1000px


Colours

#00c1db – FWD50 blue (.bkgd-blue)

#ec3348 – FWD50 red (.bkgd-red)

#333333 – Font

#000000 – Black e.g. footer link hover


@media Style Breaks

‘Desktop’ > 767px

‘Tablet’ – 767px – 500px

‘Mobile’ < 500px


Image Sizes

Homepage banner – 1200 x 930px

Page banners (with text overlay) – 1200 x 240px
e.g. https://2019.fwd50.com/about/