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.

4 Typography

4.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.

4.2 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

4.3 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

iPad Black

5 Images

5.1 Screenshots

There is built in support to show screens within a pre-styled device frame, here is an example of a tablet.

Find out about size and markup requirements in the devices section below.

5.2 Regular images

Wrapping the <img> within a <figure> tag will automatically make that image responsive and bordered.

podium kids
Fig.1 - Competitors on a podium.

5.3 Captions

Use the <figcaption> tag within the <figure> tag, at the end just before the closing </figure>, to label your images.

Device image figures can be captioned as normal.

6 Devices

Opentrack stylesheets and digital assets support displaying product screenshots directly in visuals of key devices.

Currently we support smartphone portrait (.phone-demo), smartphone landscape (.phone-landscape-demo), tablet landscape (.tablet-demo) and browser (.browser-demo) screenshots which are easily displayed on the website by using the standard code template.

6.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 (optimum 384px x 686px)
  2. Tablet: 430px x 322px (optimum 860px x 644px)
  3. Browser: 728px x 485px (optimum 1456px x 970px)
  4. Mobile phone landscape: 728px x 357px (optimum 1456px x 714px)
iPad Black

6.2 Positioning

These devices can be specified to display on the left or right side or in the middle of the page.

To place the device to the side (only works on larger displays) wrap the containing <figure> tag in a div with class="side-image side-image-right" or class="side-image side-image-left".

The devices images are responsive and will resize automatically with side images repositioning into the centre of the page on smaller screens.

iPad Black
It is important to ensure screen images are the correct aspect ratio.

6.3 Animation

We use the Animate On Scroll library to bring elements on the page to life.

To affect how the device enters the screen include a data-aos attribute with a value fade-up, fade-left or fade-right. These effects can be used on any block level element.

This smartphone figure fades up when scrolled into view.