Wot Way? Design System

Edition B — Jewel tones & editorial typography

Alternative Specification · December 2024

Colour Palettes

Rich jewel tones with sophisticated contrasts

WOT TUBE?

The London Underground, simplified

Background
#2D5A4A
Accent
#1A332C
Action
#C4A35A

WOT TRAIN?

A to B in NYC

Background
#8B3A3A
Accent
#1E1E2E
Action
#E8DCC4

WOT TRAM?

Manchester Metrolink made easy

Background
#B8860B
Accent
#2C1810
Action
#4A6670

WOT PLATFORM?

Get to your train before the crowd

Background
#4A3A6B
Accent
#1E1A2E
Action
#C9937A

WOT TERMINAL?

Airports needn't be stressful

Background
#3A5A6B
Accent
#1A2A33
Action
#D4857A

WOT SERVICES?

The motorway stop guide

Background
#8B5A3A
Accent
#1A3333
Action
#5A9A8A

App Mockups

Homepage layouts with jewel tone palettes

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 central portal in jewel tones

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

Newsreader brings editorial refinement and gravitas

App Title · Newsreader 600 · 28px · Letter-spacing: 3px · ALL-CAPS
WOT TUBE?
Tagline · Newsreader 400 Italic · 15px · Sentence case
The London Underground, simplified
Button Text · Newsreader 600 · 15px · Letter-spacing: 2px
GO
Input Label · Newsreader 600 · 10px · Letter-spacing: 1.5px · UPPERCASE
FROM

Palette Comparison

Edition A (Pastels) vs Edition B (Jewel Tones)

Edition A — Pastel Palette

Tube
Train
Tram
Platform
Terminal
Services

Edition B — Jewel Tones

Tube
Train
Tram
Platform
Terminal
Services

Design Philosophy

What changes between editions

🎨 Deeper Saturation

Edition B uses deeper, more saturated colours that feel luxurious and confident. The darker tones create more dramatic contrast with the white cards.

✒️ Serif Typography

Newsreader brings editorial gravitas. The variable optical sizing ensures excellent readability at all sizes, while italic taglines add elegance.

🌙 Dark Mode Native

The jewel tone backgrounds naturally suit dark mode aesthetics. The cream-coloured cards provide warmth against the rich backgrounds.

💎 Premium Feel

The combination of deep colours and refined typography creates a more premium, boutique aesthetic compared to the friendly pastel version.

🎭 Same Structure

Both editions use identical layout, spacing, and interaction patterns. Only colours and typography change, proving the design system's flexibility.

⚖️ When to Use

Edition A (Pastels): Friendly, approachable, daytime feel. Edition B (Jewels): Sophisticated, premium, evening feel. Choose based on target audience.