Wot Way?

Edition C โ€” Fraunces Black with unified button system

Design Specification ยท December 2024

Unified Button System

Two button colours used consistently across all six apps

Location / Primary Action
#2D2A26 Charcoal
Go / Submit Action
#C75D48 Terracotta

Background Palette

Six distinct backgrounds unified by similar saturation and warmth

TUBE
TRAIN
TRAM
PLATFORM
TERMINAL
SERVICES

Colour Specifications

Each app's unique background paired with unified buttons

WOT TUBE?

The London Underground, simplified

Background
#4A5D53
Location
#2D2A26
Action
#C75D48

WOT TRAIN?

A to B in NYC

Background
#8C6B5A
Location
#2D2A26
Action
#C75D48

WOT TRAM?

Manchester Metrolink made easy

Background
#5D5A6B
Location
#2D2A26
Action
#C75D48

WOT PLATFORM?

Get to your train before the crowd

Background
#4A5A6B
Location
#2D2A26
Action
#C75D48

WOT TERMINAL?

Airports needn't be stressful

Background
#5A7A7A
Location
#2D2A26
Action
#C75D48

WOT SERVICES?

The motorway stop guide

Background
#7A5D5D
Location
#2D2A26
Action
#C75D48

App Mockups

Unified button colours create family cohesion while backgrounds provide identity

WOT TUBE?
The London Underground, simplified
FROM
Kings Cross
โ‡…
TO
Oxford Circus
WOT TRAIN?
A to B in NYC
FROM
Times Square
โ‡…
TO
Brooklyn Bridge
WOT TRAM?
Manchester Metrolink made easy
FROM
Piccadilly
โ‡…
TO
MediaCityUK
WOT PLATFORM?
Get to your train before the crowd
STATION
London Euston
DESTINATION
Manchester Piccadilly
WOT TERMINAL?
Airports needn't be stressful
AIRPORT
London Heathrow
FLIGHT NUMBER
BA 283
WOT SERVICES?
The motorway stop guide
MOTORWAY
M1
DIRECTION
Northbound

Wot Way? Hub

The family home with Fraunces Black headers

One question. The right answer.
๐Ÿš‡
Wot Tube?
London Underground
๐Ÿš‡
Wot Train?
NYC Subway
๐ŸšŠ
Wot Tram?
Manchester Metrolink
๐Ÿš‰
Wot Platform?
UK train platforms
โœˆ๏ธ
Wot Terminal?
Airport terminals
โ›ฝ
Wot Services?
Motorway services

Typography

Fraunces for character, DM Sans for clarity

App Title ยท Fraunces Black 900 ยท 32px ยท Letter-spacing: 1px ยท ALL-CAPS
WOT TUBE?
Tagline ยท DM Sans 400 ยท 15px ยท Sentence case
The London Underground, simplified
Button Text ยท DM Sans 600 ยท 15px ยท Letter-spacing: 1px
GO
Input Label ยท DM Sans 600 ยท 10px ยท Letter-spacing: 1.5px ยท UPPERCASE
FROM

Colour Logic

How the unified system works

Unified Button Colours

Charcoal โ€” Location Buttons
Deep, warm black that works on any background. Provides consistent "find me" affordance.
#2D2A26
Terracotta โ€” Action Buttons
Warm, energetic orange-red. Creates urgency and stands out against all six backgrounds.
#C75D48

Background Palette

Forest Sage โ€” Wot Tube?
Muted green evokes the classic Underground aesthetic
#4A5D53
Warm Clay โ€” Wot Train?
Earthy brown with NYC subway warmth
#8C6B5A
Dusty Violet โ€” Wot Tram?
Subtle purple for Manchester's modern Metrolink
#5D5A6B
Slate Blue โ€” Wot Platform?
Cool, reliable blue for train stations
#4A5A6B
Ocean Teal โ€” Wot Terminal?
Calm, travel-inspired teal for airports
#5A7A7A
Dusty Rose โ€” Wot Services?
Warm, inviting tone for roadside stops
#7A5D5D

Design Principles

Why unified buttons work

๐Ÿ”— Family Recognition

When users see the charcoal location button and terracotta action button, they immediately know they're in a Wot? app. This builds brand recognition across the family.

๐ŸŽฏ Clear Hierarchy

Two distinct button colours create clear visual hierarchy: charcoal for "where am I?" actions, terracotta for "let's go!" actions. Users learn once, apply everywhere.

๐ŸŒˆ Background Variety

Each app's unique background provides identity while the consistent buttons provide familiarity. It's variety with unity โ€” the best of both worlds.

โœจ Fraunces Character

Fraunces Black 900 brings personality and warmth. Its slight "wonkiness" makes the apps feel friendly and human, not corporate or cold.

๐Ÿ“ DM Sans Clarity

DM Sans handles body text, labels, and buttons with geometric precision. It complements Fraunces without competing, keeping interfaces readable.

๐ŸŽจ Muted Sophistication

All six backgrounds share similar saturation levels (muted, earthy) so they feel like siblings. None screams louder than another.