---
version: alpha
name: "Aman"
website: "https://www.aman.com"
description: >-
  A luxury resort network whose marketing site achieves brand identity through what it removes rather than what it asserts — a warm linen canvas (#f3eee7) carries full-bleed resort photography beneath Lyon Text Web editorial serifs at weight 400, while WhitneySSm handles every functional surface in a medium charcoal (#585858) that never rises to pure black. No border radius exists anywhere on the page; no brand color accent is declared; the entire palette runs from charcoal (#313131) through warm linen (#f3eee7) across seven neutral tones. The typographic pairing — Lyon Text Web for editorial h2/h3 headings and WhitneySSm for navigation and metadata labels — is the brand's sole architectural move on a page otherwise defined by photographic space and negative space.

seo:
  title: "Aman Design System for React — charcoal ink, Lyon Text Web serif, 15 components"
  metaDescription: "Aman's marketing system as a DESIGN.md file. Charcoal ink on warm linen, Lyon Text Web editorial serif, WhitneySSm sans for navigation, zero border radius, zero brand color. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Zero border radius — not a single rounded corner appears across the entire captured site; every surface is rectilinear, including the primary CTA button"
    - "Two-serif typographic system — Lyon Text Web for editorial headings, WhitneySSm for navigation and labels; both families are weight 400, hierarchy comes from size and letter-spacing alone"
    - "Charcoal not black — the primary ink is #313131 rather than pure black, a choice that removes visual aggression and keeps the type in harmony with linen tones"
    - "Fractional spacing scale — the page uses 5.6px, 4.2px, and 14px as primary rhythm tokens, suggesting a modular scale anchored on 7px rather than a conventional 4px or 8px grid"
    - "Linen canvas as themeColor — #f3eee7, declared in the page meta themeColor, appears as the button text and select background surface — warmer than cream, closer to undyed linen"
  tags:
    - "Travel & Hospitality"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Aman's marketing site operates at a remove from every design-system convention. There is no primary brand color. There is no border radius. There is almost no UI chrome. The page is a sequence of full-bleed resort photographs — thatched pavilions over turquoise water, a tatami room in Tokyo, a courtyard at dusk — separated by narrow editorial headings in a weight-400 serif and small-caps WhitneySSm labels. Where Four Seasons uses deep green as a brand anchor, and Rosewood uses a restrained gold pairing, Aman removes the brand-chrome layer entirely. The page's chromatic voice comes from the photographs; the system's job is to ensure no token competes with them.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 12 color tokens running from charcoal ink (#313131) through a graduated gray family to warm linen (#f3eee7) — no hue anywhere in the palette except the linen's faint warmth; 11 typography tokens spanning Lyon Text Web and WhitneySSm, both at weight 400, with hierarchy delivered through size (from 10px small-caps labels to 31px h2) and letter-spacing (from 0.3px on navigation to 2px on uppercase labels); zero border-radius tokens (the spec uses a single `none: "0px"` value); 8 spacing tokens on a 7px-anchored modular scale; and 15 component definitions covering the sharp-edged reserve button, the whisper-weight nav, the full-bleed editorial section layout, and the photography-led media grid.

    Feed this file to Claude or Cursor and it will reproduce Aman's specific register: charcoal over linen instead of black over white, Lyon Text Web only for h2 and h3 editorial moments, WhitneySSm for every functional surface, no rounding anywhere, and letter-spacing doing the work that weight would do in any other luxury system. The move worth borrowing — only if your product has genuinely extraordinary photography — is the willingness to leave the brand-chrome layer empty and let the images do the identity work. Without exceptional photographs, this system reads as an unfinished page.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.aman.com"
      title: "Aman — official site"
      description: "Aman's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Aman's primary brand color?"
      answer: "Aman declares no chromatic brand accent. The extracted palette contains seven neutral tones: charcoal (#313131) at 579 occurrences as the dominant text and border color, medium gray (#585858) at 310 occurrences for navigation and secondary text, pure black (#000000) at 28 occurrences, warm linen (#f3eee7) at 4 occurrences as the button text and themeColor surface, mid-gray (#404040) at 2 occurrences, pure white (#ffffff) at 1 occurrence, and a stone gray (#aaa6a3) at 1 occurrence. The brand's themeColor meta tag is set to #f3eee7, suggesting linen is the designated 'brand surface' — but it appears sparingly on the page itself. All saturated color on the page comes from the resort photography."
    - id: "typography"
      title: "What typefaces does Aman use, and what are suitable substitutes?"
      answer: "Aman runs two typefaces: Lyon Text Web (by Commercial Type) for editorial h2 and h3 headings, and WhitneySSm (by Hoefler&Co) for navigation, labels, and body-scale text. Both are licensed typefaces. Lyon Text Web is a contemporary oldstyle serif — narrower and slightly narrower in stance than Garamond — appearing at 19.6px and 31px in weight 400 for editorial section headings. WhitneySSm is a humanist sans with low-contrast strokes, appearing from 10px to 14px across navigation and small-caps category labels (2px letter-spacing, uppercase transforms). For Lyon Text Web, Freight Text or Source Serif 4 are the closest available alternatives. For WhitneySSm, Proxima Nova or Aktiv Grotesk are close in proportion; for the small-caps uppercase register, set Inter at weight 500 with 0.15em letter-spacing."
    - id: "border-radius"
      title: "What is Aman's corner radius philosophy?"
      answer: "Aman uses zero border radius across the entire captured marketing site. The extraction returned an empty radii array — no element with a non-zero border radius was found in the 1459 scanned elements. The primary CTA button ('Reserve') has borderRadius 0px; navigation elements have 0px; image tiles have 0px. This absolute rectilinearity is intentional: the sharp edge signals architectural precision, echoing the resort photography where Aman properties tend to feature sharp lines (tatami rooms, geometric pool edges, Modernist pavilion roofs) rather than organic curves. Introducing rounded corners — even 4px — would immediately shift the brand register toward consumer hospitality apps."
    - id: "spacing-scale"
      title: "What spacing scale does Aman use?"
      answer: "Aman's spacing scale is anchored on a 7px module rather than the conventional 4px or 8px base. The dominant spacing token is 5.6px (0.8 × 7px), appearing 56 times as the primary padding unit. The secondary token is 14px (2 × 7px), appearing 29 times. Other common values: 4.2px (0.6 × 7px) at 15 times, 7px itself at 10 times. This fractional scale appears to derive from a fluid-type or viewport-relative sizing system — the values are precise multiples of a 7px root rather than round 8px-grid numbers. Section-level padding sits at 65px (roughly 9.3 × 7px), while the booking bar height is declared at 70px (10 × 7px) in a CSS custom property."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a luxury hospitality React site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Aman's specific moves: charcoal-not-black text, linen-not-white canvas surface on the primary button, Lyon Text Web-style serif only for h2 and h3 editorial moments, WhitneySSm-style sans with 0.4-0.8px tracking for functional chrome, zero rounding on every surface, and a 7px-modular spacing scale. The tokens resolve without invention. One critical caveat: the system only reads as Aman when paired with editorial-quality resort photography. The same token set applied with stock photography reads as a generic luxury layout; the photographs are what make the absence of brand chrome feel intentional rather than unfinished."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#313131"
  ink-mid: "#404040"
  ink-soft: "#585858"
  ink-faint: "#aaa6a3"
  jet: "#000000"
  canvas: "#ffffff"
  linen: "#f3eee7"
  hairline: "#313131"

typography:
  display-lg:
    fontFamily: "\"Lyon Text Web\", \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 31.08px
    fontWeight: 400
    lineHeight: 45.066px
    letterSpacing: "0.5px"
  display-md:
    fontFamily: "\"Lyon Text Web\", \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 24.108px
    fontWeight: 400
    lineHeight: 34.9566px
    letterSpacing: "0.5px"
  heading-sm:
    fontFamily: "\"Lyon Text Web\", \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 19.6px
    fontWeight: 400
    lineHeight: 28.42px
    letterSpacing: "0.98px"
  body-md:
    fontFamily: "\"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20.3px
    letterSpacing: "0.8px"
  nav-link:
    fontFamily: "WhitneySSm, \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18.85px
    letterSpacing: "0.42px"
  label-md:
    fontFamily: "WhitneySSm, \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18.85px
    letterSpacing: "0.8px"
  label-sm:
    fontFamily: "WhitneySSm, \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 12.95px
    fontWeight: 400
    lineHeight: 18.7775px
    letterSpacing: "0.3px"
  label-xs:
    fontFamily: "WhitneySSm, \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 12.32px
    fontWeight: 400
    lineHeight: 17.864px
    letterSpacing: "0.7px"
  button-md:
    fontFamily: "WhitneySSm, \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20.3px
    letterSpacing: "0.7px"
  small-caps:
    fontFamily: "WhitneySSm, \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 10.108px
    fontWeight: 400
    lineHeight: 14.6566px
    letterSpacing: "2px"
  caption:
    fontFamily: "WhitneySSm, \"Lyon Display Web\", \"Times New Roman\", serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16.1px
    letterSpacing: "0.7px"

rounded:
  none: "0px"

spacing:
  xxs: "4.2px"
  xs: "5.6px"
  sm: "7px"
  base: "14px"
  lg: "16px"
  xl: "20px"
  2xl: "25.7964px"
  3xl: "65px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.linen}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "10px 15px"
    height: "42px"
    borderColor: "{colors.ink}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "10px 15px"
    height: "42px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24.5px"
    height: "88px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.nav-link}"
    padding: "5.6px 14px"
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.none}"
    padding: "65px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  small-caps-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.small-caps}"
    padding: "0"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "19.6px"
  photo-tile:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "0"
  editorial-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "65px 0px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "5.6px 14px"
    height: "42px"
    borderColor: "{colors.ink}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.linen}"
    typography: "{typography.label-sm}"
    padding: "20px 24.5px"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.label-sm}"
    padding: "4.2px 0px"
---

## Overview

Aman's marketing site operates as an exercise in subtraction. **Whispered authority**: the system achieves recognition not through a brand accent or a typographic hierarchy of weights, but through what it withholds — no color accent, no rounding, no weight variation, no decorative chrome. Where Four Seasons declares brand identity with a deep green system and Rosewood with gold hairlines, Aman removes every brand-chrome layer and relies on the resort photographs to establish the difference between this and any other luxury site. The charcoal ink (#313131) is not pure black — it sits three steps lighter, removing the aggressive contrast of a true black-on-white page and placing the text in a quieter register that doesn't compete with photography.

**Serif-sans dialogue at weight 400**: Lyon Text Web carries every editorial heading — h2 section titles at 31px, h3 feature headings at 19.6px — and WhitneySSm covers every functional surface: navigation links at 13px with 0.42px tracking, small-caps category labels at 10.1px with 2px tracking, and the primary "Reserve" button at 14px / weight 400. Both families run at weight 400 across every tier. Hierarchy comes entirely from size and letter-spacing, never from weight. This is the inverse of how most luxury brands assert hierarchy — where LVMH properties might use weight 700 for their h1, Aman keeps everything at 400 and lets size and spacing do the sorting.

**Key Characteristics:**
- Zero border radius on every element — the extraction returned an empty radii array across 1459 scanned elements. Every surface is sharp-edged, including the CTA button.
- Charcoal ink (#313131) as the dominant text and border tone — 579 occurrences, 289 as text, 289 as border. Never pure black on the editorial surface.
- Medium gray (#585858) for navigation and secondary text — 310 occurrences, creating a two-step ink ladder that separates primary content from navigational chrome.
- Lyon Text Web for h2/h3 editorial headings; WhitneySSm for all functional chrome — both at weight 400.
- Linen canvas (#f3eee7) as the themeColor meta value and the primary button text color — not cream, not off-white: a warm undyed linen.
- 7px-anchored modular spacing scale: 5.6px (dominant), 14px (secondary), 4.2px, 7px — fractional multiples of a 7px root unit.
- Full-bleed photography at every editorial section; the system's role is to frame, not to compete.
- Small-caps uppercase labels at 10.1px with 2px letter-spacing — the single typographic texture move in an otherwise plain-weight system.

## Colors

### Ink

- **Ink** (`#313131`): frequency 579. Used as text (289), border (289), background (1). The primary structural tone for every heading, paragraph, hairline rule, and content border. Not pure black — three lightness steps above true black, which removes the confrontational quality of a high-contrast page.
- **Ink Mid** (`#404040`): frequency 2 — used on one background and one border. A transitional tone between charcoal ink and the medium gray navigation family.
- **Ink Soft** (`#585858`): frequency 310. Used as text (155), border (155). The navigation and secondary text tone — nav links, breadcrumbs, section captions. Creates a two-step ink ladder without introducing a third typeface.
- **Ink Faint** (`#aaa6a3`): frequency 1, as a border. A warm stone gray that appears as a single hairline; closer to the linen tone than to the charcoal family.
- **Jet** (`#000000`): frequency 28 — used as text (14) and border (14). Pure black appears only sparingly, in small interface elements where the charcoal would lose contrast.

### Surface

- **Canvas** (`#ffffff`): frequency 1, as background — pure white is nearly absent from the page. The site sits on a near-white that the extraction did not capture as a distinct background; the page's base surface reads as very light rather than stark white.
- **Linen** (`#f3eee7`): frequency 4 — 2 as text (the "Reserve" button label on the charcoal button fill), 2 as background (a select field or dropdown surface). The warmest tone in the palette; declared as the page's themeColor. Closer to undyed linen or a hotel notepad than to the warm cream of Cloudflare or the parchment of Soho House.

### Hairlines

- **Hairline** (`#313131`): the charcoal ink family serves double duty as both text and border — 289 of the 579 charcoal occurrences are border uses. There is no dedicated mid-gray or light-gray hairline; the system uses 1px charcoal rules throughout, which reads warmer than a black hairline but darker than the near-white hairlines of consumer SaaS.

## Typography

### Font Families

The system runs two licensed families: **Lyon Text Web** (Commercial Type) for editorial serifs and **Lyon Display Web** / **WhitneySSm** (Hoefler&Co) for functional sans text. Lyon Text Web is a contemporary oldstyle serif with moderate stroke contrast — historically anchored without reading as archaic. WhitneySSm is a humanist sans with low-contrast strokes and large x-height; it works exceptionally at the 10-14px range where Aman uses it.

Both families share weight 400 as their only weight. Hierarchy comes from size and letter-spacing — a convention associated with luxury print (Monocle, T Magazine, Vogue) rather than with software UI.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|---|
| `{typography.display-lg}` | Lyon Text Web | 31.08px | 400 | 45.066px | 0.5px | Section h2 headings ("Aman Tokyo: Past and Present") |
| `{typography.display-md}` | Lyon Text Web | 24.108px | 400 | 34.9566px | 0.5px | Sub-section h2 / editorial lead paragraphs |
| `{typography.heading-sm}` | Lyon Text Web | 19.6px | 400 | 28.42px | 0.98px | h3 feature headings in the editorial grid |
| `{typography.body-md}` | Lyon Display Web | 14px | 400 | 20.3px | 0.8px | Body paragraph text in editorial sections |
| `{typography.nav-link}` | WhitneySSm | 13px | 400 | 18.85px | 0.42px | Navigation link labels, breadcrumbs |
| `{typography.label-md}` | WhitneySSm | 13px | 400 | 18.85px | 0.8px | Secondary labels, category identifiers |
| `{typography.label-sm}` | WhitneySSm | 12.95px | 400 | 18.7775px | 0.3px | Footer links, tertiary metadata |
| `{typography.label-xs}` | WhitneySSm | 12.32px | 400 | 17.864px | 0.7px | Fine-print labels and sub-captions |
| `{typography.button-md}` | WhitneySSm | 14px | 400 | 20.3px | 0.7px | Primary button label ("Reserve") |
| `{typography.small-caps}` | WhitneySSm | 10.108px | 400 | 14.6566px | 2px | Small-caps category labels ("Seasonal Experiences", "The World of Aman") |
| `{typography.caption}` | WhitneySSm | 14px | 400 | 16.1px | 0.7px | Inline date/location captions under photographs |

### Principles

Weight 400 everywhere — no bold tier, no semibold, no medium. The weight restraint is the system's single most unusual typographic decision; most luxury brands use at least weight 500-600 for CTAs or heading emphasis. Aman keeps weight flat and uses letter-spacing instead: the small-caps labels at 2px tracking are the typographic peak of the system, making a 10px element feel more authoritative than a bold 18px one would.

### Note on Font Substitutes

Lyon Text Web is available through Commercial Type (licensed). The closest alternative: **Freight Text Pro** or **Source Serif 4** at weight 400 — both have the oldstyle proportions and moderate stroke contrast. WhitneySSm (Hoefler&Co) has no direct free equivalent; **Proxima Nova** at weight 400 with slightly reduced tracking transfers well for navigation-scale use.

## Layout

### Spacing System

- **Root module:** 7px — the spacing scale is anchored on multiples of 7px rather than the conventional 4px or 8px grid.
- **Tokens:** `{spacing.xxs}` 4.2px · `{spacing.xs}` 5.6px · `{spacing.sm}` 7px · `{spacing.base}` 14px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.2xl}` 25.8px · `{spacing.3xl}` 65px.
- **Section padding (vertical):** 65px between major editorial bands — generous but not extravagant.
- **Horizontal padding:** 24.5px on the booking bar and navigation rail (half of 49px, the `--bn-col-gap` CSS custom property).
- **Button padding:** 10×15px on the primary "Reserve" button, producing a modest 42px height.

### Grid & Container

- **Max content width:** ~1391px on the editorial h2 (the extraction captured a 1391px element width for the hero heading), suggesting a near-full-viewport layout.
- **Editorial sections:** full-width content with constrained text columns at approximately 320px — very narrow editorial column widths beside photography panels.
- **Photography grid:** 3-column mosaic of resort imagery (featured article tile on the left, two smaller tiles on the right) for the "Aman Tokyo" editorial feature.
- **"Seasonal Experiences" section:** 3-column equal grid of portrait-orientation photography with small-caps labels and Lyon serif headings beneath each photograph.
- **"The World of Aman" section:** a wider-spaced grid of landscape photography tiles including the Aman logo lockup, "Amanjiwo" property title, and "Aman at Sea" cruise offering.

### Rhythm

The page holds a single vertical tempo — 65px between sections, with photography filling the horizontal space entirely. There is no alternation between dense and generous bands; the page maintains one consistent pace from the video hero through to the footer. The 7px root module creates fractional spacing that reads as carefully considered rather than approximate.

## Elevation

The system has **no elevation**. There are no box-shadows, no drop shadows, and no tonal surface lifts. The captured page contains no shadow entries in the extraction. Where many luxury brands use subtle shadows to lift cards off a background — Rolex uses a faint box-shadow on its product cards, Four Seasons uses hairline-bordered cards with a very subtle lift — Aman keeps every surface flush. The photography provides all spatial depth; a shadow on a content card would compete with the spatial depth in the photographs above it.

## Shapes

The system has **no rounding**. The extraction returned an empty radii array — every one of the 1459 scanned elements has either `0px` or no border-radius declared. The primary "Reserve" CTA button is sharp-edged (borderRadius 0px). Navigation elements are sharp. Image tiles are sharp. Footer cells are sharp.

This radical rectilinearity is a position, not an omission. The properties Aman photographs — Aman Tokyo's rectilinear floor plates, Amanyara's angular pavilion roofs, Amangiri's sandstone geometry — are architecturally sharp-edged. Rounding the UI elements would create a soft consumer-app layer over a collection of architectural destinations. The 0px radius is the system's way of saying: this is a place, not an app.

## Components

**`button-primary`** — The reservation CTA. Charcoal `{colors.ink}` fill with linen `{colors.linen}` text, weight 400 WhitneySSm at 14px / 0.7px tracking, 0px radius, 10×15px padding, 42px height, 1px charcoal border. "Reserve" is the canonical instance. This is the only element with a linen-colored text label; everything else in the linen family is a surface background.

**`button-secondary`** — Transparent fill, charcoal text, 1px charcoal border, same 0px radius and 10×15px padding. Used for tertiary actions throughout editorial sections.

**`top-nav`** — Transparent background (overlays the page content), medium-gray `{colors.ink-soft}` text at `{typography.nav-link}` (WhitneySSm, 13px), 88px height. The Aman wordmark sits centered in the nav; Destinations, Experiences, Properties, and Reserve links flank it. No bottom hairline on the transparent nav state.

**`nav-link`** — Transparent, medium-gray `{colors.ink-soft}` text, 5.6×14px padding. The tracking of 0.42px gives the small text a wider visual footprint than its 13px size would otherwise achieve.

**`hero-section`** — Full-bleed video or photography surface with a constrained editorial heading overlaid. No background token: the video/image IS the surface. The text overlay uses natural contrast from the photograph's composition.

**`hero-heading`** — Charcoal `{colors.ink}` text at `{typography.display-lg}` (Lyon Text Web, 31.08px / 400 / 45.066px). Used for editorial article headings such as "Aman Tokyo: Past and Present."

**`section-heading`** — Charcoal text at `{typography.display-md}` (Lyon Text Web, 24.108px / 400). Used for "Seasonal Experiences" and "The World of Aman" section titles.

**`body-paragraph`** — Charcoal text at `{typography.body-md}` (Lyon Display Web, 14px / 400 / 0.8px tracking). The 0.8px letter-spacing is wide for 14px body copy — it slows the reading tempo and signals deliberate luxury print pacing rather than UI scan-reading.

**`small-caps-label`** — Charcoal text at `{typography.small-caps}` (WhitneySSm, 10.1px / 400 / 2px tracking, uppercase). The typographic peak of the system in terms of letter-spacing. Used for category identifiers above editorial sections — "Seasonal Experiences", "The World of Aman". The 2px tracking at 10px is the widest proportional spacing in the file.

**`card`** — White `{colors.canvas}` surface, charcoal text, 0px radius, 19.6px internal padding. Content card for editorial descriptions beneath photography panels.

**`photo-tile`** — Dark `{colors.ink}` background (shows when image is not loaded), 0px radius, no padding (photography fills edge-to-edge). Used in the featured article mosaic and the property grid.

**`editorial-section`** — White canvas section at 65px vertical padding. Holds a small-caps label above, a Lyon serif heading, and a body paragraph with a secondary CTA.

**`text-input`** — White canvas, charcoal text and 1px charcoal border, 0px radius, 5.6×14px padding, 42px height. The booking bar search input and any form fields.

**`footer`** — Charcoal `{colors.ink}` fill, linen `{colors.linen}` text column headers, medium-gray `{colors.ink-soft}` link text at `{typography.label-sm}`, 20px vertical padding. A dense multi-column link directory.

**`footer-link`** — Medium-gray text at `{typography.label-sm}`, transparent background, 4.2px top padding for inter-link spacing.

## Do's and Don'ts

**Do** use charcoal (#313131) rather than pure black for every text and border element. The restraint is the move — pure black on a near-white editorial page would snap the brand register from Aman to a print brochure. The charcoal's distance from true black matches the linen's distance from true white.

**Do** keep Lyon Text Web exclusively for h2 and h3 editorial headings and use WhitneySSm for all functional surfaces. The serif speaks; the sans serves. Running the Lyon serif at body scale or using it for navigation labels collapses the editorial register into a generic literary website.

**Do** apply small-caps uppercase treatment and 2px letter-spacing to section category labels at 10px. This single typographic texture move — WhitneySSm at 10px with 2px tracking and uppercase — does the work of a bold heading tier without breaking the weight-400 discipline.

**Do** keep the reservation button at 0px radius. The rectilinear CTA on an otherwise rectilinear page is architecturally consistent. Rounding the single interactive element to a pill or even 4px creates a visual dissonance with every sharp-edged photograph frame and content block around it.

**Don't** introduce a chromatic accent to "guide the eye" toward the reservation button. Adding a warm amber or a deep forest-green CTA would immediately shift the page into a conventional luxury-hospitality booking app register. The charcoal-on-linen button works because it is the only element with a linen-colored label; make it orange and the whole system becomes Four Seasons.

**Don't** use weight above 400 anywhere. The entire system is weight 400 — headings, buttons, labels, nav links. Introducing a weight 600 or 700 tier for a CTA label or a section heading would read as an intrusion from a different brand system; it violates the whispering restraint that the 400-weight discipline enforces across 1459 elements.

**Don't** add border-radius. Even 2px or 4px on the CTA button or image tiles introduces a consumer-app softness that pulls against the architectural nature of Aman's properties. The zero-radius discipline is the system's silent declaration that this is a place brand, not a product brand.

**Don't** put body copy in Lyon Text Web at sizes below 18px. At 31px the oldstyle serif reads as authoritative; at 14px and below the stroke contrast becomes a legibility problem on screen, and the weight-400 hairline strokes can feather at sub-pixel rendering. Use Lyon Display Web or WhitneySSm for body-scale text.

## Known Gaps

- **Authenticated booking surfaces:** the reservation flow and member-specific pages likely carry additional form components, date-picker tokens, and property-specific color accents not exposed on the public marketing page.
- **Mobile breakpoints:** the extracted surface is desktop (1440px). The navigation collapses and the photography grid reflows at mobile breakpoints with a different padding scale not captured here.
- **White canvas base:** the page's actual background surface appears to be a very light near-white or the linen tone applied as the body background; the extraction did not capture this as a distinct token since it's set at the body level.
- **Hover and focus states:** nav link hover, button hover, and focus ring styles are not visible in the captured static surface and are not documented in this spec.
- **Motion:** the hero appears to include a video or crossfade sequence; no animation timing, easing, or transition tokens are included.
- **Property-specific sub-brands:** individual Aman properties (Amanjiwo, Amangiri, Aman Tokyo) may have property-specific identity markers — these are not exposed on the main marketing page.
- **Dark-surface contexts:** the footer uses a charcoal fill; the full token set for dark-surface UI (light hairlines, linen text) is only partially inferred from the footer component.