Hot pink, purple, and sky blue on a warm pink-white canvas, with rounded corners, tinted shadows, and a single spring easing curve reused everywhere. Built on Tailwind CSS v4. This page renders the actual tokens, live.
globals.cssRounded, friendly, with bold weights for headings. DM Mono covers code and data.
16–20px corner radii on cards, pill-shaped tags, and one bouncy spring curve (cubic-bezier(.34,1.56,.64,1)) on hover across every interactive surface — the same three component states every tool card actually goes through:
16px radius · purple-tinted shadow · spring lift on hover
shimmer skeleton + search-progress pill
calm-green → busy-rose pips
Busy
| Attribute | Blueprint target | Currently implemented |
|---|---|---|
| Theme / vibe | "Joyful Pop" | "Joyful Pop" |
| Color palette | Hot pink, purple, sky blue | #e040a0 · #7c52aa · #0096cc |
| Typography | DM Sans | DM Sans via Google Fonts |
| Corner radius | 16–20px cards, pill tags | 16px panels, fully-rounded tags |
| Animations | Bouncy scale-up spring hover | .bouncy-hover scale transition |
| Shadows | Tinted color shadows | Pink/purple/blue at 20–35% opacity |
Every UI piece and where it lives in the frontend.
Pink-shadowed button with an animated spinning compass next to the "Kompass" title, a gear button for settings, and a hamburger drawer toggle on mobile. app-header.js
CopilotKit v2 chat container with travel-specific titles and placeholders.
Two pill tabs — Trips (new / resume / delete) and Saved (bookmarks with destination, dates, stress dot, and total). trip-sidebar.js saved-list.js
Colorful pill tags for direct flights, hotel class, transit modes, vibes, and non-default currency. preferences-card.js
Question + candy option pills (single or multi-select) + an always-present "Other" free-text input; resolves to an "Answered" chip. clarify-card.js
Portal modal (bottom-sheet on mobile) editing the global travel profile with loading / saving / saved / error button states. settings-modal.js
Animated candy-gradient pill sliding across a soft pink track, shown inside every loading tool card. search-progress.js
Replaces CopilotKit's default loading dot with a pink pill showing a friendly, tool-specific label driven by the AG-UI run lifecycle — steps aside once real text streams. chat-status.js
Live results with currency-aware prices and an ≈ approx badge for estimates. flights-card.js cheapest-dates-card.js
Live lodging with nightly + total rates, ratings, amenities, and booking links. accommodations-card.js
Grounded web-search answers rendered as their own card (destination knowledge + ground-transport routing). research-card.js
2–3 side-by-side cards: label + dates, hero total, Transport/Stay split, 5-pip stress gauge, highlight chips, leg summary, and "View details". Best-value and lowest-stress badges are derived client-side. scenario-comparison-card.js
Price + stress gauge, cost-breakdown bars, stress-factor tiles, per-direction travel timeline with connection chips and booking links, accommodation list, expandable day-by-day itinerary, reasoning, Save, and View-on-map.
3-pane split on desktop; full-width chat, off-canvas drawer, and bottom-sheet modals below lg.
Split panel with itinerary summary over an interactive Google Map: numbered stops, stay markers, mode-colored polylines (geodesic flights), auto-fit bounds, cached client-side geocoding. Friendly placeholder without a key. trip-panel.js trip-map.js
A self-healing, reusable backdrop image — hidden until it loads, silently hidden on 404 (not generated yet). Reused behind the sidebar row (fades left, 55%) and the scenario-detail header (fades bottom, full strength). trip-backdrop.js