Praya & Co.

Overview

Praya & Co. is a luxury travel agency that transforms destination curation into an art form. The brand serves discerning travelers seeking bespoke, culturally immersive experiences—not generic itineraries. The design aesthetic is 'Mediterranean Warmth with Contemporary Restraint': earthy terracottas (#7b4646), deep teals (#004433), and cream backgrounds (#fefaef) evoke sun-drenched coastal villas and heritage craftsmanship, while the typography pairing of serif (Fraunces) headlines with clean sans-serif (Montserrat) body text creates a sophisticated tension between timeless elegance and modern accessibility. The emotional response is one of calm anticipation—the UI whispers rather than shouts, inviting users to slow down and dream.

The brand voice is conversational yet authoritative: warm, knowledgeable, never condescending. Vocabulary leans toward sensory language ('sun-soaked cliffside', 'ochre-tiled piazzas', 'salt-air mornings') and avoids corporate jargon. Example sentence in brand voice: 'We don't book trips—we craft stories. Your Positano escape awaits.'

Colors

The color system is anchored in a warm, earthy primary palette that reflects Mediterranean geography and heritage architecture. Primary (#004433, a deep forest-teal) is reserved exclusively for interactive elements—CTAs, links, focus states, and navigation highlights—creating a clear visual hierarchy against the cream background. Secondary (#7b4646, a warm terracotta-brown) dominates the header navigation and accent elements, evoking clay-tiled roofs and sun-baked earth. Tertiary (#df3131, a coral-red) is used sparingly for alerts, testimonial highlights, and secondary CTAs to add warmth without overwhelming.

The surface stack is built on a warm cream foundation (#fefaef, surface) with progressive darkening through surface-container layers (from #f8f5ee to #e5e1d8) to create subtle depth

Typography

The type system pairs Fraunces (a high-contrast serif with generous letterforms) for display and headline levels with Montserrat (a geometric sans-serif) for body and label text. This pairing communicates 'heritage meets contemporary'—Fraunces' ornamental quality evokes travel guides and vintage postcards, while Montserrat's clarity ensures modern legibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) is used for section titles and major content blocks. Body-md (16px, 400 weight, 24px line-height) is the workhorse for descriptive copy, set with generous line-height to enhance readability on screens. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and form labels, with letter-spacing tightene

Layout

The page layout uses a 12-column grid system with a fixed max-width of 1280px, centered on desktop and fluid on mobile. The hero section spans full width with a background image (Positano cliffside) and overlaid text content positioned in the right half, creating visual asymmetry that draws the eye. Section spacing follows the lg token (40px) between major content blocks, with md spacing (24px) between cards within a section. The gutter (24px) is applied consistently to left/right margins on desktop, reducing to sm (12px) on tablet and xs (4px) on mobile. Container max-width of 1280px prevents text lines from exceeding 75 characters, maintaining optimal readability. White-space is treated as a design element—generous padding around cards (md: 24px) and breathing room between sections creat

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh drop-shadows in favor of soft, diffused elevation. Level 1 (Base): no shadow; surface elements sit flush on the cream background. Level 2 (Standard Card): box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), a barely-perceptible lift that defines the card boundary without visual weight. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied on card-hover and modal overlays, creating a subtle floating effect. Level 4 (Modal/Overlay): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for full-screen modals an

Shapes

The shape philosophy is 'Refined Minimalism with Warmth'—sharp corners are avoided in favor of subtle, consistent rounding that softens the interface without sacrificing clarity. Buttons use full rounding (border-radius: 50px / 9999px) to create pill-shaped CTAs that feel inviting and tactile, a nod to the rounded edges of Mediterranean pottery. Cards and containers use md rounding (12px / 0.75rem) to provide visual separation while maintaining a contemporary feel. Input fields use 6px rounding (a custom value between sm and DEFAULT) to balance accessibility (rounded corners improve touch targ

Components

Action Elements Buttons are the primary interaction mechanism and use full rounding (50px) with generous padding (12px 32px) to create a substantial, clickable target. Primary buttons (#004433 background, white text) are reserved for main CTAs ('Contact Us', 'Book Now'); secondary buttons use a transparent background with a 2px primary border and primary text, suitable for alternative actions. All buttons apply a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition on hover, shifting to primary-fixed-dim (#004433 darkened) or primary-container (#2b5672) depending on button type. Focus states add a 3px rgba(0, 68, 51, 0.1) box-shadow for keyboard navigation accessibility.

Containers & Surfaces Cards use surface-container (#f5f1e8) background with md rounding (12px) and md padding (24px).

Do's and Don'ts

**Do**

• Do use primary (#004433) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and guide user attention.
• Do apply the full rounding (50px) to primary CTAs to signal approachability and invite interaction; reserve moderate rounding (12px) for containers.
• Do maintain generous white-space (lg spacing: 40px between sections) to evoke luxury and calm; never crowd content.
• Do pair Fraunces headlines with Montserrat body text to communicate 'heritage meets contemporary' and enhance readability.
• Do use the soft shadow system (0 1px 4px rgba(0, 0, 0, 0.06) for standard cards) to define depth subtly without visual heaviness.

**Don't**

• Don't use primary (#004433) for backgrounds or large surface areas; reserve it for interactive elements only.
• Don't apply sharp corners (border-radius: 0) to buttons or cards; the brand relies on subtle rounding to feel warm and approachable.
• Don't use harsh drop-shadows (e.g., 0 10px 30px rgba(0, 0, 0, 0.3)); stick to the defined elevation scale for consistency.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain clear typographic hierarchy by level.
• Don't reduce padding or spacing below the sm token (12px) in cards or sections; white-space is a core brand value.