Genesis Travel

Overview

Genesis is a premium travel and lifestyle landing template that embodies the aesthetic of **Aspirational Realism**—a design philosophy that combines photorealistic hero imagery with clean, minimalist interface elements to evoke wanderlust and discovery. The brand serves travel platforms, hospitality brands, and lifestyle marketers who want to inspire users through immersive visual storytelling while maintaining functional clarity. The UI personality is conversational yet authoritative: it speaks to the user's desire for escape without breathlessness, grounding aspirational copy in practical interaction patterns (search fields, date pickers, location inputs). The emotional response is one of calm anticipation—the interface feels like a trusted travel concierge, not a frantic booking engine.

Voice and tone: Genesis uses warm, inviting language that assumes the user is already dreaming of their next destination. Vocabulary leans toward sensory descriptors ("Escape," "Discover," "Unforgettable") paired with concrete, actionable CTAs ("Sign Up," "Search"). Sentences are declarative and short—never apologetic, never overly casual. Example: "Escape to your dream destination. Plan your holiday for wonderful discoveries." The brand personality is sophisticated yet approachable, premium without pretension.

Colors

Genesis employs a **Dual-Palette Strategy**: a vibrant, energetic primary accent (Blue #3b82f6) for interactive elements and calls-to-action, paired with a warm secondary accent (Orange #f97316) for supporting highlights and status indicators. The surface palette is anchored in pure white (#ffffff) for maximum clarity and contrast, with a carefully calibrated gray scale (surface-container #e9ecef, on-surface-variant #6c757d) for secondary text and disabled states. The primary blue (#3b82f6) is used exclusively on buttons, links, focus states, and the search CTA—it is the brand's signature accent and the most clickable color on the page. Secondary orange (#f97316) appears on accent badges, highlight callouts, and tertiary actions. The outline color (#7895ce) is a muted blue-gray used for bo

Typography

The type system is built on **InterDisplay**, a geometric sans-serif that conveys modernity and clarity. The hierarchy spans from Display (60px, 700 weight) for hero headlines down to Label-sm (12px, 500 weight) for metadata and badges. Display and Headline-lg use tight letter-spacing (-0.04em to -0.02em) to create visual impact and reduce perceived size, making large text feel intentional rather than overwhelming. Body copy (16–18px, 400 weight) is set at 24–28px line-height to ensure comfortable reading over the full viewport width. All interactive labels (buttons, form fields) use Label-md (14px, 500 weight) with 0.01em letter-spacing for crisp, scannable text. On small labels over busy backgrounds (e.g., badge text over a gradient), apply text-shadow: 0 2px 4px rgba(0,0,0,0.15) to ensu

Layout

Genesis uses a **Fluid-Container Grid Model** with a 12-column layout and a max-width of 1152px, centered on the viewport. The hero section spans full-width with a fixed-height container (52rem / 832px) to accommodate the dramatic background imagery and overlay gradient. Below the hero, content sections use the gutter spacing (24px) on mobile and tablet, expanding to 40px (lg spacing) on desktop for breathing room. The search bar and form inputs are positioned absolutely over the hero gradient, creating a layered composition that draws the eye downward. White-space philosophy: sections are separated by lg spacing (40px) vertically, with md spacing (24px) used for internal component padding. The container max-width (1152px) ensures text remains scannable on ultra-wide displays. Grid columns

Elevation & Depth

Depth in Genesis is achieved through **Layered Photorealism with Subtle Shadows**. The visual hierarchy is built on three elevation levels: (1) Base Layer—the full-width hero background image with a 50% opacity black overlay (rgba(0,0,0,0.5)) and a subtle blur effect (backdrop-filter: blur(0.75px)) to soften the photographic texture; (2) Mid Layer—white cards and form containers with a soft drop shadow (box-shadow: 0 4px 12px rgba(0,0,0,0.08)) and a 1px border in surface-container-high (#d0d0d0) to define edges without harshness; (3) Top Layer—interactive elements (buttons, search bar) with a

Shapes

Genesis employs a **Soft-Technical Roundedness Philosophy**—combining full-radius pill buttons (border-radius: 9999px) for primary CTAs with moderate corner radii (1rem / 16px) for cards and containers. This creates a visual contrast: pill-shaped buttons feel friendly and approachable, while rounded-corner cards maintain structural clarity. Input fields use full-radius (9999px) to match button styling, creating a cohesive interaction zone. The hero section uses a subtle rounded-top (rounded-t-3xl on mobile, rounded-t-4xl on desktop, approximately 1.5–2rem) to soften the transition from the ful

Components

Action Elements Primary buttons use the signature blue (#3b82f6) with full-radius (9999px), 40px height, and 8px vertical / 24px horizontal padding. On hover, the background darkens to #0284c7 with a 200ms ease-in-out transition and a subtle lift (box-shadow transitions from md to lg elevation). The search button (prominent on the hero) uses the same styling but with increased horizontal padding (32px) and an md shadow by default to signal importance. Secondary buttons are transparent with a 1px border (surface-container-high #d0d0d0) and primary text color; on hover, they fill with surface-container-low (#f0f0f0). All buttons use Label-md typography (14px, 500 weight) for consistent scanability.

Containers & Surfaces Cards use a white background (#ffffff) with a 1px border (surfa

Do's and Don'ts

**Do**

• Do use the primary blue (#3b82f6) exclusively for CTAs, links, and focus states—it is the brand's signature accent and must remain visually distinct.
• Do apply full-radius (9999px) to all primary buttons and input fields to create a cohesive, friendly interaction zone.
• Do maintain the 50% opacity black overlay (rgba(0,0,0,0.5)) on hero backgrounds to ensure text legibility and visual hierarchy.
• Do use md spacing (24px) for section separation and internal card padding to create breathing room without excessive whitespace.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms with ease-in-out timing to signal interactivity without jarring motion.

**Don't**

• Don't use orange (#f97316) or cyan (#06b6d4) as primary CTAs—these are secondary accents and will dilute the brand's visual focus.
• Don't apply box-shadow values larger than lg (0 16px 40px rgba(0,0,0,0.12)) on standard cards; excessive shadow creates visual clutter and reduces perceived clarity.
• Don't use rounded corners smaller than 0.5rem (8px) on interactive elements; this reduces touch target clarity and feels overly technical.
• Don't place text directly on the hero background without the 50% opacity overlay—contrast will fail and readability will suffer, especially on mobile.