Style Guidelines

Style guidelines for the Tandem application

Font

Montserrat, available for download here.

Font Size Conventions

Heading 1 : 22pt
Heading 2 : 18pt
Heading 3 : 14pt
Body : 12 pt
Small Script : 10pt (ex: text to confirm username is available on registration page)

---

Colours

Light Blue

RGB: 227, 237, 245
Hex: E3EDf5
Uses: Light buttons

Pale Blue

RBG: 192, 218, 240
HEX: C0DAF0
Uses: Button hover

Main Blue

RGB: 119, 162, 202
Hex: 77A2CA
Uses: logos, banners

Medium Blue

RGB: 57, 117, 174
Hex: 3975AE
Uses: Dark buttons

Dark Blue

RBG: 61, 104, 144
Hex: 3D6890
Uses: Text on buttons

Deep Blue

RBG: 8, 41, 70
Hex: 082946
Uses: Text on light backgrounds

Light Periwinkle

RBG: 147, 148, 212
Hex: 9394D4
Uses:

Periwinkle

RBG: 102, 103, 171
Hex: 6667AB
Uses:

Light Mint

RBG:
Hex: DAFFED
Uses:

Mint

RGB:
Hex: B5F0D3
Uses:

Green

RBG: 173, 252, 146
Hex: ADFC92
Uses: Accent colour for icons and text on light backgrounds

Medium Green

RGB: 140, 221, 112
Hex: 8CDD70
Uses: Accent colour for icons and text on dark backgrounds

Light Grey - Empty cells of a form

RGB: 200, 200, 200
Hex: C8C8C8

Medium Grey - Settings and profile icons

RGB: 128, 128, 128
Hex: 808080

Black and White True black and white can be used. Black is used for text. White is used for backgrounds and text on blue background darker that light blue.

---

Buttons

Use rounded edged buttons.

Logo

Derived from the text TANDM, modelled to look like a tandem bike.

White Logo

Black Logo

Main Blue Logo

Dark Blue Logo