gowandrDesign system · built by Claude from the codebase

gowandr

Plan it. See it. Wander it.

Voice From the app and the store listing

A friend who lives there

Short, plain, specific. Real places and real numbers, never superlatives.

Buttons say the action

PLAN A TRIP, USE THIS, CHECK IN, FIND SPOTS. Three words at most, uppercase in pixel type.

No emoji

The pixel monkey and the pixel pins are the brand's faces.

Color 22 tokens from lib/theme/app_theme.dart

cream#fff7f2The page and app-bar background everywhere.
card#ffffffCards, sheets, text fields, unselected chips, sitting on cream.
line#e7dad2Dividers and hairlines only.
ink#161215All text, and the 2px border on every card, button, chip and field.
ink-soft#6b6167Secondary text and field labels on cream and card (5.6:1).
ink-faint#b4a9afHint text in empty fields only.
pink#fd34aePrimary fills: CREATE, filled buttons, FAB, day 1.
pink-deep#d6118aPink as text (TextButton labels, links) on cream (4.6:1) and card; the plan-a-trip gradient start.
plan-end#b80e76End stop of Brand.planGradient (pink-deep to plan-end, top-left to bottom-right).
checkin-start#ff5cbeStart stop of Brand.checkInGradient (checkin-start to pink).
pink-soft#ffc2e6Soft fill for the Find spots action, with an ink label.
pink-wash#ffe4f4Selected chips and segments, the New collection action, tinted panels.
blue#3a8acaSecondary colour and day 2.
amber#f4a100Day 3 route and markers.
teal#00a896Day 4 route and markers.
violet#7b61ffDay 5 route and markers.
Days cycle 12345

Type Silkscreen for display, the platform font for reading

pixel-logo26px · 700
GOWANDR
pixel-heading17px · 700
PLAN IT. SEE IT. WANDER IT.
pixel-label12px · 700
PLAN A TRIP
pixel-tiny10px · 700
DAY 2 · 19 STOPS
body-large16px · 400
Skip the main crowd on the ground floor and head straight up to the roof garden.
body-medium14px · 400
Buddha Tooth Relic Temple and Museum
title-medium16px · 500
Singapore neighbourhood crawl
body-small12px · 400
09:00 · temple · walk 1 min

Components Recreated from the Flutter theme

ButtonButtons in three weights: filled pink for the one main action, outlined ink for the alternative, text in pink-deep for the quiet way out.
SpeedDialThe home CREATE fan: four actions stacked towards the thumb, alternating soft and saturated.
New collection Plan a trip Find spots Check in Close
DayTabsThe row of day filters over the trip map.
All Day 1 Day 2 Day 3
StopMarkerA numbered stop on the trip map: 34px square, filled with the day colour, 2px ink border, radius-badge, hard-shadow-sm, number in pixel-label at 13px in on-fill.
12345
PixelCardThe pixel-poster card: card fill, 2px ink border, radius, and an unblurred hard-shadow. Every grouped piece of content sits in one.
Template
Singapore neighbourhood crawl
3 days · 15 stops
Day 2
Kampong Glam arts, coffee
5 stops · 3.1 km
ChipInterest and filter chips, as in the wizard's "What do you like?".
Street foodCafésTemples & cultureNightlife
SegmentedButtonA one-of-few choice, like the wizard's pace (CHILL · BALANCED · PACKED).
PixelBadgeA small pixel-type tag such as TEMPLATE, DAY 2 or a travel mode.
TemplateDay 2Walk
TextFieldFilled text field: card fill, 2px ink border, radius, body-large text, hint in ink-faint, label in ink-soft.

Marks Raster pixel art, never redrawn

Wordmark
App icon
G pin
Monkey
Pixel pin
Smile pin