---
title: "Wayfinder design system"
variant: extended
source: https://wayfinder.nfb.ca/
captured_at: 2026-10-12
theme: dark
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/wayfinder-nfb-ca)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Wayfinder · Design System

> A quiet, illustrated journey through the land.

**Theme:** dark · **Industry:** entertainment · **Source:** https://wayfinder.nfb.ca/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Wayfinder pairs a restrained utility bar with a full-bleed illustrated landscape and a compact, centered game introduction. Warm, dark earth tones frame crisp white lettering and a high-contrast start button, keeping attention on the invitation to explore.

## North star

Let the illustrated landscape dominate, and make the centered start invitation the clearest point of focus.

## Overview

The page is built around an immersive, full-bleed illustrated landscape rather than a conventional content grid. The measured canvas is near-black brown (#0b0502), while a slightly warmer dark brown (#130904) underpins the main section; the screenshot’s olive ground and rust-red trees belong to the scene artwork, not the core interface palette. A narrow white navigation strip sits above the artwork, with compact black utility icons and fine pale dividers. In the hero, a large uppercase white wordmark anchors the center, followed by two short lines of softly lit supporting copy and a small white start button. A dark secondary info button recedes beneath it. Typography mixes airy, widely tracked Enreal display text with compact Ciutadella-Medium navigation. Generous open landscape around the centered copy preserves the cinematic composition, while the restrained controls make the page feel like a calm threshold into an interactive story.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Soil | `#0b0502` | `--color-night-soil` | surface | Near-black brown canvas color, defining the dark outer frame around the immersive scene. |
| Paper Light | `#ffffff` | `--color-paper-light` | neutral | Utility bar, wordmark and hero copy; also the high-contrast start button surface. |
| Warm Umber | `#130904` | `--color-warm-umber` | surface | Measured main-section surface tone beneath the full-bleed illustrated landing scene. |
| Charcoal Ink | `#1a1a1a` | `--color-charcoal-ink` | semantic | Measured muted navigation and control text; use for compact labels and icon-adjacent text. |
| Soft Divider | `#e3e3e2` | `--color-soft-divider` | semantic | Fine measured hairlines in the navigation and button interface. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Secondary measured muted text and dark control details against light surfaces. |

### Semantic aliases

`--color-canvas` → `#0b0502` (Night Soil) · `--color-surface` → `#130904` (Warm Umber) · `--color-surface-2` → `#ffffff` (Paper Light) · `--color-text` → `#ffffff` (Paper Light) · `--color-text-muted` → `#1a1a1a` (Charcoal Ink) · `--color-text-subtle` → `#000000` (Pure Ink) · `--color-border` → `#e3e3e2` (Soft Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0b0502` | 20.25:1 | AAA |
| `#ffffff` | `#130904` | 19.65:1 | AAA |
| `#1a1a1a` | `#0b0502` | 1.16:1 | fail |
| `#1a1a1a` | `#130904` | 1.13:1 | fail |
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#000000` | `#0b0502` | 1.04:1 | fail |
| `#000000` | `#130904` | 1.07:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Enreal | `--font-body` | webfont | 300, 700 | Hero wordmark and primary page text. | Inter |
| Ciutadella-Medium | `--font-ciutadella-medium` | webfont | 300 | Compact navigation labels and utility-bar text. | Montserrat |

- **Enreal:** Measured at light and bold weights; the hero title is uppercase, open, and distinctly tracked.
- **Ciutadella-Medium:** Measured navigation is light, compact, and untransformed; retain a clean geometric sans-serif feel.

### Type scale — Custom (ratio ≈ 1.714, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 300 | 1.75 | 0.042em | — | Enreal | Hero wordmark, centered above the short journey description. |
| body | 14px | 700 | normal | 0 | — | Enreal | Supporting hero copy and compact explanatory text. |
| nav | 14px | 300 | 1 | 0 | — | Ciutadella-Medium | Top utility controls and language label. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 16, 20, 30, 40 px.
- Section rhythm — · element gap 4px · card padding — · max content width —.

A thin, full-width utility bar spans the top, followed by one full-bleed hero scene. The hero content is centered horizontally and grouped in a narrow stack: wordmark, two-line description, primary start control, then secondary info control. Keep the landscape open around this stack and avoid adding conventional cards or columns. Measurements report a comfortable density and an 8-pixel base spacing unit; no page max-width or section-gap value is measured, so preserve proportions visually rather than imposing one.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s linear` on interactive elements.

The interface is mostly flat, with no measured shadows or radius scale. Separate the white utility strip from the illustration using fine pale hairlines. The start control is a compact white rectangle with dark lettering and a strong dark offset visible in the screenshot; the info control is a simple dark rectangle that blends into the scene.

## Imagery

Use a full-bleed, hand-painted animated landscape as the defining visual: a dusky olive field, sparse dark trees, and stylized rust and green foliage. Frame it as a wide cinematic environment, with the central area dark and legible behind the title and controls. These scene colors are artwork, not additions to the measured interface palette.

## Components

### Utility bar

White, full-width strip above the hero; compact black icons and language control sit in separated cells with fine pale dividers.

### Hero wordmark

Large centered uppercase white title over the landscape, visually dominant and widely spaced.

### Journey introduction

Two centered lines of light-colored supporting copy beneath the title, with restrained scale and generous breathing room.

### Start button

Small white rectangular primary control with dark arrow and label; preserve its sharp corners and high contrast.

### Info button

Compact dark rectangular secondary control beneath the primary action, with a short light label.

### Landscape backdrop

Full-bleed illustrated environment that fills the hero and carries the page’s warm, natural visual character.

### Measured component styles

- **Primary button**: transparent background · text #1a1a1a · radius 0px · padding 0px 16px · 400 13.3333px Arial
- **Navigation item** (“See all WORKS Get MORE INFO”): transparent background · text #1a1a1a · radius 0px · padding 0px · 300 14px Ciutadella-Medium

## Do

- Keep the landscape full-bleed and visually dominant.
- Center the hero copy and actions over a legible part of the scene.
- Use white type for the main title and primary invitation.
- Reserve the measured white strip for compact utility navigation.
- Keep primary and secondary actions rectangular and simple.
- Treat illustration colors as scene art rather than UI tokens.

## Don't

- Do not add card grids to the single-scene hero.
- Do not place busy artwork directly behind small text.
- Do not introduce gradients or shadows as unmeasured brand effects.
- Do not round the measured sharp-cornered controls.
- Do not let utility navigation compete with the title.
- Do not promote illustration hues into interface accents.

## Agent prompt

Build a new landing page in Wayfinder’s immersive illustrated style. Use a full-bleed, hand-painted landscape as the main canvas, framed by Night Soil (#0b0502) and Warm Umber (#130904). Keep the utility navigation as a narrow white strip with compact dark controls and Soft Divider (#e3e3e2) hairlines. Center the hero title and short supporting copy over a quiet area of the illustration; use Paper Light (#ffffff) for the title and primary copy. Make the primary action a small, sharp-cornered white rectangle with dark text, and let a darker secondary action recede below it. Use Enreal-like display typography with open tracking and a clean geometric sans for navigation. Preserve generous negative space; avoid cards, decorative gradients, and unnecessary interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed illustrated scene beneath a narrow utility bar; centered title, copy, and vertically stacked actions. | language and utility controls, primary start action, secondary information action | white utility strip, centered overlay copy, sharp rectangular buttons, illustrated landscape |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/wayfinder-nfb-ca