Brand guidelines and visual specifications for the Wot? family of transport apps
Each app has a primary background, accent colour, and action colour
The London Underground, simplified
A to B in NYC
Manchester Metrolink made easy
Get to your train before the crowd
Airports needn't be stressful
The motorway stop guide
Homepage layouts showing colour application
The central landing page featuring all apps
Figtree is used throughout for a friendly, modern feel
Consistent principles across all Wot? apps
Each app uses exactly three colours: a background, an accent (for primary buttons like location), and an action colour (for the main GO button). This creates visual interest without chaos.
App names are always ALL-CAPS in white, using Figtree 800. Taglines are sentence case in white with 85% opacity. This creates clear hierarchy.
All interactive elements sit on a white card with 20px border-radius. This provides contrast and focuses user attention on the inputs.
Location/detection buttons use the accent colour. The main action button uses the action colour. Secondary buttons use light grey (#f0f0f0).
All apps use the same footer: "No fuss; just guidance · hello@wotway.com" in white at 70% opacity. This reinforces brand consistency.
Maximum content width is 500px. All touch targets are minimum 44px. Safe area insets are respected on all devices.
How complementary colours were chosen
Green and coral/pink are complementary. The deep forest accent (#2D4A3E) grounds the design while coral (#D4857A) provides warmth and draws attention to the action.
Coral pairs beautifully with teals and blues. Navy accent (#1E3A5F) provides sophistication while teal (#5BA4A4) offers a fresh, NYC-appropriate contrast.
Warm earth tones complement cooler purples. Charcoal (#2C3E50) feels professional while dusty purple (#6B5B95) adds unexpected elegance.
Purple and gold are classic complements. Deep plum (#4A3F5C) adds depth while warm sand (#D4A574) brings energy to the action button.
Cool blues pair with warm corals. Deep teal (#2D4A5E) maintains the calm feeling while coral (#D4857A) creates urgency for the main action.
Earth tones love teal. Deep teal (#3D5A5A) provides a natural accent while medium teal (#5B8F8F) offers a fresh action colour.