Style Guide


Headings

Headings are always sentence case; first letter capitalized and all other words lowercase.

Page and post titles (H1)

font-family: "IBM Plex Sans", sans-serif;
background: linear-gradient(to right,#342e94,#8b178c,#d80000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 48px;
text-transform: none;
letter-spacing: 0;

Landing page section headers (H1)

font-family: "IBM Plex Sans", sans-serif;
background: linear-gradient(to right,#342e94,#8b178c,#d80000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 36px;

Heading 1

font-family: "IBM Plex Sans", sans-serif;
background: linear-gradient(to right,#342e94,#8b178c,#d80000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 30px;

Heading 2

font-family: "IBM Plex Sans", sans-serif;
background: linear-gradient(to right,#fbe100,#f17d1c,#d80000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 30px;

Heading 3

font-family: "IBM Plex Sans", sans-serif;
background: linear-gradient(to right,#2eaee2,#342e94);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
font-size: 22px;

Heading 4

font-family: "IBM Plex Sans", sans-serif;
color: #000000;
font-weight: 400;
font-size: 20px;
Heading 5
font-family: "IBM Plex Sans", sans-serif;
color: #000000;
font-weight: 300;
font-size: 16px;
margin: 0;
text-transform: none;

Paragraphs (body text)

Paragraph text is always sentence case; first letter capitalized and all other words lowercase. 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: 'Arial', sans-serif;
color: #000000;
font-weight: 400;
font-size: 18px;

Links

links

Links will be light blue (#2eaee2) and dark blue (#00258c) on hover/active/focus.

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

font-family: 'Arial', sans-serif;
color: #2eaee2;
font-weight: 400;
font-size: 18px;
box-shadow: none;
text-decoration: none;

Buttons

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

Block default style – Fill.

All button background become yellow/red (#fbe100 ->#f17d1c -> #d80000;) on hover/focus/active.

Buttons alongside images are aligned left/right against the edge of the screen (not centered).

border: none;
border-radius: 0;
font-size: 18px;
padding: 10px 20px;
font-weight: 700;
margin-right: 5px;
box-shadow: none;
line-height: 28px;
color: #ffffff;
background: linear-gradient(to right,#342e94,#8b178c,#d80000);

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
font-family: Arial, sans-serif;
color: #000000;
font-weight: 400;
font-size: 24px;
font-style: italic;

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
font-family: "IBM Plex Sans", sans-serif;
color: #000000;
font-weight: 500;
font-size: 24px;
font-style: italic;