---
version: alpha
name: "Faena"
description: "Theatrical maximalist hospitality system: deep crimson signature on a white canvas, Chronicle Display editorial serif paired with Gotham UI grotesque, baroque-luxe opulence delivered through painted-mural photography and sharp-cornered components"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#000000"              # footer / dark overlay canvas
  surface-warm: "#f5f2ee"         # warm off-white section panels /* estimated */

  # Text / ink
  ink: "#555555"                  # dominant body text — 201 occurrences (rgb 85,85,85)
  ink-dark: "#222222"             # near-black headlines and UI chrome — 19 occurrences (rgb 34,34,34)
  on-primary: "#ffffff"           # text on crimson CTA fill
  on-surface: "#ffffff"           # text on dark/black canvas

  # Brand accent — Faena crimson
  primary: "#d1181e"              # signature crimson — 74 occurrences; CTAs, links, borders
  primary-hover: "#fb1d24"        # dembrandt interactiveDeltas hover (rgb 251,29,36)
  primary-dark: "#8f1016"         # deeper crimson shade from dolli-colors-red-fg /* was rgba(143,16,22,1) */

  # Interactive / states
  link-default: "#d1181e"         # link default color — matches primary
  link-hover: "#565656"           # link hover muted grey (rgb 86,86,86)
  text-hover: "#666666"           # body-text hover (from dembrandt palette hover value)
  focus-ring: "#3b82f6"           # dolli accessibility focus ring (--dolli-colors-blue-focus-ring)

  # Borders
  border: "#d1181e"               # primary button border — crimson
  border-muted: "#e5e5e5"         # input border at rest (rgb 229,229,229)
  border-light: "#e0e0e0"         # low-emphasis button border (rgb 224,224,224)

  # Shadow tints
  shadow-soft: "#000000"          # was rgba(0,0,0,0.2) 0px 0px 18px — flattened to hex

typography:
  display-hero:
    fontFamily: "Chronicle Display, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 60px
    fontWeight: 325
    lineHeight: 1.25
    letterSpacing: 1.2px
  display:
    fontFamily: "Chronicle Display, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.10
    letterSpacing: 1.12px
  heading-section:
    fontFamily: "Chronicle Display, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 27px
    fontWeight: 300
    lineHeight: 1.10
    letterSpacing: 0.54px
  heading-sub:
    fontFamily: "Chronicle Display, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 21px
    fontWeight: 300
    lineHeight: 1.50
    letterSpacing: 0.3px
  body-large:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.3px
  body:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.90
    letterSpacing: 0.3px
  nav-link:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.90
    letterSpacing: 0.3px
  button-ui:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: 2.6px
  caption:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 1.75px
  label-small:
    fontFamily: "Gotham, Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.90
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 56px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  pill: 9999px    # social icon circles only (50% / 100% radius on social buttons)

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 40px
    borderColor: "{colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 40px
    borderColor: "{colors.primary-hover}"
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 40px
  button-outline-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 40px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    borderColor: "{colors.border-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 40px
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 40px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border-muted}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-dark}"
    borderColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 12px
  nav-bar:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
---

# Faena Design System

## Overview

Faena is not minimalism rebranded as luxury. It is maximalism owned without apology — a hospitality language rooted in the theatrical Buenos Aires aesthetic of Alan Faena, filtered through the curatorial eye of Len Blavatnik and the visual direction of Baz Luhrmann and Catherine Martin. The homepage announces this immediately: a full-viewport painted mural, an operatic composition of tropical palms, a scarlet-draped figure holding a globe aloft above the golden FAENA scroll-and-crown emblem. There is no gradient scrim, no quiet white field. The image is the product, and the product is spectacle.

Against this backdrop, the chromatic identity resolves into something precise: a single arterial crimson (`{colors.primary}`, `#d1181e`) that bleeds through every interactive moment — button borders, CTA fills, link colors, section accents. Not gold, not ivory, not the sepia of conventional luxury. Crimson. It has the urgency of a theater curtain and the warmth of Venetian lacquer. The white canvas (`{colors.background}`) exists entirely in service of this singular accent and the brand photography that surrounds it. The footer recedes to black (`{colors.surface}`), completing a palette of three: white ground, crimson fire, black shadow.

The typographic system pairs two proprietary faces in a hierarchy that mirrors Faena's split personality. Chronicle Display — a high-contrast editorial serif from Hoefler&Co with refined thin strokes and generous serifs — carries every atmospheric headline and destination name. Its weight 300–325 settings give headings the look of quality print editorial: a Buenos Aires lifestyle magazine, not a booking engine. Gotham, the geometric humanist grotesque originally cut for GQ, handles navigation, CTAs, and captions in its Bold weight with generous uppercase tracking. The pairing is opera-house typography: the serif for stage-setting, the grotesque for wayfinding. Neither appears in Google Fonts in their licensed form; Cormorant Garamond approximates Chronicle, and Montserrat approximates Gotham.

**Key Characteristics:**
- Full-viewport painted-mural hero photography — not abstract architecture photography but ornate, figurative, hand-crafted imagery drawn from Faena's actual property murals
- Single chromatic accent: `{colors.primary}` crimson dominating all interactive states — CTAs, button borders, link colors, and section rule accents
- Two-typeface hierarchy: Chronicle Display (`{typography.display-hero}`) for editorial atmosphere; Gotham Bold (`{typography.button-ui}`) for all UI and CTA labeling
- All buttons and cards use `{rounded.none}` — zero border-radius throughout the entire brand-facing system
- Gotham button labels run uppercase with `2.6px` letter-spacing — a measured stamp quality that signals premium without shouting
- Generous section-level vertical spacing (`{spacing.4xl}` at 120px) between editorial modules — the system breathes in a way that honors the grandeur of the imagery
- Chronicle Display runs at weights 300–325 across all sizes, relying on the typeface's optical differentiation rather than weight escalation
- Button transitions at 0.25s ease on `background-color`, `border-color`, `color` — fast enough to feel responsive, considered enough to feel refined
- `{colors.ink}` (`#555555`) as primary body text rather than near-black — a warm grey that reduces harshness against the white canvas and photography-adjacent layouts
- Positive letter-spacing throughout: `2.6px` on uppercase Gotham labels, `1.12–1.75px` on Chronicle display headings — the system tracks open, never compressed

## Colors

### Primary Surface
- **White Canvas** (`{colors.background}`): The primary reading surface. Pure white used for editorial sections, booking UI, content panels, and all areas not occupied by photography. Unwarmed, unmodified — the canvas that lets crimson and imagery do all the work.
- **Dark Canvas** (`{colors.surface}`): Pure black used in the footer and any dark-hero overlay panels. The footer logo reverses to white on this ground.
- **Warm Panel** (`{colors.surface-warm}`): A subtle warm off-white used in alternating editorial sections where the strict white-black-crimson palette needs a restful middle register.

### Text / Ink
- **Faena Grey** (`{colors.ink}`): The dominant body text at 201 palette occurrences — a warm mid-grey `#555555` used for paragraphs, descriptors, and secondary navigation. Softer than near-black, matching the brand's atmospheric rather than utilitarian register.
- **Faena Dark** (`{colors.ink-dark}`): Near-black at `#222222` for high-emphasis UI states: nav toggle, section markers, high-priority metadata. Not headline text — Chronicle Display headings typically sit in `{colors.ink}` grey.
- **On Surface** (`{colors.on-surface}`): White text for use on the footer black and on dark hero overlays.

### Brand Accent
- **Faena Crimson** (`{colors.primary}`): The single chromatic signature — 74 occurrences in the palette scan, appearing as button fills, border outlines, link color, and interactive accent. The crimson `#d1181e` is too saturated for large backgrounds but precisely calibrated as a punctuation color.
- **Crimson Hover** (`{colors.primary-hover}`): The interactive delta on hover — a slightly brighter `#fb1d24` that confirms action without changing the perceived hue.
- **Crimson Dark** (`{colors.primary-dark}`): A deeper `#8f1016` reserved for pressed states, focus rings on crimson surfaces, and high-contrast contexts.

### Interactive
- **Link Default** (`{colors.link-default}`): Inline links and navigation accents appear in `{colors.primary}` crimson — consistent with the button accent system.
- **Link Hover** (`{colors.link-hover}`): Links transition on hover to `#565656` warm grey — a calming counterpoint to the crimson rest state.
- **Focus Ring** (`{colors.focus-ring}`): The accessibility focus indicator uses the `--dolli-colors-blue-focus-ring` value `#3b82f6` — a standard accessible blue that meets WCAG contrast requirements on the white canvas.

### Borders
- **Crimson Border** (`{colors.border}`): 1px solid crimson used on primary button outlines.
- **Neutral Border** (`{colors.border-muted}`): Light `#e5e5e5` hairlines on form inputs at rest.
- **Ghost Border** (`{colors.border-light}`): The faintest border at `#e0e0e0` for secondary button ghost outlines.

## Typography

### Font Family
- **Display / Editorial**: `Chronicle Display` with fallbacks: `Cormorant Garamond, Georgia, Times New Roman, serif`. A high-contrast editorial serif by Hoefler&Co — precisely cut thin strokes, substantial serifs, and optical variation across the 300–325 weight range used by Faena. Self-hosted via `font.woff2` assets. Used for all destination names, section headings, and atmospheric editorial copy.
- **UI / CTA**: `Gotham` with fallbacks: `Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif`. The geometric humanist grotesque originally cut for GQ, available here in Book (400) and Bold (700) weights. Self-hosted as `Gotham-Book.otf`, `Gotham-Medium.otf`, `Gotham-Bold.otf`. Used for all navigation, buttons, captions, and UI copy.
- **OpenType Features**: `"cv11"` appears on the Gotham Bold uppercase label treatment at 13px — a stylistic alternate for certain letterforms in the label/cap style.
- **Google Font substitutions**: For Chronicle Display, use **Cormorant Garamond** at weight 300; for Gotham, use **Montserrat** at weights 400 and 700. Neither substitution is exact, but both preserve the serif/geometric-grotesque pairing logic.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Primary editorial hero headings — Chronicle 60px weight 325 with 1.2px tracking |
| `display` | Section-opening headings and destination titles — Chronicle 36px weight 300 |
| `heading-section` | Category headers and editorial sub-sections — Chronicle 27px weight 300 |
| `heading-sub` | Feature card titles and amenity group names — Chronicle 21px weight 300 |
| `body-large` | Lead paragraph copy and pull-quote text — Gotham 20px weight 400 |
| `body` | Standard body paragraphs, form labels, navigation descriptors — Gotham 16px with 1.9 line-height |
| `nav-link` | Navigation items and footer links — Gotham 15px weight 400 |
| `button-ui` | All CTA labels — Gotham Bold 13px uppercase with 2.6px tracking |
| `caption` | Destination eyebrows, photo captions, label treatment — Gotham Bold 13px uppercase 1.75px tracking |
| `label-small` | Secondary tags, small-print metadata — Gotham Bold 14px |

### Principles
- **Chronicle names experiences; Gotham handles logistics.** Chronicle Display appears wherever Faena is describing a destination, an experience, or a cultural moment. Gotham handles everything that requires action — navigation, reservation, filtering.
- **Weight 300–325 for all Chronicle text.** Faena does not escalate Chronicle through weight variation. The 60px display heading and the 21px card title both run at light-to-regular weight — optical size, not weight, creates the hierarchy.
- **Gotham uppercase with positive tracking for all CTAs.** Button labels run in Gotham Bold 13px uppercase at `2.6px` tracking — the stamp-like spacing is the visual mark of a branded announcement.
- **Positive letter-spacing at all Chronicle sizes.** Display headings carry `0.54–1.2px` of tracking — the letters breathe even at 60px, consistent with the brand's theatrical-but-unhurried rhythm.
- **No typeface mixing within a single component.** Chronicle is reserved for content zones; Gotham for chrome zones. A card has a Chronicle title and a Gotham CTA — never the reverse.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px, anchored by the 16px and 24px recurrence throughout the component system.

Faena's layout rhythm operates in two registers: a compressed component-level scale (8–24px) for internal padding and typography breathing, and a grand editorial scale at the section level (`{spacing.3xl}` through `{spacing.4xl}`, 80–120px) that honors the scale of the brand's physical properties. The site does not feel cramped at any resolution — the spacing decisions are hotel-corridor generous.

### Grid & Container
- Max content width: approximately 1500px (dembrandt breakpoint cluster confirms 1441–1500px as the wide-desktop threshold)
- Hero: full-viewport painted-mural photography, no content grid — the image is the entire first screen
- Editorial grid: 2–3 column layouts on desktop with generous gutters; editorial prose runs in wide single-column centered modules
- Full-width `{spacing.4xl}` section breathing between major editorial blocks

### Whitespace Philosophy
- **Spectacle requires space.** The Faena imagery is dense and ornate — the surrounding layout compensates with generous breathing. Sections never crowd each other.
- **Photography-first structure.** Content areas are sized to accommodate full-bleed and wide-aspect imagery; text columns are secondary containers.
- **No decorative dividers.** The system relies on vertical spacing rather than horizontal rules to separate sections; the only structural dividers are single-pixel crimson or neutral borders on specific UI elements.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all brand-facing surfaces — canvas, editorial cards, sections |
| Hairline (Level 1) | `1px solid {colors.border-muted}` | Input borders at rest, light panel separators |
| Subtle (Level 2) | `rgba(0,0,0,0.05) 0px 1px 6px 0px` | Light card lift in embedded booking or form modules |
| Overlay (Level 3) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Modal overlays, lightbox panels — the deepest shadow in the system |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Accessibility keyboard navigation — the `--dolli-colors-blue-focus-ring` value |

**Shadow Philosophy**: Faena's depth is atmospheric rather than material. The brand communicates opulence through photography, color, and typography — not through computed drop shadows on cards. The three shadow values in the scan are sparse and light-handed: a faint `0.05` opacity card lift, and a `0.2` opacity modal scrim. The most prominent depth cue in the system is the contrast between the white canvas and the full-bleed painted imagery, not layered surfaces.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, cards, inputs, images, and brand panels — the universal Faena shape |
| `pill` | 9999px | Social icon circles only — the five social-platform buttons (Facebook, X, Instagram, YouTube, Vimeo) are fully circular |

Faena's shape language is categorically sharp. The dembrandt scan found `2px` and `2.5px` radius values on a single progress indicator div (low confidence), `3px` on a span, and `50%` / `100%` on the social icon buttons. Every brand-facing interactive element — the "Reserve" CTA, "View All" gallery button, "Current Issue" magazine link, form inputs — uses `0px` radius. The zero-radius constraint is not architectural minimalism; it is the hard frame that contains the otherwise unbounded theatricality of the Faena imagery.

## 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`** — The "View All" CTA: `{colors.primary}` crimson fill, `{colors.on-primary}` white text, `{typography.button-ui}` Gotham Bold 13px uppercase 2.6px tracking, `{rounded.none}` sharp corners, `16px 40px` padding, `1px solid {colors.border}` border. Transitions background-color and border-color at `0.25s ease`.
- **`button-outline`** — The "Reserve" hero button: transparent fill, `1px solid {colors.on-primary}` white border (used over dark hero imagery), `{colors.on-primary}` white text, same typography and padding. Hover floods to `{colors.primary}` crimson.
- **`button-ghost`** — The "Current Issue" secondary action: transparent fill, `1px solid {colors.border-light}` grey border, `{colors.primary}` crimson text. Hover inverts to crimson fill with white text.

### Cards

Destination and editorial cards: `{colors.background}` white ground, `{rounded.none}` sharp edges, no shadow, photography full-bleed at top. Chronicle Display heading in `{typography.heading-sub}` below, Gotham body copy in `{typography.body}`, crimson `{components.button-ghost}` or `{components.button-primary}` CTA at base.

### Inputs

Form fields in newsletter and booking modules: `{colors.background}` white fill, `1px solid {colors.border-muted}` border at rest, transitions border-color on focus to `{colors.ink-dark}`, `{rounded.none}`, `{typography.body}` Gotham 16px. The focus shift is a subtle darkening of the input border — no glow, no color injection.

### Badges / Tags

Event and category labels: `{colors.primary}` crimson fill, `{colors.on-primary}` white text, `{typography.caption}` Gotham Bold uppercase 1.75px tracking, `{rounded.none}` sharp corners. In contexts where the label appears on dark imagery, white-fill reversed variants maintain legibility.

### Navigation

The Faena nav renders over the full-viewport hero mural: left-aligned hamburger "MENU" trigger in `{typography.button-ui}` Gotham Bold with 2.6px tracking, "FAENA" wordmark centered in a custom serif SVG treatment, "RESERVE" as `{components.button-outline}` right-aligned. The nav sits on a fully transparent background — no bar, no shadow — letting the mural occupy the full viewport edge-to-edge. All nav labels appear in `{colors.on-surface}` white.

## Do's and Don'ts

### Do
- Use `{colors.primary}` crimson for all primary CTAs, button borders, and link states — the crimson is the single chromatic event in the system and should appear consistently
- Set all editorial headings in Chronicle Display at weights 300–325; never introduce a heavier weight to establish hierarchy — use size instead
- Use `{typography.button-ui}` Gotham Bold uppercase with `2.6px` tracking for all CTA labels — the wide tracking is what gives the buttons their branded, non-generic character
- Keep all brand-facing elements at `{rounded.none}` — zero border-radius is the universal Faena component shape
- Allow painted-mural and editorial photography to run full-bleed; the imagery carries the brand's maximum expression
- Apply `{spacing.3xl}` or `{spacing.4xl}` vertical breathing between major editorial sections — the generous spacing reflects the physical scale of the Faena properties
- Maintain the Chronicle / Gotham typographic contract: Chronicle for atmospheric content, Gotham for navigation and action states
- Use `{colors.ink}` (`#555555`) warm grey rather than near-black for body copy on the white canvas — the softened text color reduces visual harshness next to high-contrast imagery
- Reverse nav and button chrome to `{colors.on-surface}` white when placed over dark or rich photography — maintain legibility without adding opaque bars

### Don't
- Don't introduce a second accent color — the single crimson `{colors.primary}` is the entire chromatic identity; a gold or amber companion would dilute the signal
- Don't round corners on buttons, cards, or images — `{rounded.none}` is the universal brand shape; softening it undermines the sharp theatrical frame quality
- Don't use Chronicle Display for navigation, button labels, or form copy — the editorial serif is for content zones, not chrome
- Don't use Gotham Book (weight 400) for CTA labels — all action text uses Gotham Bold at uppercase with full 2.6px tracking; switching to the light cut reads as non-committal
- Don't add multi-layer box shadows to editorial cards or panels — Faena's depth is sourced from photography, not computed elevation
- Don't reduce letter-spacing on Gotham uppercase labels below 2px — the tracking is part of the typographic identity, not decorative
- Don't place colored fills behind the full-viewport hero mural — the nav is transparent by design; an opaque header bar destroys the edge-to-edge immersion
- Don't apply Chronicle Display in uppercase — unlike Didot-style luxury systems, Chronicle's character depends on mixed case; it was not designed as an all-caps display face
- Don't use `{colors.focus-ring}` blue as a brand accent — it is an accessibility utility value from the underlying UI framework, not a Faena brand color

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column, mural crops to portrait, nav collapses to icon-only |
| Mobile | 425–767px | Single column, full-width photography, hamburger nav, booking bar simplified |
| Tablet | 768–1023px | Two-column editorial possible, horizontal nav labels partially restored |
| Desktop | 1024–1440px | Full nav, 2–3 column grids, full-viewport hero mural |
| Wide Desktop | >1440px | Maximum container width at 1500px, expanded outer margins, mural at full resolution |

### Touch Targets
- "Reserve" outline button: `13px 40px` padding plus 13px line-height provides approximately 44px tap height on mobile
- "View All" crimson button: `16px 40px` padding exceeds 44px comfortably
- Navigation "MENU" trigger: tappable area generously sized; the hamburger icon plus adjacent label create a full-width touch zone in the top-left corner
- Social icon circles: fully circular at 50% radius — touch targets confirmed adequate via `100%` radius dembrandt value

### Collapsing Strategy
- **Navigation**: The transparent full-viewport nav collapses at 768px to a hamburger MENU trigger; the full-screen overlay drawer opens with a dark or image-backed surface
- **Hero mural**: Maintains full-viewport height across all breakpoints; crop shifts from landscape to portrait on mobile; the FAENA wordmark overlay remains centered at all sizes
- **Editorial grid**: 3-column desktop collapses to 2-column tablet and single-column mobile; card photography maintains consistent 4:3 proportions
- **Section spacing**: `{spacing.4xl}` (120px) primary section breathing reduces to `{spacing.2xl}` (56px) on mobile — generous even at the compressed scale
- **Typography**: Chronicle Display scales from 60px hero to approximately 36px on mobile; Gotham button labels and nav items maintain their uppercase tracking at all breakpoints

### Image Behavior
- All photography and mural imagery uses `object-fit: cover` within responsive containers — aspect ratios lock via padding-based technique
- The hero mural maintains its full-bleed quality at all breakpoints; the artistic composition shifts rather than the image being cropped to a thumbnail
- Editorial card photography maintains 4:3 or 16:9 ratios in responsive grids; portrait-oriented property images use the 3:4 format for card contexts

---

## Agent Prompt Guide

### Quick Color Reference
- Background canvas: `{colors.background}` — `#ffffff`
- Primary body text: `{colors.ink}` — `#555555`
- High-emphasis text / dark UI: `{colors.ink-dark}` — `#222222`
- Crimson accent / CTA fill: `{colors.primary}` — `#d1181e`
- Crimson hover: `{colors.primary-hover}` — `#fb1d24`
- On-crimson text: `{colors.on-primary}` — `#ffffff`
- Footer / dark canvas: `{colors.surface}` — `#000000`
- Input border: `{colors.border-muted}` — `#e5e5e5`

### Example Component Prompts

- "Build a Faena hero section at full viewport height. Use a full-bleed painted-mural or architectural photograph as the background with no scrim. Center: the 'FAENA' wordmark in a custom Chronicle Display or Cormorant Garamond serif at approximately 60px weight 325 (`{typography.display-hero}`), tracked at `{typography.display-hero.letterSpacing}` in `{colors.on-surface}` white. Top nav: transparent background, left-aligned 'MENU' in `{typography.button-ui}` (Gotham Bold 13px uppercase 2.6px tracking, white), centered wordmark SVG, right-aligned `{components.button-outline}` 'RESERVE' button."
- "Design a Faena 'View All' primary button: `{colors.primary}` crimson fill, `{colors.on-primary}` white text, `{typography.button-ui}` (Gotham Bold 13px uppercase 2.6px tracking), `{rounded.none}` sharp corners, `16px 40px` padding, `1px solid {colors.border}` border. Hover: background transitions to `{colors.primary-hover}`, border follows, `0.25s ease` on background-color, border-color, color."
- "Create a Faena editorial destination card on `{colors.background}` white. Full-bleed photography at top, `{rounded.none}`, no shadow, no border. Below: a section eyebrow in `{typography.caption}` (Gotham Bold 13px uppercase 1.75px tracking, `{colors.primary}` crimson). Destination heading in `{typography.heading-sub}` (Chronicle Display 21px weight 300, `{colors.ink-dark}`). Body descriptor in `{typography.body}` (Gotham 16px, `{colors.ink}`, 1.9 line-height). A `{components.button-ghost}` 'Explore' link at the base in crimson."
- "Build the Faena navigation bar: fully transparent background over a hero mural. Left: 'MENU' in `{typography.button-ui}` with `{colors.on-surface}` white. Center: 'FAENA' wordmark SVG in white. Right: `{components.button-outline}` 'RESERVE' button (transparent fill, `1px solid white`, white text, `13px 40px` padding, `{rounded.none}`). On scroll over white content sections, swap all chrome to `{colors.ink}` dark mode."
- "Design a Faena newsletter input row on `{colors.background}`. Email input: white fill, `1px solid {colors.border-muted}` border at rest, `{typography.body}` Gotham 16px `{colors.ink}`, padding `8px 16px`, `{rounded.none}`. Transitions border to `1px solid {colors.ink-dark}` on focus. Adjacent submit button: `{components.button-primary}` in `{colors.primary}` crimson with 'Subscribe' in `{typography.button-ui}`. No glow, no color injection on focus — just a thickened border rule."
- "Create a Faena footer on `{colors.surface}` black. Top: 'FAENA' wordmark SVG in `{colors.on-surface}` white at reduced scale. Multi-column link grid in `{typography.nav-link}` (Gotham 15px, `{colors.on-surface}`, 1.9 line-height). Social row: five circular icon buttons at `{rounded.pill}` (Facebook, X, Instagram, YouTube, Vimeo) in white outline. Fine-print legal copy in `{typography.caption}` 13px, `{colors.link-hover}` grey."

### Iteration Guide

1. Start with `{colors.background}` white as the content canvas. The white exists to hold space for crimson and photography — it should never be warmed, tinted, or replaced with a linen tone.
2. Place photography first. Faena's content hierarchy is mural → crimson accent → typography, in that order. Design the image container before any type or button is placed.
3. Add `{colors.primary}` crimson to all interactive states — button fills, button borders, link colors, eyebrow labels. The crimson is singular; never introduce a second hue alongside it.
4. Set editorial headings in Chronicle Display (or Cormorant Garamond as a substitute) at weight 300–325. Do not push to 400 or 700 — the light weight is the typeface's editorial character.
5. Set all CTA labels and nav text in Gotham Bold (or Montserrat 700) uppercase with 2.6px letter-spacing. Reduce to 1.75px only for caption eyebrow contexts.
6. All buttons and panels use `{rounded.none}`. The sharp rectangle is the hard frame that contains the theatrical imagery.
7. Apply `{spacing.3xl}` or `{spacing.4xl}` breathing between major sections. The generosity of space communicates the generosity of the Faena hospitality experience.
8. The nav is transparent over the hero and inverts to `{colors.ink}` when scrolling over white content — always ensure white-on-mural legibility without adding an opaque bar.

---

## 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 Faena. Brand names and trademarks belong to their respective owners.