---
version: alpha
name: "Six Senses"
description: "Barefoot-luxury wellness design system: warm earth-tone canvas, Canto Roman editorial serif over Avenir Next UI, and a near-shadow-free surface language that defers entirely to nature photography and tactile material storytelling"

colors:
  # Surface / canvas — warm natural parchment tones
  background: "#f5f0e8"         # warm sand — primary page canvas
  surface: "#ede8de"            # deeper parchment — card and section surfaces
  surface-warm: "#e8dfd0"       # raw linen — alternate section panels
  surface-dark: "#2c2820"       # deep espresso — hero overlays and dark sections

  # Text / ink
  ink: "#2c2820"                # deep espresso brown — primary text (softened from pure black)
  ink-muted: "#5a5248"          # mid-walnut — secondary text, supporting copy
  ink-quiet: "#9c9087"          # warm stone — captions, placeholders, disabled states
  on-primary: "#f5f0e8"         # sand canvas — text on dark CTA surfaces

  # Brand accent — deep forest green
  primary: "#3d5a47"            # six senses forest green — primary CTA and brand accent
  primary-hover: "#2e4336"      # deeper forest — hover state on green buttons  /* estimated */
  primary-container: "#d4e0d6"  # pale sage — tinted green surface for badges

  # Secondary accent — warm terracotta
  secondary: "#8b5e4a"          # clay terracotta — secondary accent, warmth moments
  on-secondary: "#f5f0e8"       # sand — text on terracotta surfaces

  # Interaction states
  focus-ring: "#3d5a47"         # forest green — focus outline
  text-hover: "#2c2820"         # ink — standard hover text
  focus-tint: "#d4e0d6"         # pale sage — focus background tint  /* estimated */

  # Borders
  border: "#c8bfb0"             # warm taupe — standard border (muted, never harsh)
  border-subtle: "#ddd7cc"      # faint linen — low-emphasis dividers

  # Semantic states
  success: "#3d5a47"            # forest green — confirmation (reuses primary)  /* estimated */
  error: "#8b3a2f"              # deep clay-red — error states  /* estimated */

  # Shadow
  shadow-soft: "#bdb3a4"        # warm stone — subtle shadow tint  /* was rgba(45,40,32,0.12) — flattened to opaque hex */

typography:
  # Canto Roman: Six Senses' proprietary editorial serif (self-hosted Canto-Roman.woff2)
  # Google Fonts substitute: Cormorant Garamond or EB Garamond
  # Avenir Next: humanist geometric sans (self-hosted AvenirNext-Regular.woff2, AvenirNextCondensed-Medium.woff2)
  # Google Fonts substitute: Nunito or DM Sans (nearest open match)

  display-hero:
    fontFamily: "Canto Roman, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Canto Roman, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Canto Roman, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Canto Roman, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0.25px
  body-large:
    fontFamily: "Avenir Next, Nunito, DM Sans, ui-sans-serif, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.15px
  body:
    fontFamily: "Avenir Next, Nunito, DM Sans, ui-sans-serif, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1px
  nav-link:
    fontFamily: "Avenir Next, Nunito, DM Sans, ui-sans-serif, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px
  button-ui:
    fontFamily: "Avenir Next, Nunito, DM Sans, ui-sans-serif, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 2px
  caption:
    fontFamily: "Avenir Next Condensed, Avenir Next, Nunito, DM Sans, ui-sans-serif, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 2.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  card-featured:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 12px
  badge-secondary:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 12px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 40px
---

# Six Senses Design System

## Overview

Six Senses arrives at the intersection of ancient wellness wisdom and contemporary luxury design, and every pixel of the web presence carries that philosophy. The canvas is warm parchment (`{colors.background}`) — neither a neutral developer grey nor a clinical white — the color of undyed handloom cotton or a freshly pressed terra cotta wall dried in afternoon sun. Against this ground, full-bleed landscape photography does the heavy atmospheric work: misty Bhutanese valleys, Ibiza clifftops at dusk, Maldivian atolls in impossible turquoise. The digital shell wraps around those images like the bamboo architecture wraps around a jungle view — present enough to navigate, absent enough to let nature dominate.

The typographic contract is a two-voice arrangement that mirrors the brand's dual philosophy of grounding and transcendence. **Canto Roman** — Six Senses' self-hosted proprietary editorial serif (served as `Canto-Roman.woff2`) — names destinations, sets meditative tone, and occupies every heading moment from the 72px hero caption down to 22px sub-section titles. It has the warmth of a book-cut roman and the quiet authority of type that doesn't need to shout. **Avenir Next**, the humanist geometric sans-serif (self-hosted via `AvenirNext-Regular.woff2` and `AvenirNextCondensed-Medium.woff2`), handles all logistics: navigation links set at `{typography.nav-link}` with 1.5px letter-spacing, CTA labels in uppercase micro-text at 2px tracking, and body paragraphs running at a generous 1.6 line-height. The condensed variant of Avenir Next appears in caption contexts, adding compressed efficiency where space is premium. Neither typeface appears in the other's territory.

The chromatic palette is disciplined earth: forest green (`{colors.primary}`) at `#3d5a47` is the sole saturated accent, appearing exclusively in primary CTAs and focus rings — the color of a canopy walk or a terraced rice paddy. Warm terracotta (`{colors.secondary}`) surfaces as a secondary accent in editorial warmth moments. Every other surface is a variation on the warm parchment-to-espresso gradient. No digital blues, no cool greys, no gradients. The restraint is the point: design that doesn't reach for intensity is design that trusts the environment.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — the color of undyed natural fiber, never neutral grey or digital white
- Proprietary Canto Roman serif for all editorial headings; Avenir Next sans for all navigation, UI, and body copy
- Forest green (`{colors.primary}`) as the sole saturated accent — appears only on primary CTAs and focus states
- Warm terracotta (`{colors.secondary}`) as a secondary warmth accent in editorial contexts
- Button labels in `{typography.button-ui}` uppercase at 2px letter-spacing — spa-wayfinding micro-text
- Sharp-edged surfaces throughout (`{rounded.none}`) — architectural restraint matching the brand's built environments
- Zero gradients on surfaces — depth lives entirely within the photography
- Generous vertical breathing between sections (`{spacing.3xl}` to `{spacing.4xl}`) — the pace of a contemplative walk
- Avenir Next Condensed for `{typography.caption}` treatments — compressed elegance for location eyebrows and taxonomic labels
- Photography always full-bleed and rectangular — never circular crops, never rounded-corner frames
- Navigation typeset in uppercase 1.5px tracked Avenir Next — wayfinding vocabulary from the resort itself

## Colors

### Primary Surface
- **Warm Parchment** (`{colors.background}`): The dominant canvas. A faintly warm off-white that reads as natural fiber — undyed linen or raw cotton. Used for all primary page backgrounds, sticky navigation surfaces, and the default resting state of any UI section.
- **Deep Parchment** (`{colors.surface}`): The card and panel surface — one step deeper than canvas. Used for feature cards, information panels, and sections that need gentle visual separation without introducing a distinct color moment.
- **Raw Linen** (`{colors.surface-warm}`): The third-tier surface tone — warm and slightly duskier. Used for alternate section treatments, testimonial panels, and sections that carry more editorial weight.
- **Espresso Dark** (`{colors.surface-dark}`): Near-black brown for hero overlay panels and dark-mode editorial sections. Pulled from the ink spectrum rather than a neutral black — warmer.

### Text / Ink
- **Deep Espresso** (`{colors.ink}`): Primary text — a brown-tinged near-black that reads as ink on handmade paper. Used for all primary headings, body copy, navigation labels, and icon fills.
- **Walnut** (`{colors.ink-muted}`): Secondary text for supporting copy, card descriptions, form labels, and supplementary navigation items.
- **Warm Stone** (`{colors.ink-quiet}`): Tertiary ink — placeholders, disabled states, low-emphasis meta labels, and caption text in secondary contexts.
- **Sand** (`{colors.on-primary}`): Reversed text on dark or green CTA surfaces, matching the canvas to create a complete ink/canvas flip.

### Brand Accent
- **Forest Green** (`{colors.primary}`): The sole chromatic accent in the system — a deep organic green evoking canopy foliage, terraced rice paddies, and bamboo groves. Applied exclusively to primary CTA buttons, focus rings, and active navigation indicators.
- **Deep Forest** (`{colors.primary-hover}`): The interactive delta for the primary green — a darker step confirming hover without changing hue character.
- **Pale Sage** (`{colors.primary-container}`): Tinted green surface used for badges and environmental labels — reads as a leaf-light wash.
- **Clay Terracotta** (`{colors.secondary}`): Warm reddish-brown accent for editorial warmth moments, secondary decorative treatments, and destination-specific color accents. The color of kiln-fired local pottery.

### Borders & Shadows
- **Warm Taupe** (`{colors.border}`): Standard border — muted and warm, never the harsh sharp lines of a system-default grey.
- **Faint Linen** (`{colors.border-subtle}`): Low-emphasis structural divider for input fields at rest and secondary section breaks.
- **Warm Stone Shadow** (`{colors.shadow-soft}`): Subtle shadow tint — used only in the faintest elevation moments, approximating the natural light diffusion through woven screens.

## Typography

### Font Family
- **Editorial serif**: `Canto Roman`, fallbacks: `Cormorant Garamond, Georgia, Times New Roman, serif`. Self-hosted as `Canto-Roman.woff2` — a warm-voiced roman with text-optimized proportions and gentle stroke contrast. Named and commissioned for Six Senses. For Google Fonts: **Cormorant Garamond** is the closest open substitute.
- **UI sans-serif**: `Avenir Next`, fallbacks: `Nunito, DM Sans, ui-sans-serif, sans-serif`. Self-hosted as `AvenirNext-Regular.woff2`. A humanist geometric sans with elegant proportions. For Google Fonts: **Nunito** or **DM Sans** approximate the warmth without the precise geometry.
- **Condensed variant**: `Avenir Next Condensed`, fallbacks: `Avenir Next, Nunito`. Self-hosted as `AvenirNextCondensed-Medium.woff2`. Used for caption labels where horizontal space is at premium.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero headlines — destination names at landing scale |
| `display` | Section editorial openers — "Regenerative Travel," "Our Resorts" |
| `heading-section` | Major page-section headers and feature category titles |
| `heading-sub` | Resort sub-feature titles, amenity group headings, card title lines |
| `body-large` | Lead editorial paragraphs, destination introduction prose, philosophy statements |
| `body` | Standard body copy, booking details, amenity descriptions |
| `nav-link` | Navigation items — uppercase Avenir Next at 1.5px tracking |
| `button-ui` | CTA labels — uppercase Avenir Next at 2px tracking; the wayfinding voice |
| `caption` | Location eyebrows in Avenir Next Condensed — "IBIZA · SPAIN", taxonomy labels |

### Principles
- **Serif names places; sans handles journeys.** Canto Roman appears exclusively where Six Senses is describing a destination, philosophy, or experience. Avenir Next handles the logistical acts of navigating and booking.
- **Uppercase tracking for micro-text.** Navigation labels, button text, and captions run in uppercase Avenir Next with generous letter-spacing (1.5–2.5px). The effect recalls resort directional signage carved in stone.
- **Single weight throughout Canto Roman.** All serif display sizes run at weight 400 — hierarchy communicates through scale and spacing, not weight escalation.
- **Generous line-height on body copy.** At `1.6` and `1.65`, the body reading rhythm is meditative rather than efficient. Pages are not meant to be scanned.
- **Condensed Avenir in captions only.** The compressed variant (`AvenirNextCondensed-Medium`) appears only at caption scale — it adds vertical information density without conflicting with the open proportions of the primary sans.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The spacing scale opens tightly (4–24px for component internals) and opens dramatically at the section level — `{spacing.2xl}` (64px), `{spacing.3xl}` (96px), and `{spacing.4xl}` (128px) for primary section breathing. This mirrors the brand's architectural sensibility: intimate interior details within an expansive natural frame. Page content never feels crowded; sections arrive with the unhurried rhythm of a guided meditation.

### Grid & Container
- Max content width: ~1440px with generous outer margins
- Hero: full-viewport photography at all breakpoints, with vertically centred or lower-third editorial text overlay
- Resort grid: editorial card layout at 2–3 columns on desktop, with wide gutters and generous card breathing room
- Wellness and experience sections: alternating full-bleed photography + text-on-surface layouts, not grid-heavy

### Whitespace Philosophy
- **Nature-scale breathing**: Section vertical gaps at `{spacing.3xl}` (96px) minimum — content arrives as chapters, not as a scroll feed
- **Photography dominance**: Image regions are never given visible container borders or shadows — they own their territory edge-to-edge
- **Contemplative pace**: Long-form editorial sections (philosophy, sustainability, wellness methodology) are generously padded at both top and bottom, matching the unhurried reading rhythm of the body typography

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all surfaces — canvas, cards, editorial panels |
| Hairline (Level 1) | `border: 1px solid {colors.border}` | Input field outlines, secondary card borders, section separators |
| Subtle Lift (Level 2) | `box-shadow: 0 2px 12px 0 {colors.shadow-soft}` | Dropdown menus, sticky navigation scroll state |
| Focus Ring | `box-shadow: 0 0 0 2px {colors.focus-ring}` | Keyboard focus on interactive controls |

**Shadow Philosophy**: Six Senses designs entirely with natural diffusion in mind. Surfaces do not cast computed shadows — they sit in environmental light. The design language avoids box-shadows on cards, buttons, and editorial panels entirely. The sole exception is navigation — on scroll, the sticky header acquires a barely perceptible warm-stone shadow (`{colors.shadow-soft}`) to signal its elevated position above the content well. Everything else is flat, anchored in the same ambient warmth of the parchment canvas.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Universal default — all buttons, cards, images, inputs, navigation |
| `sm` | 2px | Badge and tag elements only — the sole gentle softening in the system |
| `pill` | 9999px | Not used in primary UI — reserved for edge-case filter chips only |

Six Senses' shape language is architecturally sharp. Every button, card, image frame, and input has zero border-radius. This is consistent with the brand's hospitality environments: rammed earth walls, stone-cut pools, rectangular timber pavilions. Organic softness comes from material texture (photography, natural fiber backgrounds), not from rounded corners. The `{rounded.sm}` 2px token appears exclusively on taxonomy badges and category labels, adding just enough visual separation without introducing a pill aesthetic.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Forest green (`{colors.primary}`) fill, sand text (`{colors.on-primary}`), uppercase Avenir Next at 2px tracking (`{typography.button-ui}`), sharp-edged (`{rounded.none}`), `14px 32px` padding. The only saturated color moment in the navigation chrome. Used for primary actions: "Explore," "Book Now," "Discover."
- **`button-secondary`** — Transparent fill, `{colors.border}` warm taupe outline, `{colors.ink}` espresso label. Same typography and geometry as primary. Used for secondary actions on light surfaces.
- **`button-ghost`** — Transparent fill, no border, `{typography.nav-link}` Avenir Next uppercase with underline or arrow treatment on hover. Inline editorial CTAs.

### Cards

Feature resort cards: `{colors.surface}` deep parchment background, `{rounded.none}` sharp corners, no shadow, `32px` internal padding. Photography leads at top (full-bleed within card region, never inset), with resort name in `{typography.heading-sub}` Canto Roman, location eyebrow in `{typography.caption}` uppercase Avenir Next Condensed, and a body descriptor in `{typography.body}`.

### Inputs

Booking and search form fields: `{colors.background}` parchment surface, `{colors.border-subtle}` hairline at rest, solid `{colors.focus-ring}` green outline on focus, `{rounded.none}` sharp corners, `{typography.body}` Avenir Next at `0.1px` tracking. No glow or colored background shift on focus — just the green outline appearing against the warm ground.

### Badges / Tags

Resort type labels and experience category tags: `{colors.primary-container}` pale sage fill, `{colors.primary}` forest green text, `{typography.caption}` uppercase Avenir Next Condensed at 2.5px tracking, `{rounded.sm}` 2px corners, `4px 12px` padding. Labels: "WELLNESS," "ADVENTURE," "SUSTAINABILITY," "DINING."

### Navigation

The Six Senses nav sits on `{colors.background}` parchment — horizontally flat, no elevation at rest. Left: the wordmark and, in sub-navigation, destination category links. Right: "Reservations" primary CTA in `{components.button-primary}`, language selector, account/members link in `{typography.nav-link}` uppercase Avenir Next at 1.5px tracking. On scroll, the header acquires the barely perceptible shadow lift. Mobile: collapses to a hamburger opening a full-screen overlay in the same parchment tone.

## Do's and Don'ts

### Do
- Use Canto Roman (or Cormorant Garamond) exclusively for all editorial headings, resort names, and destination prose — it is the voice of the experience
- Typeset navigation links and button labels in uppercase Avenir Next with 1.5–2px letter-spacing — match the resort wayfinding vocabulary
- Default to `{colors.background}` warm parchment as the canvas — never pure white, never cool grey
- Use `{colors.primary}` forest green only for primary CTAs and focus rings — its rarity is its power
- Apply `{rounded.none}` to every button, card, image container, and input — sharp edges are the architectural signature
- Allow photography to occupy full-bleed rectangular regions without border, shadow, or rounded crop
- Honor the generous vertical section breathing at `{spacing.3xl}` (96px) and `{spacing.4xl}` (128px) — the contemplative pace is the brand
- Use `{typography.caption}` uppercase Avenir Next Condensed for location eyebrows ("IBIZA · SPAIN") — compressed wayfinding at micro scale
- Pair parchment canvas with espresso ink — the warm ink/canvas relationship is as distinctive as the typeface
- Treat flat surfaces as intentional — the absence of shadow, gradient, and decoration is a design statement

### Don't
- Don't introduce cool greys, digital blues, or neutral whites — every tone must sit in the warm earth spectrum
- Don't use Canto Roman for navigation, button labels, or form text — the serif is for destination voice, not logistics
- Don't round buttons or cards — even 4px border-radius reads as foreign to this design language
- Don't add gradients to hero images or surface panels — depth comes from photography, not computed blending
- Don't bold Canto Roman display headings — the system runs a single weight (400) throughout the serif; size and tracking carry hierarchy
- Don't introduce saturated colors beyond `{colors.primary}` forest green and `{colors.secondary}` terracotta — new hues break the earth-only palette rule
- Don't compress section vertical spacing — the 96–128px breathing gaps are non-negotiable for pace
- Don't apply drop shadows to cards, buttons, or editorial panels — only the sticky nav acquires a shadow on scroll
- Don't use a sans-serif for resort names or destination headings — that role belongs to Canto Roman exclusively
- Don't set body copy at less than 1.5 line-height — the meditative reading rhythm requires generous leading

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, compact nav, hero photography full-width stacked |
| Mobile | 375–767px | Single column, full-width photography, booking CTA persistent |
| Tablet | 768–1023px | Two-column resort grids, horizontal nav begins |
| Desktop | 1024–1439px | Full horizontal navigation, three-column resort grids, full hero |
| Large Desktop | ≥1440px | Maximum container width, wide outer margins, hero at full resolution |

### Touch Targets
- Primary "Reservations" button: `14px` vertical padding plus `12px` line-height × 1.0 = approximately 40px height — meets minimum tap target
- Navigation links: uppercase Avenir Next with generous horizontal padding; tap area extends above and below the label
- Resort cards: full card surface registers the tap, including photography region
- Form inputs: minimum 44px effective height on mobile viewports

### Collapsing Strategy
- **Navigation**: Full horizontal bar collapses to hamburger on tablet and below; overlay opens in `{colors.background}` parchment with full-screen typography treatment
- **Hero**: Full-viewport photography maintained at all breakpoints; editorial headline text scales from `{typography.display-hero}` (72px) to `{typography.heading-section}` (32px) on mobile; overlay text position shifts from lower-third to centre
- **Resort grid**: Three-column desktop collapses to two-column tablet and single-column mobile; card photography proportions preserved at all sizes
- **Section spacing**: Primary `{spacing.4xl}` (128px) section gaps reduce to `{spacing.2xl}` (64px) on tablet, `{spacing.xl}` (40px) on mobile — the generous pace compresses but never disappears
- **Typography**: `{typography.display-hero}` scales down from 72px to approximately 40px on mobile viewports using fluid sizing

### Image Behavior
- All photography is `object-fit: cover` within defined aspect-ratio containers — no letterboxing
- Hero images are full-viewport at every breakpoint; composition shifts but photography never crops to a thumbnail
- Resort card photography uses 3:2 landscape ratio consistently across grid breakpoints
- All image frames are `{rounded.none}` sharp-cornered — no circular crops in the system

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` — warm parchment
- Primary text: `{colors.ink}` — deep espresso brown
- Secondary text: `{colors.ink-muted}` — walnut
- Brand CTA: `{colors.primary}` — forest green
- CTA hover: `{colors.primary-hover}` — deep forest
- CTA text: `{colors.on-primary}` — sand
- Surface / card: `{colors.surface}` — deep parchment
- Standard border: `{colors.border}` — warm taupe

### Example Component Prompts

- "Build a Six Senses hero section on `{colors.background}` (`#f5f0e8`) parchment canvas. Full-bleed cinematic photography (no border, no shadow, no rounded corners, sharp `{rounded.none}`). Overlaid lower-third: a destination eyebrow in `{typography.caption}` (11px Avenir Next Condensed uppercase 2.5px tracking, `{colors.ink-quiet}`), then a 72px Canto Roman weight 400 `{typography.display-hero}` heading in `{colors.on-primary}` sand over the dark photography. No gradient scrim — the photography carries the depth."
- "Design a Six Senses primary CTA button: `{colors.primary}` (`#3d5a47`) background, `{colors.on-primary}` (`#f5f0e8`) text, `{typography.button-ui}` (12px Avenir Next uppercase 2px tracking), `{rounded.none}` sharp corners, `14px 32px` padding. Hover shifts background to `{colors.primary-hover}` (`#2e4336`). Transition: `background 0.4s ease`."
- "Create a Six Senses resort card on `{colors.surface}` (`#ede8de`) deep parchment. Full-bleed resort photography at top (`{rounded.none}`, no shadow, 3:2 aspect ratio). Below: a `{typography.caption}` location eyebrow in `{colors.ink-quiet}` uppercase ('IBIZA · SPAIN'), a `{typography.heading-sub}` Canto Roman 22px resort name in `{colors.ink}`, a `{typography.body}` Avenir Next 16px descriptor in `{colors.ink-muted}` at 1.6 line-height, and a `{components.button-primary}` CTA. Internal padding: `32px`."
- "Build the Six Senses navigation bar on `{colors.background}` parchment. Left: wordmark. Center or right: navigation links in `{typography.nav-link}` (13px Avenir Next uppercase 1.5px tracking, `{colors.ink}`). Far right: 'Reservations' in `{components.button-primary}` — `{colors.primary}` green, `{colors.on-primary}` sand label, sharp corners, `14px 32px` padding. No bottom border at rest; on scroll: `box-shadow: 0 2px 12px 0 {colors.shadow-soft}`."
- "Design a Six Senses experience category badge: `{colors.primary-container}` (`#d4e0d6`) pale sage fill, `{colors.primary}` (`#3d5a47`) forest green text, `{typography.caption}` (11px Avenir Next Condensed uppercase 2.5px tracking), `{rounded.sm}` (2px) corners, `4px 12px` padding. Labels: 'WELLNESS', 'ADVENTURE', 'SUSTAINABILITY'."
- "Create a Six Senses booking input field: `{colors.background}` parchment background, `{colors.border-subtle}` (`#ddd7cc`) hairline outline at rest, `{colors.focus-ring}` (`#3d5a47`) green solid 1px outline on focus (no glow, no background shift), `{rounded.none}` sharp corners, `{typography.body}` 16px Avenir Next `0.1px` tracking in `{colors.ink}`, `12px 16px` padding."

### Iteration Guide

1. Begin with `{colors.background}` (`#f5f0e8`) warm parchment as the canvas — this is the defining visual signature, more recognizable than any logo or typeface.
2. Set editorial headings and destination names exclusively in Canto Roman (or Cormorant Garamond) at weight 400 — `{typography.display-hero}` through `{typography.heading-sub}`. Never bold the serif.
3. Switch to Avenir Next for all navigation, body copy, captions, and CTA labels — typeset in uppercase with generous letter-spacing (1.5–2.5px) at small sizes.
4. Apply `{colors.primary}` forest green only to primary CTAs and focus rings — maximum one green moment per viewport section.
5. Buttons are sharp-edged rectangles (`{rounded.none}`) with 14px 32px padding — architectural, not pill-shaped.
6. Allow photography to carry all depth — no surface shadows, no gradients, no overlay scrims on brand editorial chrome.
7. Set section vertical breathing at `{spacing.3xl}` (96px) minimum — the contemplative pace is the brand, not an afterthought.
8. Use `{typography.caption}` uppercase Avenir Next Condensed for location labels and taxonomy tags — compressed wayfinding at the micro scale.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Six Senses. Brand names and trademarks belong to their respective owners.