Royal Palms

Overview

Royal Palms is a luxury hospitality brand that embodies **Architectural Warmth**—a design philosophy that merges minimalist restraint with tactile, earthy elegance. The visual system celebrates natural materials (warm golds, soft creams, deep browns) and clean geometric forms, evoking the serene confidence of high-end resort architecture. Every interface element feels like a curated object in a refined space: intentional, timeless, and never rushed.

The brand voice is cultivated, unhurried, and deeply respectful of the guest's time. Language is precise and evocative without being flowery: "Donde el lujo se encuentra con la serenidad" (Where luxury meets serenity) rather than "Experience paradise." Tone: warm but professional, inviting but never presumptuous. Example: "Your suite awaits at 3 PM—we've prepared it with care."

Colors

The color system is rooted in a warm, earthy palette that reflects the natural materials and ambient light of luxury hospitality spaces. **Primary (#b88f3a)** is a refined warm gold—the signature accent used on call-to-action buttons ("Explorar Habitaciones"), interactive states, and key navigation elements. It appears sparingly but decisively, commanding attention without aggression. **Secondary (#bf9a4f)** is a slightly deeper, more saturated gold used for supporting accents and secondary CTAs; it provides tonal depth while maintaining warmth. **Tertiary (#8b7355)** is a muted warm brown, reserved for tertiary UI elements and decorative accents that ground the interface in natural earth tones.

The surface stack is built on a near-black foundation (#0b0b0b) with carefully calibrated cont

Typography

The type system pairs **Playfair Display** (serif, 400 weight) for all display and headline levels—creating an immediate sense of editorial sophistication and timelessness—with **Inter** (sans-serif, 400–600 weight) for body and label text, ensuring legibility and contemporary clarity. Display (72px, 400 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (48px) and Headline-md (36px) establish section hierarchies with elegant restraint. Body-lg (18px) and Body-md (16px) are set at generous line-heights (28px and 24px respectively) to maximize readability in long-form content like room descriptions and guest information. Label-md (14px, 600 weight) is used for buttons, form labels, and navigation—the weight shift to 600 ensures these micro-interactions fee

Layout

The layout system uses a 12-column fluid grid with a max-width of 1400px, allowing content to breathe on large screens while maintaining focus. Spacing is semantic and hierarchical: **lg spacing (40px)** separates major sections (hero from amenities, amenities from booking); **md spacing (24px)** creates breathing room within card groups and between related content blocks; **sm spacing (12px)** is used for internal component padding and tight groupings. The gutter is consistently 24px on desktop, scaling to 16px on tablet and 12px on mobile. Container padding follows the gutter rule, ensuring content never touches viewport edges. White-space is treated as a design material—generous margins around hero copy (40px top/bottom) and breathing room between cards (24px gap) reinforce the brand's

Elevation & Depth

Depth is conveyed through a restrained shadow system that mimics the soft, diffused light of luxury interiors. **Level 1 (Base)**: no shadow; the dark surface (#0b0b0b) is the foundation. **Level 2 (Standard Cards)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a subtle, close shadow that lifts cards 4–6px from the base, used for all default card states and input fields. **Level 3 (Elevated/Modals)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18)—a softer, more diffuse shadow suggesting 12–16px of elevation, used for hover states on cards, modals, and dropdowns. Shadows are always warm-black (rgba(

Shapes

The shape language is **Refined Minimalism**—sharp where it matters, soft where it breathes. Buttons and interactive elements use rounded-md (0.75rem / 12px) border-radius, creating a modern, approachable feel that's neither harsh nor overly rounded. Cards and containers default to rounded-lg (1rem / 16px), reinforcing the architectural, crafted quality of the brand. Input fields use rounded-DEFAULT (0.5rem / 8px), a subtle softness that feels contemporary without distraction. Navigation pills and badges use rounded-full (9999px), creating a cohesive, unified appearance for micro-interactions.

Components

Action Elements Buttons are the primary interaction vectors and must feel premium yet responsive. **button-primary** uses primary gold (#b88f3a) with on-primary text (#1c1a16), 44px height, 12px vertical / 24px horizontal padding, and rounded-md (12px). On hover, the background shifts to primary-fixed-dim (#b88f3a with 0.9 opacity) and gains a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)), creating a tactile lift. On active/press, scale the button to 0.98 and shift to inverse-primary (#c59a42) for immediate visual feedback. All button transitions use 200ms ease timing. **button-secondary** mirrors the primary structure but uses a transparent background with a 1px outline-variant border (rgba(91, 86, 77, 1)) and on-surface text. On hover, add a semi-transparent white overlay (rgba(255,

Do's and Don'ts

**Do**

• Do use primary gold (#b88f3a) sparingly and intentionally—reserve it for CTAs, active states, and key brand moments. Overuse dilutes its impact.
• Do maintain generous white-space (40px+ margins) around hero content and between major sections; this reinforces the luxury, unhurried brand personality.
• Do pair Playfair Display headlines with Inter body text consistently; this serif-sans pairing is the visual signature and should never be inverted.
• Do apply warm-black shadows (rgba(0, 0, 0, X)) and warm-gray borders (outline-variant #5b564d); cool-tinted shadows or cool grays break the warm, cohesive aesthetic.
• Do use 200–300ms ease transitions for all interactive states; this creates a tactile, premium feel that feels responsive without being jarring.

**Don't**

• Don't use the primary gold on body text or large background areas; it's an accent color, not a dominant surface. Reserve it for buttons, links, and micro-interactions.
• Don't apply hard shadows (high blur, high spread) or glowing effects; the shadow system is soft and integrated, never dramatic or neon-like.
• Don't mix serif and sans-serif at the same hierarchy level (e.g., don't use Playfair for body text or Inter for display headlines); the pairing works because each has a clear role.
• Don't use cool grays, cool blacks, or cool-tinted borders; all neutrals should lean warm (toward brown/tan) to maintain the earthy, luxurious aesthetic.
• Don't animate or transition elements faster than 200ms or slower than 400ms without deliberate reason; the 200–300ms range feels premium and responsive, while faster feels cheap and slower feels sluggish.