1300 462 887

Style Guide

This page is the style guide for the Endeavour website and orbital Endeavour web assets.

Overview

All font on the Endeavour website keeps a lineheight of 24px. The only exception to this rule is Heading 1, which uses at line height which matches the font size at 28px; Headings 1 to 3 (and some feature elements) use the font family Bitter from Google Fonts. All other text uses the font family Open Sans from Google Fonts. All Open Sans text uses the font weight 300 Thin across the website. 400 Regular is used as the relative bold and 600 Bold is used as the super bold font weight. All inline hyperlinks - whether light on dark or dark on light - use the hex color code: #6FAA20 which is a lighter tint of the branded Endeavour Dark Green.

Spacing - Paddings/Margins

Typically have 24px padding. All articles and related items are spaced by 24px, either padding or margin. All line paragraph breaks are followed by 12px padding or margin. All sections are seperated by at 48px gap.

Colours

  • Inline text hyperlink colour: #6FAA20
  • Endeavour Dark Green: #4F8A10
  • Endeavour Light Green: #9CCB3B
  • Endeavour Burnt Orange (highlight color): #DF7401

Headings

Heading 1 - <h1>

Heading 2 - <h2>

Heading 3 - <h3>

Heading 4 - <h4>

Paragraphs

This is a Focus Paragraph. Traditionally, it is known as the lede. The focus paragraph is an optional style for the leading or focus paragraph of a page.

This paragraph and the one below it are using the Google font: Open Sans. The text is 14px and the line-height is 24px. The font weight has a thin weight utilising only the 300 Thin weight font for standard text and the 400 Regular for bold. The below paragraph uses Corporate Ipsum so don't be confused by all the buzzwords.

Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

Buttons

There are 3 button types: small, medium and large. All buttons have the save height but utilise different font-sizes to increase impact. All buttons have white text with the background colour typically being either Endeavour Light Green or Endeavour Burnt Orange with rare uses of the Endeavour Dark Green used only to differeciate buttons which require attention but don't need the emphasis of the Burnt Orange. All buttons also use a soft colour gradient from top to bottom and have a 4px border radius on each corner.

Dark Green Button

Light Green Button

Burnt Orange Button


This page was last updated on Monday 12 September 2016.