Skip to content
Browse
Library

Wayfinder. A black cinema screen with one whispered title floating over a living illustration.

  • Media
  • Dark theme
  • 6 colors
  • 3 typefaces

Wayfinder is an immersive interactive film that treats the entire viewport as a stage for animated illustration. The UI is deliberately vestigial: a pure black canvas, a single light-weight display title, two compact action buttons, and a few icon-only controls in the corners. Almost everything visual is illustration content — stylized trees, mushrooms, flowers, earth textures — while the interface stays flat, borderless, and silent. The design discipline is subtraction: no shadows, no gradients, no card layers, no decorative color. The wide letter-spacing on the display type and the centered composition give every screen a cinematic, title-card quality.

Visit wayfinder.nfb.ca
Screenshot of Wayfinder
Captured from wayfinder.nfb.ca on October 11, 2026

Wayfinder design system

Wayfinder

Neutrals6

  • Page canvas, primary borders, icon strokes — the literal theater curtain everything sits on

  • Secondary surface tone — picks up a warm cast from the illustration overlay, used as a slightly lifted dark

  • Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color

  • Muted surface for low-emphasis background panels and body containers

  • Hairline borders on the dark button, subtle separators, muted off-white dividers

  • Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Bone White on Void Black

21.00 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.