Skip to content

Style Guidelines

samanthamhill edited this page Feb 18, 2022 · 12 revisions

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

Main Blue - Logo Blue
Screen Shot 2022-02-16 at 8 26 15 PM
RGB: 119, 162, 202
Hex: 77A2CA

Medium Blue - Dark Buttons
Screen Shot 2022-02-16 at 8 30 45 PM
RGB: 57, 117, 174
Hex: 3975AE

Light Blue - Light Buttons
Screen Shot 2022-02-16 at 8 33 32 PM
RGB: 227, 237, 245
Hex: E3EDf5

Dark Blue - Text on Buttons
Screen Shot 2022-02-16 at 8 28 20 PM
RBG: 61, 104, 144
Hex: 3D6890

Light Grey - Empty cells of a form
Screen Shot 2022-02-17 at 7 52 11 PM
RGB: 200, 200, 200
Hex: C8C8C8

Medium Grey - Settings and profile icons
Screen Shot 2022-02-16 at 8 38 16 PM
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
Logo_White

Black Logo
Logo_Black

Blue Logo
Logo_Black

Clone this wiki locally