The Colour Specifications

Colour palette to provide a strong and clear direction.

Red

Hex #EE3536

White

Hex #FFFFFF

Black

Hex #000000

Cool Grey

Hex #F6F6F5

Calm Grey

Hex #2D2E2C

Dark Navy

Hex #003B4D

Green

Hex #8AC500

Font

We use Open Sans for almost all of our communications. To ensure that our pieces are clear and easy to follow,
we use font weight (as well as other tools such as size and color) to create a clear hierarchy of information.

Approved type weights

Type hierarchy and layout principles

A consistent approach to type hierarchy and layout is important for creating engaging, easy-to-read communications. This sample web page at right presents a well-designed type hierarchy. Use it as a guide, and follow the principles below, when working with our type

Type usage rules

Here are examples of what to do and what not to do to help us maintain the integrity of our typography.

Photography - the do’s

We always ensure that the image feels relatable and works with the message to tell an evocative story and create an emotional connection.

To ensure there is diversity in our imagery, maintaining the core brand pillars of BetOnline, we use a mixture of friendly, new-age and stylish candid photography - to flat colored background imagery, that works well to convey the message in a strap-line or wordmark.

Photography - the dont’s

We do not want to convey the wrong message or offend our customers, so some styles of imagery must never be used.

Staying away from the following imagery:

  • Seedy / Sexy
  • High Roller Lifestyles
  • Dated or obvious industry imagery (Cards and Chips)
  • Over exposed imagery
Core call to actions - Global CTA
<a class="btn btn-submit green">
  <--ACQUISITION CTA-->
</a>

<a class="btn btn-submit red">
  <--PRIMARY CTA-->
</a>

<a class="btn btn-submit white">
  <--SECONDARY CTA-->
</a>

.btn-submit { width: 100%; font-weight: 500; padding: 15px; margin-bottom: 10px; margin-top: 0; text-transform: uppercase; border-radius: 6px; display: inline-block; font-size: 20px; text-align: center; } 
.btn.green { background: #8AC500; color: #FFFFFF; border: 2px solid #8AC500; }
.btn.green:hover { background: #FFFFFF; color: #8AC500; border: 2px solid #8AC500; }
.btn.red { color:#FFFFFF; background: #EE3536; border: 2px solid #EE3536; }
.btn.red:hover { color:#EE3536; background: #FFFFFF; border: 2px solid #EE3536; }
.btn.white { background: #FFFFFF; color: #EE3536; border: 2px solid #EE3536; }
.btn.white:hover { color:#FFFFFF; background: #EE3536; border: 2px solid #EE3536; }