Three semantically independent colour sets. Breakfast re-uses the amber primitive but is intentionally a separate token group — the label defines intent, not just colour.
☕ Breakfast
Used on meal badges, accommodation amenity pills, and reservation highlight cards.
fg
bg
border
icon
🥗 Lunch
Green distinguishes midday meals from morning breakfast on the itinerary cards.
fg
bg
border
icon
🍷 Dinner
Rose/pink makes evening meals immediately scannable in the day timeline.
fg
bg
border
icon
Diff states — Screen 9 Refine / Diff view
Applied as small inline badges ("+ Added", "− Removed", "Changed") in the itinerary diff view. The red introduced here is also the system's first error-state primitive.
+ Added
New place inserted into the itinerary after a swap or regeneration.
fg
bg
border
− Removed
Place removed. Also serves as the system's error / destructive primitive (the only red in the set).
fg
bg
border
Changed
Day-level section header badge when at least one stop was modified.
fg
bg
border
Unchanged
Day has no modifications. Text-only, no bg fill or badge needed.
fg only
Typography scale
Font: Poppins (Google Fonts). Loads via CDN — renders identically on every device and OS. Weights in use: 400 · 500 · 600 · 700.
display
32px · 700 · lh 1.2 · ls −0.01em
Plan your trip
h1
24px · 700 · lh 1.2 · ls −0.01em
3 days in Ksamil, Albania
h2
20px · 600 · lh 1.35
Day 1: Ksamil Village and Beaches
h3
17px · 600 · lh 1.35
Bora Bora Beach
body
15px · 400 · lh 1.5
Comfortable seafront hotel with sea-view rooms and a buffet breakfast included.
Caps-label is the section heading pattern used across all 11 screens. Tokens: typography.text-transform.uppercase + typography.letter-spacing.caps (0.08em)
Spacing scale — 4px base
1
4px — xs gap
2
8px — badge pad
3
12px — list gaps
4
16px — card pad
5
20px — section gap
6
24px — card-to-card
8
32px — screen margin
10
40px — hero space
12
48px — safe area
16
64px — max breathing
Border radius
sm
8px · inputs, buttons, badges
lg
16px · cards, sheets, modals
full
9999px · pills, tags, chips
Elevation / shadows
shadow.sm
Cards at rest, badges
shadow.md
Floating elements, map pins
shadow.lg
Bottom sheets, swap overlays, nav menu
Motion — duration & easing
Based on IBM Carbon's duration scale and Google Material 3's easing curves. Applied to chip toggles, sheet entrances, segment transitions, and the loading animation.
Duration
motion.duration.instant
70 ms
Chip toggles, hover state switches, icon swaps
motion.duration.fast
150 ms
Button feedback, confidence badge appear
motion.duration.moderate
250 ms
Sheet entrance, segment control switch, map slide
motion.duration.slow
400 ms
Loading checklist steps, screen transitions
Easing — hover a card to preview
motion.easing.standard
cubic-bezier(0.4, 0, 0.2, 1)
Default for most UI transitions. Decelerates into rest. Use with duration.fast or duration.moderate.
motion.easing.decelerate
cubic-bezier(0, 0, 0.2, 1)
Elements entering the screen — sheets sliding up, overlays fading in. Starts fast, settles smoothly.
motion.easing.accelerate
cubic-bezier(0.4, 0, 1, 1)
Elements leaving the screen — nav drawer closing, modals dismissing. Starts slow, exits quickly.
Z-index stack
Six named layers from base content up to toast notifications. Prevents stacking order conflicts between the map pins, swap overlay sheet, and nav menu drawer.
zIndex.toast
Error messages, success toasts
500
zIndex.drawer
Nav menu (Screen 11) — slides over everything
400
zIndex.modal
Swap overlay sheet (Screen 8)
300
zIndex.overlay
surface.overlay backdrop behind modal
200
zIndex.raised
Map pins, sticky headers, day filter chips
100
zIndex.base
Normal document flow — cards, lists, content
0
Icon sizes
Three sizes cover all icon usage across the 11 screens. Use md (20px) as the default for action icons. sm (16px) for inline, badge, and detail-level icons.
⚠ Placeholder representations — Unicode glyphs and Lucide SVGs are used here to approximate the icon shapes visible in the prototype. Final icons will be defined in a separate icon library deliverable and referenced via icon.* tokens.
← Back arrow — navigation × Close / dismiss — overlay & nav drawer ≡ List icon — List/Map segment tab 📍 Map pin — segment tab & map legend ⇄ Swap — quota pill & nav tile ✦ Generation — quota pill & nav tile ≡ Tweaks/sliders — quota pill & nav tile + Plus — Plan a new trip 🗺 Map outline — Map view nav row ⚙ Settings gear — Settings & preferences
lg · 24px — feature-row icons
📅 Calendar — Add to Google Calendar ⬇ Download — Download as PDF
Note: ⇄ swap and ✦ generation appear at both sm (16px) inside compact stop-row buttons, and md (20px) in quota pills and nav tiles. Size follows context — compact actions use sm, standalone tiles use md.