Waymark · design system

Style Guide

Every colour, type style, spacing step and component of this template in one place. Each row names the class on the left and shows it live on the right.

01

Colour

Contents
Colour schemes · Base modeSpruce: raw colour → semantic variable
Spruce · #121715Background · Button Text · Button Hover Textthe ground
Spruce Raised · #1A201DSurface · Field · Button Disabledthe tonal step
Spruce Hairline · #353937Borderrules, decorative
Ridge · #747874Border Strongfields and controls, 4.04:1
Lichen · #A3AAA4Text Muted · Button Hover · Button Disabled Text7.63:1
Lichen Deep · #8C938DButton PressedSpruce on it 5.76:1
Snow · #ECEEE8Text · Control Checked15.50:1
Fog · #E2E4DEButton Backgroundthe button, 14.14:1
Glacier · #9FCFC6Accentthe route line, its stations and focus only
Colour schemes · Fog modethe same variables, second mode, shown on its own Fog ground
Fog · #E2E4DEBackground · Field · Button Text · Control Checkedthe light pause
Fog Deep · #D6D9D2Surface · Button Disabledlifted surface
Fog Hairline · #C4C7C1Borderrules, decorative
Scree · #70736FBorder Strongfields and controls, 3.75:1
Slate · #505451Text Muted · Button Pressed · Button Disabled Text6.01:1
Spruce · #121715Text · Button Background14.14:1
Spruce Hairline · #353937Button Hoverthe button one tone up
Glacier Deep · #2F6A61Accentthe route line, its stations and focus only, 4.88:1
.color-scheme-1Base mode: Spruce ground, Fog button
Hut to hut in the Dolomites

Four days over the Grava Pass

You see the whole route before you walk it. This one runs from San Vidal at 1,218 m to Val Dores at 1,503 m.

.color-scheme-2Webflow: Variable Mode on the class
Hut to hut in the Dolomites

The other five routes in the 2027 season

On Fog the text turns Spruce, the muted text Slate, the route line, its stations and focus Glacier Deep, and the button Spruce.

02

Type scale

Contents
Variable ModesDesktopTabletLandscapePortrait

Each size below lists its four mode values in these columns, in px. The value of the width you are reading at is marked.

.heading-style-displaySize Display · Source Serif 4 300 · 102%88px72px56px48px

Four days over the Grava Pass

<h1> · .heading-style-h1Source Serif 4 300 · 102%68px56px46px40px

San Vidal to the dairy farm

<h2> · .heading-style-h2Source Serif 4 300 · 108%52px44px36px34px

Three nights: a dairy farm and two huts

<h3> · .heading-style-h3Source Serif 4 300 · 108%44px36px30px27px

Over the Grava Pass, 2,625 m

<h4> · .heading-style-h4Source Serif 4 300 · 125%30px28px24px22px

Grava Pass Traverse

<h5> · .heading-style-h5Source Serif 4 400 · 125%22px22px20px19px
Up the valley to the lake
<h6> · .heading-style-h6Jost 500 · the label voice · muted13px on every width
Preferred departure
<p> · .text-size-regularText Regular · Jost 400 · 160% · measure 36em17px17px16px16px

You see the whole route before you walk it. This one runs from San Vidal at 1,218 m to Val Dores at 1,503 m.

.text-size-largeText Large21px21px19px19px

We book every bed before you arrive. Night one is a dairy farm with rooms and night two a hut on the shore of a lake.

.text-size-mediumText Medium18px18px18px17px

Every night of the route is named and marked on the elevation profile.

.text-size-smallText Small14px on every width

Owen Pryce reads every enquiry and calls you to talk through the route.

.text-size-tinyText Tiny12px on every width

Photographs in this template are placeholders from Unsplash.

03

Text styles

Contents
.text-style-taglinethe kicker · Source Serif 4 italic 400 · Text Large
Hut to hut in the Dolomites
.text-style-italicthe second voice: route data, nights, places, captionsSource Serif 4 italic, set on its own, never inside a Jost sentence

Rifugio Grava, the night after the pass

<em>emphasis in running text: Jost's own italic 400in a serif heading it is the serif italic

The pass is crossed on the third day, early, before the cloud comes up.

<blockquote>Source Serif 4 300 · Size H4 · hung off a Border Strong hairlinea tag, so a quote inside or outside Rich Text is the same
Every day in kilometres and metres.
.text-style-mutedText Muted

Muted text takes a colour, never opacity.

.text-style-linkhairline in Border Strong, Text on hover; never Glacier

Read the route notes before you choose a date.

.text-weight-mediumthe template loads Source Serif 4 300 · 400 · italic 400 and Jost 400 · italic 400 · 500

Medium, 500, for a word that must hold inside running text.

.text-align-center

Centred text is for a caption under a full-bleed frame, never for a heading.

.text-color-primaryText

Primary text follows the scheme: Snow on Spruce, Spruce on Fog.

.text-color-secondaryText Muted

Secondary text is Lichen on Spruce and Slate on Fog.

04

Image and route

Contents
<figure> · <figcaption>
.aspect-ratio-*
4:3 a place · 4:5 a person or a camp · 16:9 a day · 16:7 a panorama.image-cover fills the frame
Two wooden huts beside a gravel path below grey limestone peaks.
Malga Pradel, where the first day ends
Small lake and wooden boardwalk under pink evening clouds.
Evening below Rifugio Lago Scuro
A scree slope rising to a high pass between grey peaks.
Scree below the Grava Pass
.route_data · .route_figure
.route_line · .route_stop · .route_station
the elevation line of the whole route, Glacier, 1.5px; its figures above it.route_stop.is-start · .is-day-1 … .is-day-4 place a station on the lineGlacier: the route line, its stations and focus only
Distance
40.0 km
Ascent
1,552 m
Descent
1,266 m
High point
2,625 m
Elevation profile of the Grava Pass Traverse: 40.0 km from San Vidal at 1,218 m to Val Dores at 1,503 m, 1,552 m of ascent and 1,266 m of descent, highest at 2,625 m on the Grava Pass on day 3.

A ring is where the walk starts; a filled station is where a day ends: Malga Pradel, Rifugio Lago Scuro, Rifugio Grava, Finish in Val Dores.

.route_figure on .color-scheme-2on Fog the line and its stations are Glacier Deep (an image per scheme)
Distance
40.0 km
Ascent
1,552 m
Descent
1,266 m
High point
2,625 m
Elevation profile of the Grava Pass Traverse: 40.0 km from San Vidal at 1,218 m to Val Dores at 1,503 m, 1,552 m of ascent and 1,266 m of descent, highest at 2,625 m on the Grava Pass on day 3.

A ring is where the walk starts; a filled station is where a day ends: Malga Pradel, Rifugio Lago Scuro, Rifugio Grava, Finish in Val Dores.

05

Rich text

Contents
.text-rich-textnested tag styles only, children carry no classes

Walking from hut to hut

You see the whole route before you walk it. This one runs from San Vidal at 1,218 m to Val Dores at 1,503 m. Three nights in huts and guesthouses, then the finish in Val Dores.

How the four days run

  • San Vidal to the dairy farm
  • Up the valley to the lake
  • Over the Grava Pass
  • Down to Val Dores

Before you book

  1. Choose a date
  2. Send an enquiry
  3. Owen calls you about the route
  4. Walk the route
We grade by the numbers, not by feel.
Walker on a dirt path across an upland meadow towards pale cliffs.
The meadow path on the first morning

A dairy farm and two huts. We book all three nights before you arrive, and the pass is crossed on the third day. See the enquiry form for dates.

06

Interface

Contents
.buttonFog · hover stays filled and steps down to Lichen · pressed Lichen Deep · focus Glacier ring · disabled Spruce Raised, its station empty.route_station.is-on-button inside: a ring in the button's text colourfrozen states: demo combo classes .is-demo-hover · .is-demo-focus · .is-demo-pressed, Style Guide only
Ask about dates
Default
Ask about dates
Hover · .is-demo-hover
Ask about dates
Focus · .is-demo-focus
Ask about dates
Pressed · .is-demo-pressed
Ask about dates
Disabled · .is-disabled
.button.is-secondarya station as in the primary · outline in Border Strong · hover doubles it in Text · pressed Surfacefrozen states: demo combo classes .is-demo-hover · .is-demo-focus · .is-demo-pressed, Style Guide only
See all trips
Default
See all trips
Hover · .is-demo-hover
See all trips
Focus · .is-demo-focus
See all trips
Pressed · .is-demo-pressed
See all trips
Disabled · .is-disabled
.button.is-linktext over a hairline · hover doubles the line · pressed keeps the doubled line, text muted · disabled: muted text over the decorative hairline, no platefrozen states: demo combo classes .is-demo-hover · .is-demo-focus · .is-demo-pressed, Style Guide only
Default
Hover · .is-demo-hover
Focus · .is-demo-focus
Pressed · .is-demo-pressed
Disabled · .is-disabled
.color-scheme-2 · .buttonon Fog the same tokens resolve to Spruce, Fog, Spruce Hairline and Slate
Ask about dates
Default
Ask about dates
Hover · .is-demo-hover
Ask about dates
Focus · .is-demo-focus
Ask about dates
Pressed · .is-demo-pressed
Ask about dates
Disabled · .is-disabled
See all trips
Default
See all trips
Hover · .is-demo-hover
See all trips
Focus · .is-demo-focus
See all trips
Pressed · .is-demo-pressed
See all trips
Disabled · .is-disabled
Default
Hover · .is-demo-hover
Focus · .is-demo-focus
Pressed · .is-demo-pressed
Disabled · .is-disabled
<hr>Border · 1px, between two runs of text

Day 03, over the pass

Day 04, down to Val Dores

<table>th in the label voice, rows ruled in Border.styleguide_item-row.is-flush: the table's last rule is the row's
Day
Stage
Night
01
San Vidal to the dairy farm
Malga Pradel
02
Up the valley to the lake
Rifugio Lago Scuro
03
Over the Grava Pass, 2,625 m
Rifugio Grava
04
Down to Val Dores
Finish in Val Dores
07
.form_form · .form_inputborder Border Strong · hover Text · focus Glacier ring.form_fieldset + legend.form_field-label ask a group's questionchecked: a Spruce check mark on Snow, the native Checked statesubmit: the same primary button, its station over .form_submit
Who is coming?
Before the walk

Thank you, your enquiry is with us.

Owen Pryce reads every enquiry and calls you to talk through the route.

.form_message-*success: filled mark under a hairline, role=statuserror: empty mark under a 3px rule, role=alertown text, never the Webflow default

Thank you, your enquiry is with us.

Owen Pryce reads every enquiry and calls you to talk through the route.

.color-scheme-2 · .form_inputthe same field, second scheme
08

Structure

Contents
SkeletonClient-First
.page-wrapper → .main-wrapper → section_* → .padding-global → .container-large → .padding-section-*
Containersmax-width · Large 1312px · Medium 1024px · Small 672pxthe same on every width
.container-large · 1312px
.container-medium · 1024px
.container-small · 672px

Bars drawn to the scale of each max-width. Narrower than that, a container fills the screen less .padding-global: on a phone all three are the screen width.

Variable ModesDesktopTabletLandscapePortrait

Section and page padding below list their four mode values in these columns. The value of the width you are reading at is marked.

.padding-section-smallSection Small · the dense register72px64px56px48px
.padding-section-mediumSection Medium · between112px96px72px64px
.padding-section-largeSection Large · the air between chapters144px120px88px80px
.padding-globalPage Padding64px40px24px20px
.margin-* · .padding-*size class + direction class, on boxes, never on text
.margin-top.margin-medium on the outer box, .padding-medium.background-color-secondary on the inner one
09

Space scale

Contents
Variable ModesEach step is a size class for margin and padding, used with a direction class. Steps that change per mode list four values in these columns.DesktopTabletLandscapePortrait
.margin-tiny · .padding-tinySpace Tiny4px on every width
.margin-xxsmall · .padding-xxsmallSpace XXSmall8px on every width
.margin-xsmall · .padding-xsmallSpace XSmall12px on every width
.margin-small · .padding-smallSpace Small16px on every width
.margin-medium · .padding-mediumSpace Medium24px on every width
.margin-large · .padding-largeSpace Large40px on every width
.margin-xlarge · .padding-xlargeSpace XLarge56px on every width
.margin-xxlarge · .padding-xxlargeSpace XXLarge72px72px64px64px
.margin-huge · .padding-hugeSpace Huge96px80px72px72px
.margin-xhuge · .padding-xhugeSpace XHuge144px120px88px88px
.margin-xxhuge · .padding-xxhugeSpace XXHuge192px160px120px120px