Digital Style Guide

1 Introduction

This website is built with Jekyll using Bootstrap 4. Design patterns and components from these libraries should be understood when the website is being updated so that they can be effectively implemented when needed.

Wherever feasible we have allowed content to be written in Markdown, especially for content such as documentation and news, that we hope will be team supported. There are pages requiring complex formatting however where we have used HTML markup.

This website is hosted on Github pages, the master repository can be viewed here.

3 Colours

Opentrack have a colour palette that should be referred to whenever creating new resources and assets, this consists of 4 main colours:

3.1 Brand palette

Track Red #C63527 (Primary colour)

Track Black #101820

Track Blue #0274BD

Light Steel #C7D4DD

3.2 Background colours

We use tints of the main colours throughout the website as background panels. To implement use the classes .tinted, .bg-steel, .bg-blue, .bg-black and .bg-red on containing elements.

browser-dark

4 Devices

Opentrack stylesheets and digital assets support displaying product screenshots directly in visuals of key devices. Currently we support Smartphone, tablet and browser screenshots which are easily displayed on the website by using the standard code template.

4.1 Screenshot dimensions

For best presentation it is recommended that all screenshots conform to the advised aspect ratio / sizes. The dimensions given are minimum requirements, however it is recommended to double these dimensions to maintain crisp display on retina devices.

  1. Mobile phone: 192px x 343px
  2. Tablet: 430px x 322px
  3. Browser: 728px x 485px

These devices can be specified to display on the left or right side or in the middle of the page. They will automatically resize responsively with side images repositioning into the centre of the page on smaller screens.

iPad Black

2 Typography

2.1 Typefaces

Main typeface we use is Proxima Soft, this is a premium typeface by Mark Simonson available through Typekit and MyFonts.

If creating documentation or apps where this typeface is not available then you may use the similar Google font Nunito.

2.3 Headings

The templates support the full range of header style:

Heading 1 is for main page title

Heading 2 is used to title page sections

Heading 3 is for section subtitles

Heading 4 is good for small blocks of content

These headings can all be written in markdown, and if it is desired to pull a number from a h2 tag as can be seen in the section titles in this page, all that is necessary is to wrap the number in <strong> tags. eg:

  • html : <h2><strong>2</strong> Typography</h2>
  • markdown : ## __2__ Typography

2.4 Blockquotes

Blockquotes are used on the website and styled to highlight the text, they pair well with p and h3 tags and you should include the quotation marks as these are offset on the first line. If writing quotes in Markdown, it is necessary to include the source of the quote on a new line within <small> html tags, for example:

> “This is a quote automatically paragraphed from Markdown”  
    <small>Source of the quote</small>

“This is a quote automatically paragraphed from Markdown”
Source of the quote