The simulator has been produced by a group of software engineers at Bloomberg in association with First UK. We equip young people with the technical knowledge knowhow and soft skills to succeed in engineering.

Logos

We should use our master logo in every possible situation to maintain consistency. When using our master logo isn’t possible, use one our approved alternatives.

Download logos

Clear space

NB: To ensure legibility, keep a minimum clear space around our logo. This space should be at least 33 of the height of our logo mark.

Brand Colours

We have a considered pallete to be used throught the branding and applications.

Brand Colours

Primary Red: Hex code #frfrfr

Dark Blue: Hex code #frfrfr

Blue: Hex code #frfrfr

Green: Hex code #frfrfr

Button Colours

Primary Red: Hex code #frfrfr

Light Red: Hex code #frfrfr

Dark Blue: Hex code #frfrfr

Mid Blue: Hex code #frfrfr

Light Blue: Hex code #frfrfr

Primary Red: Hex code #frfrfr

Typeface

We use the Adobe Fonts Gesta and IBM Plex Mono for body text and titles.

The fonts are activated via a link or import css:

Headlines

Standard html heading levels and two types of subhead/markers .

Headline level one

Guidance & Resources

View code

<h1>…</h1>

Headline level two

Simulator lesson pack

View code

<h2>…</h2>

Headline level three

Challenge A

View code

<h3>…</h3>

Headline level four

Each Lesson is provided with:

View code

<h4>…</h4>

Sub headings/ Markers

<Lesson 1>

Lesson 1

View code

<class="marker-blue"> <class="marker-red">

Paragraphs

Body Text

This is our body text. Officiis atque eius autem deserunt ex ipsa accusantium. Delectus asperiores possimus. Quo nisi voluptate soluta ex. Recusandae ab quos rerum quia dolor ab iusto sit explicabo. Perspiciatis omnis nihil in. Est sit quo voluptates at.

Buttons

We use button shapes to distinguish a variety of calls to actions and we’ve designed these shapes to be easily recognisable and visually appealing.

Primary buttons
Secondary buttons
Tertiary buttons

Primary buttons

Where possible use only one primary action button per content region or on one page. Don’t choose a different colour without considering the reason why that button has been included.

Primary Button

This is an link button

View code

<button class="btn--reset btn btn-primary">…</button> <a href="" class="btn btn-primary">…</a>

Primary Blue Button

This is an link button

View code

<button class="btn--reset btn btn-primary--blue">…</button> <a href="" class="btn btn-primary--blue">…</a>

Secondary buttons

Buttons with an inline svg icon.

Download Resources

View code

<button class="btn--reset btn btn-secondary">…</button>

Tertiary button

Go to Lesson

View code

<button class="btn--reset btn btn-secondary">…</button>

Cards

The Lesson Cards use an inline SVG image with names zones of Head, Body and Legs, each SVG also has a white merged version of each part named head-bg, bogy-bg and legs-bg.

We target the visibility of these parts by passing a data attribute ( data-progress="0") of 1, 2 or 3.