Design system

Style guide

Colour, type, spacing and base elements for Imlil Morocco Explorers. Altitude is the organising principle — everything else stays quiet.

Zone toggle

Atlas pages run cold, Sahara pages run warm. The accent set swaps viadata-zoneon the page. Toggle below to see it live.

A sample linkActive tab

Static side-by-side comparison — both accent sets rendered at once, no JavaScript required:

Atlas zone

A sample link

Sahara zone

A sample link

Colour

Base — shared across all zones

Ink

--color-ink

#101823

Snowline

--color-snowline

#EFF2F4

Scree

--color-scree

#78808C

Summit

--color-summit

#FFFFFF

Sky 4167

--color-sky-4167

#16345E

Atlas accent set

Accent — madder red

--color-accent

#A6231C

Accent soft

--color-accent-soft

#F0DEDC

Sahara accent set

Accent alt — saffron

--color-accent-alt

#C87A16

Accent alt soft

--color-accent-alt-soft

#F7EBD5

Typography

display-xl · Bricolage Grotesque 700 · 2.75 → 4.5rem

Toubkal, 4,167m

display-l · Bricolage Grotesque 700 · 2.0 → 3.0rem

The High Atlas

display-m · Bricolage Grotesque 600 · 1.5 → 2.0rem

Sahara Tours

body-l · Newsreader 400 · 1.125 → 1.25rem

Mules carry your bags on every trek out of Imlil.

body · Newsreader 400 · 1.0 → 1.0625rem

A three-day loop through Berber villages, high pastures, and the Toubkal refuge.

data · IBM Plex Mono 500 · 0.875rem

DURATION · 6 DAYS

caption · IBM Plex Mono 400 · 0.8125rem

Guide: Mohamed, Imlil-based since 2014

Spacing scale

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

Radius & borders

2px radius
1px hairline

Base elements

Buttons

Links

Read more about the 2-day Toubkal ascent, or see our Sahara tours.

Form fields

Card

6 days · challenging

Toubkal Winter Ascent

A crampon-and-ice-axe route to the summit of North Africa's highest peak.

View trek →

Table

PeoplePrice per person
1$450
2$320
4+$260

Elevation profile

The signature element — a hand-drawn-feeling cross-section drawn from real altitude data. Toubkal ascent: Imlil (1,740m) → Sidi Chamharouch (2,310m) → Refuge du Toubkal (3,207m) → Toubkal Summit (4,167m).

Hero

Card

Itinerary — day 1 highlighted

Itinerary — day 2 highlighted

The stroke colour reads from --color-accent, so it swaps to saffron on Sahara-zoned pages automatically:

Atlas zone

Sahara zone