--- version: alpha name: "Aman" description: "Warm linen canvas, two licensed serif families for editorial depth, and near-zero chrome — a hospitality design language built on sanctuary photography and absolute restraint" colors: background: "#f3eee7" surface: "#313131" surface-elevated: "#ffffff" surface-warm: "#ede8e0" ink: "#313131" ink-muted: "#585858" ink-quiet: "#aaa6a3" on-primary: "#f3eee7" primary: "#313131" primary-hover: "#494848" # was rgb(73,72,72) — from dembrandt interactiveDeltas border: "#313131" border-subtle: "#c5c5c5" focus-ring: "#313131" shadow-soft: "#999999" # was rgb(153,153,153) 0px 2px 10px -3px — flattened to hex typography: display-hero: fontFamily: "Lyon Text Web, Lyon Display Web, Georgia, Times New Roman, serif" fontSize: 31px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.5px display: fontFamily: "Lyon Text Web, Lyon Display Web, Georgia, Times New Roman, serif" fontSize: 24px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.5px heading-section: fontFamily: "Lyon Text Web, Lyon Display Web, Georgia, Times New Roman, serif" fontSize: 20px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.98px heading-sub: fontFamily: "Lyon Text Web, Lyon Display Web, Georgia, Times New Roman, serif" fontSize: 16px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.77px body-large: fontFamily: "WhitneySSm, Whitney SSm A, Whitney SSm B, Georgia, serif" fontSize: 19px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0px body: fontFamily: "WhitneySSm, Whitney SSm A, Whitney SSm B, Georgia, serif" fontSize: 14px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.8px nav-link: fontFamily: "WhitneySSm, Whitney SSm A, Whitney SSm B, Georgia, serif" fontSize: 14px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.7px button-ui: fontFamily: "WhitneySSm, Whitney SSm A, Whitney SSm B, Georgia, serif" fontSize: 14px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0.7px caption: fontFamily: "WhitneySSm, Whitney SSm A, Whitney SSm B, Georgia, serif" fontSize: 10px fontWeight: 400 lineHeight: 1.45 letterSpacing: 2px spacing: xs: 4px sm: 9px md: 14px lg: 20px xl: 28px 2xl: 65px 3xl: 96px 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: 10px 15px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 15px button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 15px button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 4px 0px card: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 20px input: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 9px 14px input-focus: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 9px 14px badge: backgroundColor: "{colors.surface-warm}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 10px --- # Aman Design System ## Overview Aman's web presence is sanctuary made navigable. The canvas is a warm linen — the parchment tone (`{colors.background}`) that the brand's PWA manifest and header surface confirm as `#f3eee7` — and every element on it either disappears into negative space or defers entirely to full-bleed cinematic photography. Bali temple rooftops through palm fronds. Himalayan stone at dawn. Adriatic sea light through ancient walls. The design language is built on a single premise: the resorts sell silence, and the interface must never shout louder than the landscape. The typographic architecture is genuinely unusual for a hospitality brand. Aman uses two commercial licenses running in tandem — **Lyon Text Web** (a precise optical-size text roman by Commercial Type, cut from Plantin and Le Monde DNA) for all editorial headings and destination prose, and **WhitneySSm** (Hoefler's small-caps-optimized humanist sans-serif, originally cut for the Smithsonian) for navigation, captions, form fields, and CTAs. The serif names landscapes and sets mood. The sans handles logistics. Neither family appears in Google Fonts; both are served from custom woff/woff2 assets. The font pairing is among the most considered in hospitality web design — two licensed faces that feel like companions from the same library shelf, not rivals. Where Aesop's restraint reads as apothecary and Louis Vuitton's reads as maison, Aman's reads as **resort atmosphere**. There are no borders on the canvas. The navigation is a thin whisper of WhitneySSm at 14px (`{typography.nav-link}`) against the linen ground. The sole chromatic moment in the entire palette is the charcoal near-black (`{colors.ink}`, `#313131`) that serves as both text and the single primary CTA. Buttons have sharp `0`-radius corners, 10px vertical padding, and a 0.6s transition time — long enough to feel considered, not instant-and-utilitarian. The one medium weight in the system (`Whitney SSm A` weight 700 for small captions at 12.6px) appears in section-label treatments, never in headings. **Key Characteristics:** - Warm linen canvas (`{colors.background}`) — not neutral grey, not pure white; the color of undyed cotton or dry sand - Two-typeface contract: Lyon Text Web (serif) for editorial names + destination copy; WhitneySSm (humanist sans) for navigation, forms, and CTAs - `{colors.ink}` charcoal (`#313131`) carries 682 uses — the dominant chrome color and sole CTA fill - All buttons are sharp-cornered (`{rounded.none}`) with 0.6s ease transition — unhurried, like the brand itself - Generous 14px base with `1.45` line-height and positive `0.7–0.8px` letter-spacing throughout — the system breathes horizontally as well as vertically - Zero gradients in the system — no surface decoration, no hero scrims that compete with photography - Captions and destination eyebrows run in `{typography.caption}` at 10px WhitneySSm uppercase with `2px` letter-spacing — micro text that reads as a label on a specimen jar - Photography is always full-bleed and rectangular — never circular, never rounded-corner cropped - Minimal breakpoint density in the primary design registers; 21 breakpoints in the CSS but functional design changes cluster around 600, 768, 1024, and 1520 - The "Reserve" CTA is the only dark-filled button in the entire navigation — the sole moment of intention surfaced from an otherwise passive-luxe chrome ## Colors ### Primary Surface - **Aman Linen** (`{colors.background}`): The signature canvas — a warm, faintly tan off-white derived from the brand's PWA manifest theme color. Used for the page background, sticky header, and any section that is "resting." - **Aman White** (`{colors.surface-elevated}`): Pure white used for modal surfaces, booking bar backgrounds, and elevated card panels against the linen ground. - **Aman Warm Surface** (`{colors.surface-warm}`): A half-step deeper warm tone for alternate-section panels and secondary card backgrounds. ### Text / Ink - **Aman Charcoal** (`{colors.ink}`): The dominant ink — 682 occurrences in the palette scan. Used for all primary text, the primary "Reserve" button, navigation labels, and heading text. A softened near-black that reads as deliberate, not harsh. - **Aman Mid-Grey** (`{colors.ink-muted}`): Secondary text at 312 occurrences — used for body paragraphs, supporting navigation items, card descriptions, and form labels. - **Aman Quiet** (`{colors.ink-quiet}`): Tertiary tone — disabled states, placeholder text, and low-emphasis meta labels. ### Interactive - **Aman Charcoal** (`{colors.primary}`): The sole filled CTA color — no brand hue, just the deepest ink tone. - **Hover Dark** (`{colors.primary-hover}`): The interactive delta for the "Reserve" button hover — a slight lightening of charcoal confirmed in dembrandt's interactive deltas. ### Borders & Structure - **Hairline Charcoal** (`{colors.border}`): 1px solid borders on buttons, left-rule list items, and section separators — always the full ink tone, never tinted. - **Soft Border** (`{colors.border-subtle}`): Lower-emphasis structural dividers — input rules, secondary separators, modal chrome. ### Shadow The system uses minimal shadow. The dominant instances (`0px 2px 10px -3px rgb(153,153,153)` and `0px 0px 12px 2px rgb(199,197,199)`) appear in PrimeReact component shells (the site runs PrimeReact/Vue components), not in the primary brand design. The brand-facing design language is functionally shadow-free. ## Typography ### Font Family - **Editorial serif**: `Lyon Text Web`, fallbacks: `Lyon Display Web, Times New Roman, serif`. A Plantin/Le Monde-class commercial text roman served as self-hosted woff2. Used for all destination names, editorial headings, and location prose. - **UI sans-serif**: `WhitneySSm` / `Whitney SSm A`, fallbacks: `Whitney SSm B, Lyon Display Web, Times New Roman`. A Hoefler humanist sans-serif with small-caps-optimized metrics. Used for navigation, captions, forms, buttons, and supporting body copy. - **External substitutions**: For Lyon Text Web — use **Spectral** or **Source Serif 4** (Google Fonts). For WhitneySSm — use **Source Sans 3** or **Nunito** (Google Fonts). Neither is a perfect match but both preserve the serif/humanist pairing logic. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Primary destination and hero module headings — "Embrace a Summer of Wonder" | | `display` | Section editorial headings, resort-level titles | | `heading-section` | Category and location sub-headings, destination type labels | | `heading-sub` | Feature card titles, amenity group headings | | `body-large` | Lead editorial paragraphs, destination introduction prose | | `body` | Standard body text, form labels, booking bar detail copy | | `nav-link` | Navigation items, footer links, tab labels | | `button-ui` | CTA text including the "Reserve" button and modal actions | | `caption` | Location eyebrows, image captions at 10px WhitneySSm uppercase 2px tracking | ### Principles - **Serif names places; sans handles logistics.** Lyon Text Web appears exclusively where Aman is describing somewhere — a resort, a destination, an experience. Whitney handles the acts of visiting (navigating, booking, filtering). - **Universal positive letter-spacing.** Every text style from body to caption carries positive tracking — `0.5px` on Lyon display, `0.7–2px` on Whitney. The typesetting breathes horizontally as well as vertically. - **Single weight across Lyon.** All Lyon Text Web styles run at weight 400. The typeface's optical design carries hierarchy through size and spacing, not weight escalation. - **Whitney's weight 700 is reserved for micro-labels.** The only bold instance in the system is `Whitney SSm A` at 12.6px in caption treatments — section tags, count labels, active indicators. - **Uppercase with 2px tracking for captions.** Destination type labels ("AMANGIRI, UTAH") and taxonomy captions run in tiny WhitneySSm uppercase — a treatment borrowed from museum exhibition wayfinding. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 9px (the most recurrent measured spacing value from the dembrandt scan — `9px` appears 114 times, anchoring the compact scale). The scale has two registers: a compressed lower range (4–20px) for typography spacing, padding, and component rhythm, and a single large jump to `65px` that appears repeatedly in section-level vertical breathing. This mirrors the Aman experience itself — close-together details inside a much wider expanse of emptiness. ### Grid & Container - Max content width: ~1520px (the uppermost dembrandt breakpoint, confirmed as the wide-desktop boundary) - Hero: full-viewport photography with whisper-quiet overlaid type; no overlay scrim competing with the image - Destination grid: editorial card layouts in 2–3 columns on desktop, generous gutters, never cramped - Booking bar: a persistent dark (`{colors.ink}`) strip at the top of the page on some viewport states — "Reserve" CTA anchored right ### Whitespace Philosophy - **Sanctuary spacing**: Sections breathe at `65px+` vertical intervals — the large jump in the spacing scale is not a bug, it is the brand's white space strategy named as a token - **Photography-first**: Images are never framed or given visible containers — they occupy their regions edge-to-edge or with symmetric wide margins - **Centered calm**: editorial destinations and hero modules sit centered; asymmetry appears only in supporting grid layouts ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Default for every surface — page canvas, cards, editorial panels | | Left Rule (Level 1) | `border-left: 1px solid {colors.border}` | Navigation list items, accordion indicators | | Hairline Border (Level 2) | `1px solid {colors.border}` | Button outlines, input borders at rest | | PrimeReact Shell (Level 3) | `0px 2px 10px -3px #999999` | Framework component shells — not part of brand design intent | | Focus Ring | `box-shadow: 0 0 0 2px {colors.focus-ring}` | Focus state on interactive controls | **Shadow Philosophy**: Aman's brand design is functionally flat. The resort experience communicates depth through dimensional photography, not computed lighting effects. The four shadow values in the dembrandt scan belong entirely to PrimeReact/Element Plus component frameworks embedded in the booking system — none appear on the editorial or navigational brand chrome. Surfaces sit on the linen canvas without lifting; depth is reserved for the landscape inside the photographs. ## Shapes The complete radius scale is declared in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Default for all buttons, cards, images, input fields — the universal Aman shape | | `sm` | 2px | Subtle rounding on div containers, filter indicators | | `pill` | 9999px | Reserved for tag-like labels and cookie/filter pills | Aman's shape language is near-completely sharp. The dembrandt scan found `2px` and `2.5px` values on divs (medium confidence), a `17px` on a filter component, and a `50px` on the cookie search input — the latter two belong to embedded third-party framework shells. The brand-facing radius is `0`, consistent with the resort's architectural vocabulary of rectangular stone, rammed earth, and rectilinear water channels. ## 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 "Reserve" button: `{colors.primary}` charcoal fill, `{colors.on-primary}` linen text, `{typography.button-ui}` Whitney at 14px, `{rounded.none}` sharp corners, 10px 15px padding, 0.6s ease transition on background and border-color. The only saturated-chrome moment in the navigation. - **`button-secondary`** — Outline variant for secondary actions: transparent fill, `{colors.border}` charcoal 1px solid border, same padding and typography as primary. - **`button-ghost`** — Inline editorial links: transparent fill, no border, `{typography.nav-link}` Whitney with natural tracking, bottom-border underline on hover. ### Cards Destination cards and editorial feature panels: `{colors.surface-elevated}` white or transparent on linen, `{rounded.none}` sharp corners, no shadow, generous internal padding at 20px. Photography is placed edge-to-edge within the card region, never inset. Card text appears below the image in a clean type-only zone. ### Inputs Form fields in the booking and search systems: `{colors.surface-elevated}` white background, `{colors.border-subtle}` bottom-only rule at rest, 1px solid `{colors.border}` on focus, `{rounded.none}`, `{typography.body}` Whitney at 14px with `0.8px` tracking. No glow on focus, no color shift — just a thickening of the hairline rule. ### Badges / Tags Destination type labels and filter chips: `{colors.surface-warm}` fill, `{colors.ink-muted}` text, `{typography.caption}` 10px WhitneySSm uppercase 2px tracking, `{rounded.sm}` 2px corners. These are the wayfinding labels — "BEACH," "JUNGLE," "DESERT" — that categorize the resort portfolio. ### Navigation The Aman nav is composed of three elements: a left "Menu" link and search icon in `{typography.nav-link}` Whitney, the centered "AMAN" wordmark in a custom serif treatment at ~40px width, and right-aligned "English" language selector plus the "Reserve" `{components.button-primary}`. The header sits on `{colors.background}` linen with no bottom border and no elevation. On scroll, the header remains sticky with the same linen surface — no color shift or elevation change marks the transition. ## Do's and Don'ts ### Do - Use Lyon Text Web (or Spectral / Source Serif 4) for all destination names, editorial headings, and resort-level copy - Use WhitneySSm (or Source Sans 3) for navigation, booking UI, captions, and forms — keep the two-typeface contract intact - Always use positive letter-spacing on Whitney — `0.7px` minimum on body, `2px` on uppercase captions - Default to `{colors.background}` linen as the canvas — never pure white, never cool grey - Keep buttons sharp: `{rounded.none}` (`0px`) is the only Aman button shape - Use `{colors.ink}` charcoal for the sole primary CTA — the system has one filled button color - Allow photography to occupy full-bleed regions without borders, shadows, or rounded crops - Honor the large spacing jump to `{spacing.2xl}` (65px) for section-level vertical breathing - Set destination eyebrow labels in `{typography.caption}` — 10px WhitneySSm uppercase 2px tracking matches the resort wayfinding vocabulary - Treat the absence of decorative elements as intentional: flat surfaces and no shadows are the brand signal ### Don't - Don't introduce gradients on any surface — even subtle hero scrims compete with the landscape photography - Don't add drop shadows to brand-facing elements — PrimeReact component shadows exist in the booking engine, not in the editorial design - Don't use Lyon Text Web for navigation, button labels, or captions — the serif is for place names, not logistics - Don't round corners on buttons or primary cards — sharp `0` radius is the universal Aman shape - Don't tint or warm the canvas beyond `{colors.background}` — introducing a second background color breaks the spa-quiet rhythm - Don't bold heading text — Lyon Text Web operates at a single weight (400) throughout; emphasis is via size, not weight - Don't use saturated accent colors for CTAs — the system has no brand hue; charcoal is the only CTA fill - Don't letter-space Lyon Text Web display sizes excessively — the `0.5px` tracking at display scale is the maximum - Don't crop photography to rounded or circular frames — always rectangular, always edge-to-edge - Don't reduce body letter-spacing to zero — positive tracking on WhitneySSm is what gives the system its unhurried cadence --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <400px | Single column, micro nav labels compressed | | Mobile | 400–599px | Single column, full-width photography, simplified booking bar | | Mobile Large | 600–767px | Two-up grid possible for destination teasers | | Tablet | 768–1023px | Navigation restores to horizontal, 2-column editorial grid | | Desktop | 1024–1519px | Full nav, 3-column destination grids, full-width hero | | Large Desktop | ≥1520px | Maximum container width, expanded outer margins, hero photography at full resolution | ### Touch Targets - "Reserve" button: `~44px` tap height via 10px vertical padding plus 14px line-height plus border — adequate minimum - Navigation links: tappable area includes Whitney label plus generous adjacent whitespace - Destination cards: entire card surface including photography region is tappable, not just the title ### Collapsing Strategy - **Nav**: The "Menu" text label on the far left opens a full-screen overlay; the wordmark stays centered; "Reserve" remains persistent in the top-right - **Hero**: Full-viewport photography maintains aspect ratio on mobile; overlaid editorial text scales down from `{typography.display-hero}` to `{typography.heading-sub}` - **Destination grid**: 3-column desktop collapses to 2-column tablet and single-column mobile; photography proportions are preserved, not cropped - **Booking bar**: Compresses to an icon-only or stacked form on small viewports; "Reserve" CTA remains always visible - **Section spacing**: The `{spacing.2xl}` (65px) inter-section breathing reduces to `{spacing.xl}` (28px) on mobile, preserving the expansive rhythm at reduced scale ### Image Behavior - All photography uses padding-based aspect-ratio locking (consistent with the `padding-bottom` values found in dembrandt's motion analysis) - Hero images are full-viewport at all breakpoints — the composition adapts, the photography never gets cropped to a thumbnail - Resort gallery imagery maintains a 16:9 or 4:5 landscape/portrait convention consistent with the brand's film-inspired visual vocabulary --- ## Agent Prompt Guide ### Quick Color Reference - Background canvas: `{colors.background}` (`#f3eee7`) - Primary text: `{colors.ink}` (`#313131`) - Secondary text: `{colors.ink-muted}` (`#585858`) - Primary CTA fill: `{colors.primary}` (`#313131`) - CTA hover: `{colors.primary-hover}` (`#494848`) - CTA text: `{colors.on-primary}` (`#f3eee7`) - Border/hairline: `{colors.border}` (`#313131`) - Elevated surface: `{colors.surface-elevated}` (`#ffffff`) ### Example Component Prompts - "Build an Aman hero section on `{colors.background}` (`#f3eee7`) canvas. Full-bleed cinematic photography (no border, no shadow, no rounded corners). Overlaid at the bottom: a destination eyebrow in `{typography.caption}` (10px WhitneySSm uppercase 2px letter-spacing, `{colors.ink}`), then a 31px Lyon Text Web weight 400 `{typography.display-hero}` heading in `{colors.ink}`, line-height 1.45. No gradient scrim over the image." - "Design an Aman 'Reserve' button: `{colors.primary}` background, `{colors.on-primary}` text, `{typography.button-ui}` (14px WhitneySSm 0.7px tracking), `{rounded.none}` sharp corners, `10px 15px` padding, `1px solid {colors.border}` border, `transition: background 0.6s ease, border-color 0.6s ease`. Hover state shifts to `{colors.primary-hover}`." - "Create a destination card on `{colors.surface-elevated}` white. Full-bleed resort photography at top (no border, no shadow, `{rounded.none}`). Below: a `{typography.caption}` location eyebrow in `{colors.ink-quiet}` uppercase with `2px` tracking, a `{typography.heading-sub}` Lyon Text Web 16px resort name in `{colors.ink}`, and a `{typography.body}` Whitney 14px descriptor in `{colors.ink-muted}` at 1.45 line-height." - "Build the Aman navigation bar on `{colors.background}`. Left: 'Menu' link + search icon in `{typography.nav-link}` (14px WhitneySSm `0.7px` tracking, `{colors.ink}`). Center: 'AMAN' wordmark SVG. Right: 'English' link in `{typography.nav-link}` + the `{components.button-primary}` 'Reserve' button. No border-bottom, no shadow, no background shift on scroll." - "Design an Aman booking input field: `{colors.surface-elevated}` white background, bottom-only `1px solid {colors.border-subtle}` at rest, `1px solid {colors.focus-ring}` on focus (no glow, no color shift), `{rounded.none}`, `{typography.body}` 14px WhitneySSm `0.8px` tracking in `{colors.ink}`, padding `9px 14px`." - "Create a destination taxonomy badge: `{colors.surface-warm}` fill, `{colors.ink-muted}` text, `{typography.caption}` (10px WhitneySSm uppercase `2px` letter-spacing), `{rounded.sm}` 2px corners, `4px 10px` padding. Labels: 'BEACH', 'DESERT', 'MOUNTAIN', 'JUNGLE'." ### Iteration Guide 1. Begin with `{colors.background}` (`#f3eee7`) linen as the canvas — this warm tone is the single most recognizable element of the system, more distinctive than any logo or typeface. 2. Select typeface by function: Lyon Text Web for every sentence that names a place or describes an experience; WhitneySSm for every act of navigation, booking, or labeling. 3. Add positive letter-spacing to all Whitney text — `0.7px` on body and UI, `2px` on uppercase captions. The unhurried cadence is in the tracking. 4. Buttons are `{rounded.none}` sharp rectangles with 0.6s ease transitions — slow enough to feel considered. 5. The only filled-button color is `{colors.primary}` charcoal. No brand hue, no warm accent fills. 6. Photography carries all the visual depth. Never add shadows or gradients to brand chrome — the depth lives inside the images. 7. Use `{spacing.2xl}` (65px) for primary section-level vertical breathing. The large spacing gap is not an accident. 8. Captions and eyebrows in `{typography.caption}` uppercase with `2px` tracking — museum-wayfinding micro-text that names places without competing with them. --- ## 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 Aman. Brand names and trademarks belong to their respective owners.