The Damai

Overview

The Damai is a luxury resort brand system grounded in **Warm Minimalism with Organic Sophistication**—an aesthetic that marries the austere clarity of contemporary design with the tactile, earthy warmth of Balinese natural materials. The visual language prioritizes serene negative space, refined typography pairings (Kaftan Serif for display, ABC Whyte for body), and a restrained but distinctive color palette anchored by a burnt-orange primary (#903C02) and supporting teal accents (#0A6365, #2CA09E). The design evokes a sense of hidden luxury: not ostentatious, but deeply considered. Every interface element—from cards to buttons—is designed to feel like a carefully curated object in a gallery-like environment.

The brand voice is calm, precise, and understated. Sentences are direct and sensory without breathlessness: "Escape to a hidden retreat where every detail has been considered." The tone avoids superlatives and marketing clichés; instead, it speaks to the guest's desire for authenticity and discovery. Vocabulary leans into natural materials (stone, wood, water), spatial concepts (sanctuary, retreat, threshold), and tactile language (serene, refined, intimate). The brand personality is that of a thoughtful curator rather than a promoter—someone who trusts the beauty of the resort to speak for itself.

Colors

The color system is built on a foundation of warm, desaturated neutrals (surface palette ranging from #f5f1ed to #cac3bb) that evoke natural stone and linen—the visual language of a high-end retreat. The primary accent, burnt-orange (#903C02), is used exclusively for interactive elements (buttons, links, focus states) and key brand moments; it appears sparingly but with high impact, creating a sense of intentionality. Secondary and tertiary colors—deep teal (#0A6365) and butterfly green (#2CA09E)—are reserved for supporting UI patterns (badges, secondary buttons, status indicators) and never compete with primary for attention.

Surface hierarchy is critical: the surface stack progresses from the brightest (#fefdfb) through mid-tone containers (#e0d9d1) to the darkest container (#cac3bb), a

Typography

The type system pairs Kaftan Serif (a refined serif face) for display and headline levels with ABC Whyte (a geometric sans-serif) for body and label text, creating a sophisticated hierarchy that signals editorial authority while maintaining approachability. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero moments and page titles; headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) introduces subsections. Body text uses ABC Whyte at 16px (body-md) or 18px (body-lg) with 400 weight and 24–28px line-height, ensuring comfortable reading at arm's length on mobile and desktop. Labels and UI text use 12–14px with 500–600 weight and 0.01–0.05em letter-spacing to add visual crispness. On small labels over busy backgrounds (e.g., badges over i

Layout

The layout system uses a 12-column grid with a max-width of 1240px, allowing content to breathe on large screens while maintaining focus on medium and small devices. The spacing scale is semantic: unit (8px) is the base increment, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. Gutter spacing is consistently 24px on desktop, reducing to 12px on tablet and mobile. Container padding follows the gutter rule: 24px on desktop, 16px on tablet, 12px on mobile. The design favors generous white space—sections are separated by at least lg spacing (40px), and cards within a grid maintain md spacing (24px) between them. This creates a calm, uncluttered visual experience that mirrors the resort's posit

Elevation & Depth

Depth is conveyed through a restrained shadow system and layered surface colors rather than dramatic drop shadows. Level 1 (Base) is the page background (#f5f1ed) with no shadow. Level 2 (Standard Card) uses surface-container (#e0d9d1) with a soft shadow of 0 1px 2px rgba(50, 32, 24, 0.06)—barely perceptible, suggesting the card sits just above the base. Level 3 (Elevated Card/Modal) uses surface-container-high (#d5cec6) with a medium shadow of 0 4px 12px rgba(50, 32, 24, 0.08), creating clear separation. Level 4 (Floating/Overlay) uses glass overlays with backdrop-filter: blur(8px), backgroun

Shapes

The shape philosophy is **Refined Geometry**—a balance between the softness of organic forms and the precision of architectural lines. Buttons and input fields use 1rem (16px) border-radius, creating a gentle, approachable feel without the playfulness of fully rounded corners. Cards and containers use 1rem as well, maintaining visual consistency. Badges and pill-shaped elements use full (9999px) border-radius to signal their secondary, decorative nature. Modals and glass overlays use 1.5rem (24px) for a slightly more pronounced softness, suggesting they are special, elevated moments. The ratio

Components

Action Elements Buttons are the primary call-to-action mechanism. **button-primary** uses the burnt-orange primary (#903C02) with white text, 12px horizontal padding, 48px height, and 1rem border-radius. On hover, the background shifts to #6d2d00 (a darker shade of primary) over 200ms, signaling interactivity without a jarring color flip. **button-secondary** is transparent with a 1px border in primary and primary text; on hover, it fills with primary-container (#ffdcc8) and shifts text to on-primary-container (#3a1500), creating a subtle fill effect. Both buttons use label-md typography (14px, 600 weight) and never exceed 48px height to maintain touch-target accessibility.

Containers & Surfaces **card** is the foundational container: surface-container background (#e0d9d1), 1rem b

Do's and Don'ts

**Do**

• Do use primary (#903C02) exclusively for interactive moments: buttons, links, focus states, and key brand callouts. Restraint makes it more powerful.
• Do maintain at least 40px of vertical spacing (lg) between major sections to preserve the calm, gallery-like aesthetic.
• Do pair Kaftan Serif headlines with ABC Whyte body text; never reverse this pairing or mix serif body with sans headlines.
• Do apply smooth 150–200ms transitions on all interactive state changes (hover, focus, active) to prevent jarring visual shifts.
• Do use the surface-container stack (#e0d9d1 → #d5cec6 → #cac3bb) to establish depth; never introduce new background colors outside this range.
• Do apply text-shadow: 0 2px 4px rgba(50, 32, 24, 0.15) on small labels (12px) placed over imagery to ensure legibility.

**Don't**

• Don't use secondary (#0A6365) or tertiary (#2CA09E) as primary button colors; they are supporting accents only.
• Don't apply border-radius larger than 1.5rem on standard UI elements; it undermines the refined, architectural aesthetic.
• Don't use shadows heavier than lg (0 2em 2em rgba(50, 32, 24, 0.1)); the design relies on surface color hierarchy, not dramatic depth.
• Don't mix serif and sans-serif within a single headline or body paragraph; maintain clear typographic separation between display and body layers.
• Don't reduce spacing below md (24px) between major content sections; cramped layouts contradict the serene, spacious brand positioning.
• Don't animate color changes on hover for more than 200ms; slow transitions feel sluggish and undermine the refined, responsive feel.