Style Guide


Headings

Page and Post Titles

font-family: Roboto, sans-serif;
color: #eb1773;
font-weight: 800;
font-size: 58px;
text-transform: none;

Heading 1

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

Heading 2

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

Heading 3

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

Heading 4

font-family: Roboto, sans-serif;
text-transform: none;
color: #000000;
font-weight: 900;
font-size: 26px;
Heading 5
font-family: Roboto, sans-serif;
text-transform: none;
color: #000000;
font-weight: 900;
font-size: 16px;
color: #eb1773;
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: #000000;
font-weight: 300;
font-size: 20px;

Links

links

Links in the footer will be grey (rgba(255, 255, 255, 0.6))
Links will be a lighter pink (#EE92BA) on hover/active/focus

font-family: Roboto, sans-serif;
text-transform: none;
color: #000000;
font-weight: 300;
font-size: 20px;
color: #eb1773;
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-pink.
Also a button with a white border and white text (add class btn-border-white under Advanced)
All button text and borders/background become light pink (#EE92BA) on hover/focus/active
Buttons alongside images are aligned left/right against the edge of the screen (not centered)

border: 2px solid #eb1773;
border-radius: 0;
font-size: 16px;
padding: 2px 15px;
font-weight: 900;
margin-right: 5px;
box-shadow: none;
line-height: 28px;
color: #eb1773;
background-color: rgba(0,0,0,0);

Button block, Styles: squared, Advanced: “btn-solid-pink”.

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

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

Startupfest pink logo

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


Separator

wide line


Cover Image Quotes


“There really isn’t another event like this.”
– Margaret Dawson,
Global Product Marketing at Red Hat

Quote
max-width: 720px;
font-size: 36px;
font-weight: 900;
line-height: 1.25
color: #ffffff;
Citation
margin: 40px 0 60px;
font-size: 20px;
line-height: 28px;
font-weight: 300;
color: #ffffff;

Page widths

full-width: 1260px

full-width: 1150px

narrower (speakers, blog posts): 740px


Colours

#EB1773 – startupfest pink (.bkgd-pink)

#EE92BA – hover pink

#EEEEEE – Full-width light grey block (.bkgd-grey)

#FEFEFE – Full-width mid grey block (.bkgd-mid-grey )

#C1C1C1 – Full-width dark grey block (.bkgd-dk-grey )

#4AB7AE – Full-width aqua block (.bkgd-aqua)

#353535 – Dark grey e.g. footer, search icon, post dates, menu

#F2F2F2 – Light grey text e.g. cover image text

#0A0A0A – Near black e.g. sponsor footer


@media Style Breaks

‘Desktop’ > 767px

‘Tablet’ – 767px – 500px

‘Mobile’ < 500px


Image Sizes

Page banners (with text overlay) – 2000 x 1500px
e.g. sf.wpstagecoach.com/tent-village


Homepage Speakers (screenshot)

Name: h4 in pink
Job title and Organization: paragraph
Images: grid x4, black and white with colour on hover

Speakers page (screenshot)

Name: h4 in pink
Job title and Organization: paragraph
Images: grid x3, black and white with colour on hover OR color - TBD

Blog Posts (screenshot )

Name: h4 in pink
Date: 14px and grey (same as footer)
Images: grid x2

Testimonials (screenshot)

Name: h4 in white
Date: 14px and white (same size as footer)
Paragraph: p in pink
Images: grid x3
Buttons: standard, solid white, pink text, light pink on hover