Style Guide

Colours, type, buttons, and spacing used across the site.

Colors

Base colours used across all pages.

Dark#08070C
Gold#FEBD1A
Gray#5A5A5A
White#FFFFFF
Off White#F8F8F8
Ink#0F0A01

Typography

Hanken Grotesk, light and regular.

Display 8xl · 90px

Desert Route

Display 6xl · 56px

Desert Route

Display 5xl · 48px

Desert Route

Display 4xl · 40px

Desert Route

Display 3xl · 32px

Desert Route

Display 2xl · 24px

Desert Route

Display xl · 20px

Desert Route

Text Sizes

Text large · 18px

Tours leave at set times and run in small groups of up to twelve people.

Text regular · 16px

Tours leave at set times and run in small groups of up to twelve people.

Text small · 14px

Tours leave at set times and run in small groups of up to twelve people.

Buttons

Primary ButtonText Button

Text Colors

Primary

Ink #0F0A01 on off white

Secondary

Gray #5A5A5A on off white

On dark

White on #08070C

Other HTML Tags

Paragraph

Sample text for a paragraph. Two or three lines show the line height and the colour.

Ordered list
  1. First step
  2. Second step
  3. Third step

Utility Classes

Spacing and layout helpers.

padding-global · 70pxcontainer-large · 1280pxcontainer-medium · 1065pxsection · 128pxradius-m · 8pxradius-xl · 12pxgap-xl · 24pxgap-l · 16pxcard-padding · 24pxhide-tablethide-mobilesr-only

Rich Text 1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text for long pages such as tour details and blog posts. Line length stays under eighty characters so the text is easy to follow from one line to the next.

Second paragraph with a link to the blog and bold text inside it.

  • List item one
  • List item two
  • List item three
Block quote for a short line from a guide or a guest.
Sample image

Rich Text 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text for long pages such as tour details and blog posts. Line length stays under eighty characters so the text is easy to follow from one line to the next.

Second paragraph with a link to the blog and bold text inside it.

  • List item one
  • List item two
  • List item three
Block quote for a short line from a guide or a guest.
Sample image

Rich Text 3

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text for long pages such as tour details and blog posts. Line length stays under eighty characters so the text is easy to follow from one line to the next.

Second paragraph with a link to the blog and bold text inside it.

  • List item one
  • List item two
  • List item three
Block quote for a short line from a guide or a guest.
Sample image

Rich Text 4

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text for long pages such as tour details and blog posts. Line length stays under eighty characters so the text is easy to follow from one line to the next.

Second paragraph with a link to the blog and bold text inside it.

  • List item one
  • List item two
  • List item three
Block quote for a short line from a guide or a guest.
Sample image