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

paleBlue: "#C0DAF0", mainBlue: "#77A2CA", medBlue: "#3975AE", darkBlue: "#3D6890", deepBlue: "#082946", lightPeri: "#9394D4", periwinkle: "#6667AB", lightMint: "#DAFFED", mint: "#B5F0D3", green: "#ADFC92", medGreen: "#8CDD70",

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

Pale Blue

RBG: 192, 218, 240 HEX: C0DAF0

Main Blue - Logo Blue

RGB: 119, 162, 202
Hex: 77A2CA

Medium Blue - Dark Buttons

RGB: 57, 117, 174
Hex: 3975AE

Light Blue - Light Buttons

RGB: 227, 237, 245
Hex: E3EDf5

Dark Blue - Text on Buttons

RBG: 61, 104, 144
Hex: 3D6890

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