Color Palette
Teal is used sparingly for key actions and price highlights. Gold for selection states and badges. Ink tones for text hierarchy.
Typography
Playfair Display for display headings (editorial warmth). DM Sans for everything else (clean, modern readability).
Landmark luxury on Syntagma Square with Acropolis views, rooftop pool, and the acclaimed GB Roof Garden restaurant.
Private luxury coach from Athens International Airport to hotel and return transfer.
May 12–16, 2026 · 5 days, 4 nights · 45 guests
Room Rates · Included Services · Optional
Buttons
Primary for main CTAs. Secondary for cancel/dismiss. Soft for contextual actions. Ghost for inline text-level actions.
Large
Medium (default)
Small
Form Elements
Consistent inputs used across login, account settings, trip creation, and admin forms.
Toggles, Checkboxes & Radios
Tags & Badges
Used for trip statuses, service types, budget tiers, and inline labels.
Trip Status (from TripStatus enum)
Awaiting Hotel Options
Pending Hotel Selection
Ready to Confirm
Awaiting Payment
Booked
Past Trip
Service Type (from ProductType.menu_type)
Hotel
Dining
Activity
Transfer
Experience
Wellness
Budget Tier (from BudgetType enum)
Limited
Balanced
Luxury
World Class
Inline Labels
Included
Preferred
Selected
Status Pill (overlay style, used on hero images)
Pending Hotel Selection
Cost Basis (from TripService.cost_basis)
Flat fee
Per person
Per person/night
Per night
Per room
Expand / Collapse Controls
Chevron indicators for collapsible sections and bulk expand/collapse pill buttons.
Bulk Actions
Shadows & Elevation
Five levels of elevation. Cards use sm at rest, md on hover. Modals use xl.
Cards
Destination cards shown on landing page. Same pattern used for trip cards on My Trips. Data: Destination model (title, subtitle, media, country_code).
Athens
Ancient wonders meet vibrant nightlife in the birthplace of democracy
Lisbon
Coastal charm, pastel architecture, and world-class gastronomy
Barcelona
Mediterranean flair, Gaudi masterpieces, and endless energy
Spacing Scale
4px base unit. Used consistently for padding, margins, and gaps.
Data Reference
Key enums and field values from the data layer that drive UI states.
Trip Statuses (TripStatus enum)
| Value | Display | Tag |
| awaiting_hotel_options | Awaiting Hotel Options | Awaiting |
| pending_hotel_selection | Pending Hotel Selection | Pending |
| ready_to_confirm | Ready to Confirm | Ready |
| awaiting_payment | Awaiting Payment | Payment |
| booked | Booked | Booked |
| past_trip | Past Trip | Past |
Cost Basis Values (Service pricing)
| Value | Formula |
| per_person | sell × group_size |
| per_person_per_night | sell × group_size × nights |
| per_night | sell × nights |
| per_room | sell × room_count |
| flat | sell (fixed) |
Product Types (menu_type)
hotel
restaurant
activity
tour
event
transfer