Travel with
Purpose.
A meticulously crafted design system blending elegant white aesthetics, travel-inspired imagery, and sophisticated motion design.
Type System
Font families, scales, weights, and hierarchy designed for travel experiences.
Inter
font-family: 'Inter', system-ui, sans-serif
Space Grotesk
font-family: 'Space Grotesk', sans-serif
Space Mono
font-family: 'Space Mono', monospace
Playfair Display
font-family: 'Playfair Display', serif
Type Scale
Complete heading and body text hierarchy
Display
Section Heading
Card Title
Subsection
Label Title
Overline
Large body text for introductions and hero descriptions.
Standard body text for paragraphs, descriptions, and general content throughout the design system.
Small body text for metadata, captions, and supplementary information.
MONO CAPTION / LABEL
Color Palette
Neutral-first system with accent colors. Hex, RGB, HSL, and semantic roles.
Neutral Scale
50
#FAFAFA
100
#F4F4F5
200
#E4E4E7
300
#D4D4D8
400
#A1A1AA
500
#71717A
600
#52525B
700
#3F3F46
800
#27272A
900
#18181B
950
#09090B
Semantic & Accent
Primary
#18181B
rgb(24, 24, 27)
hsl(240, 6%, 10%)
Text, buttons, headers
Accent
#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
Links, focus, badges
Warm
#F59E0B
rgb(245, 158, 11)
hsl(38, 92%, 50%)
Highlights, ratings
Success
#10B981
rgb(16, 185, 129)
Status, confirmations
Warning
#EAB308
rgb(234, 179, 8)
Alerts, cautions
Error
#EF4444
rgb(239, 68, 68)
Errors, destructive
Gradients
UI Components
Interactive elements with built-in animations, hover effects, and transitions.
Buttons
All button variants with shimmer, beam, glow, and hover animations.
Beam Animation Button
Icon Buttons
Inputs
Form elements with focus animations and validation states.
This field is required
Cards
Destination, feature, and content cards with hover interactions.
Santorini Sunset
Private villas overlooking the caldera.
Autumn in Kyoto
Cinque Terre
Ocean Paradise
Navbar
Glass morphism navigation with blur backdrop and animated links.
Badges & Tooltips
Status indicators, tags, and informational overlays.
Tooltip Positions
Modals & Sections
Overlay patterns and section layouts.
Book Your Journey
Select your preferred dates and travelers to begin.
Flashlight Cards
Interactive cards with mouse-following light effect.
Navigate
AI-powered itineraries tailored to your travel style.
Protected
24/7 concierge support across every timezone.
Exclusive
Access to off-market estates and VIP experiences.
Icon System
Lucide & Solar (Iconify) icon sets, optimized for travel UI.
Lucide Icons
Solar Icons (Iconify)
Motion Library
Scroll-triggered, hover, and continuous animations built for performance.
Infinite Marquee Loop
Scroll-Triggered Entrance
Fade + Blur In
opacity: 0 -> 1, translateY(30px -> 0), blur(10px -> 0)
animationIn 0.8s ease-out
Staggered Delay
Each element enters sequentially with increasing delay.
delay: 0.3s, 0.5s, 0.7s...
IntersectionObserver
Triggers when element enters the viewport at 20% threshold.
threshold: 0.2, once: true
Shimmer & Beam Effects
Hover Shimmer
Light sweep that follows cursor interaction.
@keyframes shimmer { translateX(-100%) -> translateX(200%) }
Conic Beam
Spinning conic-gradient border animation.
conic-gradient + spin 3s linear infinite
Continuous Animations
animate-pulse
animate-ping
animate-float
animate-breathe
Animated Map Nodes
Begin your journey.
A design system built for the future of travel experiences. Elegant, animated, and endlessly customizable.