Guide de style

Typography

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

Font family: "Yellowtail", cursive | Font style options: Normal | Font weight: 300

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 - "Catamaran" .heading-7xl .heading-6xl .heading-5xl .heading-4xl .heading-3xl .heading-2xl .heading-xl

Font family: "Catamaran", serif | Font style options: Normal | Font weight: 300

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 - "Red Hat Display" .body-lg .body-base .body-sm .body-xs .body-2xs
Body Font Modifiers: .body-uppercase .font-medium .font-semibold

Font family: "Red Hat Display", 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%)
 
Light Grey
#fafafa
rgb(250, 250, 250)
hsl(0, 0%, 98%)
 
Dark Grey
#505050
rgb(248, 243, 239)
hsl(27, 39%, 95%)
 
Normal Blue
#0057ff
rgb(0, 87, 255)
hsl(220, 100%, 50%)
 
Dark Blue
#0025ff
rgb(0, 37, 255)
hsl(231, 100%, 50%)
 
Mid Blue
#1968ff
rgb(25, 104, 255)
hsl(219, 100%, 55%)
 
Surface Blue
#ecfaff
rgb(236, 250, 255)
hsl(196, 100%, 96%)
 
Surface Blue 2
#0087ff
rgb(0, 135, 255)
hsl(208, 100%, 50%)
 
Light Blue
#b2cdff
rgb(178, 205, 255)
hsl(219, 100%, 85%)
 
Light Blue 2
#e6f0ff
rgb(202, 56, 0)
hsl(17, 100%, 40%)
 
Light Blue 3
#b2eaff
rgb(178, 234, 255)
hsl(196, 100%, 85%)
 
Cerise
#ff2454
rgb(255, 36, 84)
hsl(347, 100%, 57%)
 
Yellow
#ffd600
rgb(255, 214, 0)
hsl(50, 100%, 50%)
 
Green
#22be2c
rgb(34, 190, 44)
hsl(124, 70%, 44%)
 
Light Green
rgb(240 253 244)
rgb(240, 253, 244)
hsl(138, 76%, 97%)
 
Error Dark Red
#c70000
rgb(199, 0, 0)
hsl(0, 100%, 39%)

Brand colour Grey shades palette

 
Grey 100
#eeeeee
rgb(238, 238, 238)
hsl(0, 0%, 93%)
 
Grey 200
#dcdcdc
rgb(220, 220, 220)
hsl(0, 0%, 86%)
 
Grey 300
#b9b9b9
rgb(185, 185, 185)
hsl(0, 0%, 73%)
 
Grey 400
#7c7c7c
rgb(124, 124, 124)
hsl(0, 0%, 49%)

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
Primary button disabled 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

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

Secondary button with icon .button .button--secondary

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

Button - icon only .button .button--tertiary

Small button .button .button--small

Small primary button Small primary button Small primary button Small primary button
Small primary button with icon Small primary button with icon Small primary button with icon Small primary button with icon Small primary button with icon Small primary button with icon Small primary button with icon Small primary button with icon Small primary button with icon

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

Full width primary button Full width primary button Full width primary button Full width primary 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