# Luxury Frontend Design System (2026 Edition)

The Calian Hotel digital brand embodies modern international luxury: tranquil, tactile, refined, and effortlessly prestigious.

---

## 1. Color Palette

### Primary Palette
- **Deep Charcoal (`#1A1A1A` / `bg-[#1A1A1A]`):** The primary anchor for text, high-contrast dark sections, footer, and editorial accents.
- **Warm Ivory (`#FBF9F5` / `bg-[#FBF9F5]`):** The canvas background. Replaces harsh sterile white with a warm, linen-like hospitality tone.
- **Champagne Gold (`#C5A880` / `text-[#C5A880]`):** Used strictly as a refined accent (borders, highlights, CTA accents, badges). Never used as overwhelming background blocks.
- **Muted Slate (`#4A4E54` / `text-[#4A4E54]`):** Subtitle text, metadata, secondary icons, and soft architectural dividers.

### Supporting UI Tones
- **Card Ivory (`#FFFFFF` or `#F5F1EA`):** Elevation backgrounds.
- **Success Forest (`#2D5A27`):** Confirmed status, verified payments.
- **Alert Terracotta (`#9C382C`):** Out of order, cancelation notices, errors.
- **Warning Amber (`#C27D26`):** Dirty rooms, pending payments, draft RFPs.

---

## 2. Typography Hierarchy

### Editorial Serif: Cormorant Garamond
- Used for high-impact hero headings, section titles, room titles, pull quotes, and luxury storytelling.
- Styles: Light (300), Regular (400), Medium (500), SemiBold (600), Italic (400i).

### Modern Sans-Serif: Plus Jakarta Sans
- Used for interface controls, booking date pickers, folio tables, staff inputs, prices, and navigation.
- Styles: Regular (400), Medium (500), SemiBold (600), Bold (700).

---

## 3. UI Component Patterns

- **Cinematic Hero:** Full-height or generous 85vh framing with subtle ambient zoom, clean typography overlay, and floating booking bar.
- **Floating Booking Widget:** Clean, pill-shaped or framed floating bar with check-in, check-out, guests, room type, and "Check Availability" CTA.
- **Editorial Asymmetric Grid:** Alternating image-heavy storytelling modules rather than generic SaaS cards.
- **Luxury Room Cards:** High-res photography, subtle hover zoom, clear specs (m², bed type, max guests), starting rate, and direct booking actions.
- **Interactive Modals:** Smooth backdrop blur (`backdrop-blur-md`), elegant gold focus rings, and clear keyboard accessible escape routes.