Villa Resorts

Overview

Villa Resorts is a luxury hospitality brand anchored in the Maldives archipelago, serving affluent travelers seeking premium island experiences. The design system embodies 'Tropical Elegance'—a sophisticated aesthetic that marries deep burgundy heritage (rgb(140, 0, 80)) with vibrant golden accents (rgb(255, 195, 10)), evoking both timeless serenity and contemporary luxury. The UI conveys calm authority: serene, never fussy; opulent, never garish. The brand personality is refined yet approachable, speaking to travelers who value both exclusivity and genuine hospitality.

The voice is warm, precise, and evocative—painting vivid sensory experiences without hyperbole. Vocabulary leans toward natural beauty, craftsmanship, and personal discovery: 'immersed,' 'unrivaled,' 'embrace,' 'seafarer.' Example sentence in brand voice: 'Step ashore to unrivaled serenity, where overwater bungalows frame turquoise horizons and every sunset feels like a private ceremony.'

Colors

The color system is built on a clean white canvas (rgb(255, 255, 255)) anchored by two signature accent colors: a deep burgundy primary (rgb(140, 0, 80), #8c0050) that conveys luxury and heritage, and a luminous golden accent (rgb(255, 195, 10), #ffc30a) that energizes CTAs and draws focus. Primary (#8c0050) is used for body text, headlines, and brand identity; it appears on 58% of the page, establishing visual weight and sophistication. The golden accent (#ffc30a) is reserved for primary CTAs ('Book now'), hover states, and key interactive elements—it commands attention without overwhelming. Secondary burgundy (#96155e) supports depth in containers and secondary UI. Tertiary green (#2ab173) is used sparingly for status indicators and positive actions. The surface stack progresses from pur

Typography

The type system pairs serif display faces (albertus-mt-w04 for headlines, brown-ll for body) with sans-serif labels (Open Sans for UI controls), creating a hierarchy that feels both editorial and functional. Display and headline levels (26–60px) use the serif family to convey editorial authority and luxury; body copy (16–18px) in brown-ll maintains readability while preserving brand warmth. Labels and UI text (12–14px) shift to Open Sans with increased weight (700) and letter-spacing (0.01–0.05em) to ensure clarity on interactive elements. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) overlaid on photographic backgrounds to preserve legibility. Headline weights remain light (400) to avoid heaviness; button labels use 700 weight for emphasis. Line-height is generous

Layout

The layout operates on a 12-column grid with a max-width of 1140px, centered on the viewport. The grid uses 15px gutters (padding-left/right on cells) and 24px section margins (lg spacing) to create breathing room between major content blocks. The hero spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over imagery. Form sections (booking, search) use 2–3 column layouts on desktop, stacking to single-column on mobile. White-space is generous: 40px (lg) separates major sections, 24px (md) separates cards within a section, and 12px (sm) separates inline elements. Container max-width of 1140px prevents line-length from exceeding 80 characters on body text, supporting readability. The spacing scale is semantic: use xs (4px) for micro-interactions (i

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness. Level 1 (Base): white background (rgb(255, 255, 255)) with no shadow. Level 2 (Cards, inputs): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift. Level 3 (Modals, overlays, hover states): box-shadow 1px 2px 8px rgba(0, 0, 0, 0.2), adding depth and focus. Hover transitions use 200ms ease-in-out to smoothly elevate cards and buttons. The cookie banner and modal overlays use a 2px solid border in secondary burgundy (#96155e) paired with Level 3 shadow to create visual containment. Avoid drop-shadows larger

Shapes

The shape philosophy is 'Refined Minimalism'—sharp corners on most elements with selective rounding for softness and approachability. Buttons use minimal rounding (2px for primary, 30px for secondary pill-style), reflecting precision and control. Cards and containers use 0px (flat) or 4px (subtle) rounding to maintain architectural clarity. Modals and overlays use 12px rounding to signal containment and focus. Input fields use 0px rounding to align with form-like functionality. The cookie banner uses 12px rounding paired with a 2px border to create a contained, dialog-like appearance. The full

Components

Action Elements Primary buttons use golden background (rgb(255, 195, 10)) with burgundy text (rgb(140, 0, 80)), 13px vertical × 25px horizontal padding, 2px border-radius, and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15). On hover, shift to primary-fixed-dim (rgb(243, 199, 46)) with 200ms transition. Secondary buttons use golden container (rgb(243, 199, 46)) with burgundy text, 30px horizontal padding, 30px border-radius (pill-style), and no shadow. Links use burgundy text (rgb(140, 0, 80)) with 1px bottom border; on hover, shift to golden (rgb(255, 195, 10)) with matching border and 200ms transition.

Containers & Surfaces Cards use white background (rgb(255, 255, 255)), 24px padding, 0–4px border-radius, and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15). On hover, elevate to box-shadow 1p

Do's and Don'ts

**Do**

• Do use burgundy (#8c0050) for all body text and headlines to maintain brand consistency and ensure the primary color anchors every page.
• Do reserve golden (#ffc30a) exclusively for primary CTAs and hover states—overuse dilutes its power to draw attention.
• Do apply 24px (md) padding inside cards and 40px (lg) margins between major sections to create generous white-space that signals luxury.
• Do use serif fonts (albertus-mt-w04, brown-ll) for all editorial content (headlines, body) to convey heritage and sophistication.
• Do pair shadows with 200ms transitions on interactive elements to create smooth, predictable micro-interactions that feel premium.

**Don't**

• Don't use pure black (#000000) or near-black for text; always use primary burgundy (#8c0050) to maintain brand voice and warmth.
• Don't apply border-radius greater than 4px to cards or containers—sharp corners reinforce architectural precision; save rounding for badges and pills.
• Don't use sans-serif fonts for body copy or headlines; reserve Open Sans only for UI labels and controls to preserve the editorial hierarchy.
• Don't stack shadows larger than 8px blur radius; the aesthetic favors subtle elevation over dramatic depth—use 0 3px 8px or 1px 2px 8px only.
• Don't apply golden accent to secondary or tertiary UI elements; it must remain exclusive to primary CTAs and focus states to maintain visual hierarchy.