Royal Palms

Overview

Royal Palms is a luxury hospitality brand that embodies refined elegance through a carefully curated aesthetic of warm earth tones, architectural minimalism, and timeless sophistication. The design system centers on a philosophy of 'Warm Minimalism'—where restraint meets richness. The brand serves discerning travelers seeking sanctuary in spaces that balance opulence with serenity, using a palette dominated by warm golds (#b88f3a), deep charcoals (#1c1a16), and soft creams (#f6f2ec) to evoke both comfort and prestige. The visual language is deliberately understated, allowing the architecture and natural materials to speak louder than decoration.

The brand voice is cultivated, unhurried, and deeply hospitable. Tone: warm without being casual, luxurious without pretension, precise without coldness. Vocabulary favors Spanish heritage terms and sensory language—'refugio' (refuge), 'serenidad' (serenity), 'elegancia' (elegance)—paired with English clarity for international guests. Example sentence in brand voice: 'Donde el lujo se encuentra con la serenidad. Descubre un refugio de elegancia y confort en el corazón del paraíso.' (Where luxury meets serenity. Discover a refuge of elegance and comfort in the heart of paradise.)

Colors

The color system is built on a foundation of sophisticated restraint, anchored by a near-black surface (#0b0b0b) that provides dramatic contrast for warm accent colors. Primary (#b88f3a) is the signature warm gold used exclusively on call-to-action buttons, interactive highlights, and brand moments—it commands attention through warmth rather than saturation. Secondary (#bf9a4f) provides a deeper, more muted gold for supporting elements and hover states. The surface stack progresses from surface (#0b0b0b) through surface-container (#1c1c1c) to surface-container-highest (#3a3a3a), creating subtle depth for layered UI without harsh contrast. On-surface (#ffffff) is pure white for maximum legibility over dark backgrounds. Tertiary (#6a645a) is a warm taupe used for secondary text, disabled sta

Typography

The typography system pairs Playfair Display (serif, elegant, heritage-forward) for all display and headline levels with Inter (sans-serif, modern, legible) for body and label text. This pairing communicates both timelessness and contemporary clarity—Playfair anchors the brand identity with its high-contrast letterforms and generous spacing, while Inter ensures accessibility and rhythm in supporting content. Display (72px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines and major section breaks, commanding presence without aggression. Headline-lg (48px, 400 weight) is used for section titles and prominent messaging. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for hero copy and descriptive text, with generous line-height (1.56x) to enhance leg

Layout

The layout system uses a fluid 12-column grid with a maximum container width of 1400px, allowing content to breathe on large screens while maintaining focus on medium viewports (768px–1024px). The hero section spans full viewport height with a background image overlay (opacity: 0.4 via rgba(0, 0, 0, 0.4)) to ensure text legibility. Section spacing follows a semantic rhythm: lg spacing (40px) separates major sections, md spacing (24px) divides subsections, and sm spacing (12px) creates micro-rhythm within components. The gutter (24px) is applied consistently to horizontal padding on all container edges, scaling to 16px on mobile viewports. White-space is treated as a design element—never compressed for content density. Cards and content blocks use md padding (24px) internally, with lg spaci

Elevation & Depth

Depth is achieved through a restrained shadow system that emphasizes subtle layering rather than dramatic separation. The base layer (Level 1) is the surface (#0b0b0b) with no shadow. Level 2 (standard cards, input fields) uses elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.08)—a barely perceptible shadow that suggests lift without drawing attention. Level 3 (modals, elevated cards, dropdowns) uses elevation-md: 0 4px 12px rgba(0, 0, 0, 0.12)—a soft, diffused shadow with 4px blur and 12px spread, creating a sense of floating without harshness. Level 4 (overlays, critical modals) uses elevation-lg: 0

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used sparingly and purposefully to soften hard edges without compromising the brand's refined, structured aesthetic. Buttons use rounded-lg (1rem / 16px) to create approachable, touchable targets while maintaining geometric clarity. Input fields and standard cards use rounded-DEFAULT (0.5rem / 8px) for subtle softening that feels intentional rather than decorative. Modals and elevated containers use rounded-xl (1.5rem / 24px) to signal importance and create visual distinction from standard UI. Badges and pill-shaped elements

Components

Action Elements Buttons are the primary interactive element and use a two-tier system: button-primary (#b88f3a, 48px height, 12px 24px padding, rounded-lg) for primary calls-to-action (e.g., 'Explorar Habitaciones', 'Reservar Ahora'), and button-secondary (transparent background, white border at rgba(255, 255, 255, 0.4), 48px height) for secondary actions (e.g., 'Conocer Más'). On hover, button-primary shifts to primary-fixed-dim (#b88f3a) with a 200ms ease transition—no scale or shadow change, maintaining the brand's refined restraint. Button-secondary-hover applies background: rgba(255, 255, 255, 0.08) and border-color: rgba(255, 255, 255, 0.6) with the same 200ms transition. All buttons use label-md typography (14px, 600 weight) with letter-spacing: 0.01em for enhanced scannability.

Do's and Don'ts

**Do**

• Do use primary (#b88f3a) exclusively on interactive elements and brand moments—never as a background or neutral fill.
• Do maintain the 200ms ease transition timing on all interactive state changes to preserve the brand's refined, unhurried aesthetic.
• Do apply generous line-height (1.5–1.6x) to body text over dark backgrounds to enhance legibility and create visual breathing room.
• Do use Playfair Display for all headlines and display text to anchor the brand's heritage and sophistication.
• Do respect the lg spacing (40px) between major sections to prevent visual crowding and maintain the brand's minimalist restraint.

**Don't**

• Don't use saturated or bright accent colors—primary (#b88f3a) is warm but muted, never neon or high-chroma.
• Don't apply shadows larger than elevation-lg (0 16px 40px rgba(0, 0, 0, 0.15)) as this breaks the brand's subtle depth hierarchy.
• Don't mix serif and sans-serif fonts within a single text block—use Playfair for headlines, Inter for body, never both in the same line.
• Don't compress spacing below sm (12px) for internal component padding—the brand prioritizes breathing room over density.
• Don't use rounded-full (9999px) on standard cards or containers—reserve it for badges, pills, and primary action buttons only.