Style Guide

Typography

Display Font - "Handsome Pro" .display-7xl .display-6xl .display-5xl .display-4xl .display-3xl .display-2xl .display-xl

Font family: "Handsome Pro", cursive | Font style options: Normal | Font weight: 400

Display 7xl (Desktop: Font Size: 64px / Line Height: 1 / Letter Spacing: 0 | Mobile: Font Size: 48px / Line Height: 1 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Display 6xl (Desktop: Font Size: 56px / Line Height: 1 / Letter Spacing: 0 | Mobile: Font Size: 40px / Line Height: 1 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Display 5xl (Desktop: Font Size: 48px / Line Height: 1 / Letter Spacing: 0 | Mobile: Font Size: 32px / Line Height: 1 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Display 4xl (Desktop: Font Size: 40px / Line Height: 1 / Letter Spacing: 0 | Mobile: Font Size: 24px / Line Height: 1 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Display 3xl (Desktop: Font Size: 32px / Line Height: 1 / Letter Spacing: 0 | Mobile: Font Size: 24px / Line Height: 1 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Display 2xl (Desktop: Font Size: 24px / Line Height: 1 / Letter Spacing: 0 | Mobile: Font Size: 18px / Line Height: 1 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Display xl (Desktop: Font Size: 20px / Line Height: 1 / Letter Spacing: 0 | Mobile: Font Size: 16px / Line Height: 1 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Heading Font - "Romie" .heading-7xl .heading-6xl .heading-5xl .heading-4xl .heading-3xl .heading-2xl .heading-xl

Font family: "Romie", serif | Font style options: Normal | Font weight: 400

Heading 7xl (Desktop: Font Size: 64px / Line Height: 1.4 (1.2 larger screens) / Letter Spacing: 0 | Mobile: Font Size: 48px / Line Height: 1.4 (1.2 larger screens) / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Heading 6xl (Desktop: Font Size: 56px / Line Height: 1.4 (1.2 larger screens) / Letter Spacing: 0 | Mobile: Font Size: 40px / Line Height: 1.4 (1.2 larger screens) / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Heading 5xl (Desktop: Font Size: 48px / Line Height: 1.4 (1.2 larger screens) / Letter Spacing: 0 | Mobile: Font Size: 32px / Line Height: 1.4 (1.2 larger screens) / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Heading 4xl (Desktop: Font Size: 40px / Line Height: 1.4 / Letter Spacing: 0 | Mobile: Font Size: 24px / Line Height: 1.4 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Heading 3xl (Desktop: Font Size: 32px / Line Height: 1.4 / Letter Spacing: 0 | Mobile: Font Size: 24px / Line Height: 1.4 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Heading 2xl (Desktop: Font Size: 24px / Line Height: 1.4 / Letter Spacing: 0 | Mobile: Font Size: 18px / Line Height: 1.4 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Heading xl (Desktop: Font Size: 20px / Line Height: 1.4 / Letter Spacing: 0 | Mobile: Font Size: 16px / Line Height: 1.4 / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Body Font - "Figtree" .body-lg .body-base .body-sm .body-xs .body-2xs
Body Font Modifiers: .body-uppercase .font-medium .font-semibold

Font family: "Figtree", sans-serif | Font style options: Normal, Italic | Font weight: 400, 500, 600

Body Lg (Desktop: Font Size: 18px / Line Height: 140% / Letter Spacing: 0 | Mobile: Font Size: 16px / Line Height: 140% / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Body Lg Uppercase (Desktop: Font Size: 18px / Line Height: 140% / Letter Spacing: 6px | Mobile: Font Size: 16px / Line Height: 140% / Letter Spacing: 4px)The quick brown fox jumps over the lazy dog

Body Base (Desktop: Font Size: 16px / Line Height: 140% / Letter Spacing: 0 | Mobile: Font Size: 14px / Line Height: 140% / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Body Base Uppercase (Desktop: Font Size: 16px / Line Height: 140% / Letter Spacing: 6px | Mobile: Font Size: 14px / Line Height: 140% / Letter Spacing: 4px)The quick brown fox jumps over the lazy dog

Body Sm (Desktop: Font Size: 14px / Line Height: 140% / Letter Spacing: 0 | Mobile: Font Size: 12px / Line Height: 140% / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Body Sm Uppercase (Desktop: Font Size: 14px / Line Height: 140% / Letter Spacing: 6px | Mobile: Font Size: 12px / Line Height: 140% / Letter Spacing: 4px)The quick brown fox jumps over the lazy dog

Body Xs (Desktop: Font Size: 12px / Line Height: 140% / Letter Spacing: 0 | Mobile: Font Size: 10px / Line Height: 140% / Letter Spacing: 0)The quick brown fox jumps over the lazy dog

Body Xs Uppercase (Desktop: Font Size: 12px / Line Height: 140% / Letter Spacing: 6px | Mobile: Font Size: 10px / Line Height: 140% / Letter Spacing: 4px)The quick brown fox jumps over the lazy dog

Body 2xs Uppercase (Desktop: Font Size: 10px / Line Height: 140% / Letter Spacing: 6px | Mobile: Font Size: 10px / Line Height: 140% / Letter Spacing: 4px)The quick brown fox jumps over the lazy dog

Colours

Brand colour palette

 
Black
#171717
rgb(23, 23, 23)
hsl(0, 0%, 9%)
 
White
#FFFFFF
rgb(255, 255, 255)
hsl(0, 0%, 100%)
 
Neutral
#F8F3EF
rgb(248, 243, 239)
hsl(27, 39%, 95%)
 
Orange
#CA3800
rgb(202, 56, 0)
hsl(17, 100%, 40%)

Brand tint colour palette

 
Orange Tint
#FFC1A8
rgb(255, 193, 168)
hsl(17, 100%, 83%)
 
Neutral Dark
#DDD2C9
rgb(221, 210, 201)
hsl(27, 23%, 83%)
 
Neutral Tint
#FBF9F7
rgb(251, 249, 247)
hsl(30, 33%, 98%)
 
Mulberry
#5D2E55
rgb(93, 46, 85)
hsl(310, 34%, 27%)
 
Mulberry Tint
#DBD0D8
rgb(219, 208, 216)
hsl(316, 13%, 84%)
 
Teal
#2A4E50
rgb(42, 78, 80)
hsl(183, 31%, 24%)
 
Teal Tint
#B5D3D4
rgb(181, 211, 212)
hsl(182, 26%, 77%)

Functional colours

 
Success Dark
#2A9054
rgb(42, 144, 84)
hsl(145, 55%, 36%)
 
Success Tint
#CCFFE1
rgb(204, 255, 225)
hsl(145, 100%, 90%)
 
Error Dark
#D62B1A
rgb(214, 43, 26)
hsl(5, 78%, 47%)
 
Error Tint
#FFD1CC
rgb(255, 209, 204)
hsl(6, 100%, 90%)

Buttons

Primary button .button .button--primary .button--orange .button--black .button--white

Contract checker:Primary - Orange: AA ✓

Contract checker:Primary - Black: AAA ✓ AA ✓

Contract checker:Primary - White: AAA ✓ AA ✓

Primary button Primary button Primary button
Primary button disabled Primary button disabled Primary button disabled

Secondary button .button .button--secondary .button--black .button--white

Secondary button Secondary button
Secondary button disabled Secondary button disabled

Tertiary button .button .button--tertiary .button--black .button--white

Tertiary button Tertiary button
Tertiary button disabled Tertiary button disabled

Primary button with icon(s) .button .button--primary

Primary button with icon Primary button with icon Primary button with icon Primary button with icon Primary button with icon Primary button with icon Primary button with icon Primary button with icon Primary button with icon

Secondary button with icon .button .button--secondary

Secondary button with icon Secondary button with icon Secondary button with icon Secondary button with icon Secondary button with icon Secondary button with icon

Tertiary button with icon .button .button--tertiary

Tertiary button with icon Tertiary button with icon
Tertiary button with icon Tertiary button with icon
Tertiary button with icon Tertiary button with icon

Button - icon only .button .button--tertiary

Small button .button .button--small

Small primary button Small secondary button Small tertiary button
Small primary button with icon Small secondary button with icon Small tertiary button with icon

Full width button .button .button--full-width

Full width primary button Full width secondary button Full width tertiary button

Rich Text Typography

Paragraph

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

Said no one, ever.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Inline elements

This is a text link.

Strong is used to indicate strong importance.

This text has added emphasis.

The b element is stylistically different text from normal text, without any special importance.

The i element is text that is offset from the normal text.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

This text is deleted and This text is inserted.

This text has a strikethrough.

Superscript®.

Subscript for things like H2O.

This small text is small for for fine print, etc.

Abbreviation: HTML

This text is a short inline quotation.

This is a citation.

The dfn element indicates a definition.

The mark element indicates a highlight.

The variable element, such as x = y.

The time element:

Horizontal rules

Tabular data

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Form elements

Input fields

Input fields

Use clear and concise information for best results.

Select menus

Select menus

Checkboxes

Checkboxes

Radio buttons

Radio buttons

Textareas

Textareas

HTML5 inputs

HTML5 inputs

Action buttons

Action buttons