PureSoul Family

Design system

One set of components across Walking, Running, Hiking, Cycling and Family: accordions, map controls, route cards, Soul Score presentation, key stats and buttons. Same anatomy, same rhythm, same tone.

01 · Buttons and CTAs

One button, five registers.

Primary for the single most important action on a screen, outline for everything else, quiet for tertiary actions, and a light variant for use over photography.

02 · Key stats and Soul Score

The numbers, read the same way everywhere.

Key stats sit directly under the route title. The Soul Score is always seven axes, always averaged to one figure out of ten.

Distance
14.2km
Ascent
480m
Duration
4h 10
Surface
Trail
Start
Rail
Season
All year
Difficulty
Moderate

Soul Score · ridge traverse

Seven axes · averaged

6.8/10

  • Quiet9.2
  • Nature9.0
  • Flow6.4
  • Water4.1
  • Heritage6.8
  • Recovery3.2
  • Ascent8.6

03 · Route cards

Every route reads in the same order.

Image, brand mark and Soul Score badge, title, location, short description, stats, then a single clear action.

Soul7.0

Example route

Riverside loop

Utrecht · Netherlands

Card anatomy shown with placeholder content. Live routes use the same structure on all four sites.

Distance
8.4km
Ascent
62m
View route
Soul6.5

Example route

Dune out-and-back

Zandvoort · Netherlands

Card anatomy shown with placeholder content. Live routes use the same structure on all four sites.

Distance
11.0km
Ascent
140m
View route
Soul6.8

Example route

Ridge traverse

Eifel · Germany

Card anatomy shown with placeholder content. Live routes use the same structure on all four sites.

Distance
14.2km
Ascent
480m
View route

04 · Full-screen map controls

Quiet glass over the map.

A single control cluster, right aligned and thumb-reachable on mobile: zoom, locate, layers, full screen and GPX. Full screen is the real thing — the map fills the device, controls stay put, Escape returns you.

Map surface placeholder
500 m

05 · Accordions

Depth without density.

Long route descriptions, access notes, seasonal guidance and safety text collapse into hairline rows. The essentials stay visible; the detail is one calm click away.

Access sections always lead with the simplest reliable option, then add parking, bus and cycle alternatives underneath.

Seasonal text describes surface, light and crowd conditions per season.

Preparation notes stay short, factual and specific to the route.