REFERENCE STYLE COMPARISON vs bigbreath.co tokens.css
Extracted 2026-06-01 at 1440x900 viewport via Playwright/Firefox headless
Sites: aman.com, ourhabitas.com, sixsenses.com/en/

Notes on extraction
  Aman: hero H1 not captured by selector (JS-rendered after scroll); hero height ~943px measured; eyebrow found at 10px uppercase 2px letter-spacing.
  Habitas: nav matched full overlay (900px height = full-screen nav); H2 36px with 40px margin-bottom; content section inner container found at 1358px wide.
  Six Senses: H1 found via serif display font "Canto Roman" at 57.6px with negative letter-spacing -1.15px; no nav captured (custom element); H2 captured a small nav-level element, not meaningful for section headings.

---

DIMENSION COMPARISON (all computed pixel values unless noted)

Section vertical padding
  Our current:   --pad-section: 8rem (128px each side)
  Aman:          0px on section elements (uses margin-based rhythm, margin 65px top/bottom on hero)
  Habitas:       45px top / 64px bottom on content sections (sparse, asymmetric)
  Six Senses:    no section-level padding captured (uses full-bleed blocks)
  Pattern:       References lean 45-80px range, not 128px. Aman uses margin not padding.
  Recommended:   --pad-section: clamp(4rem, 7vw, 6rem)  [64-96px range, stepping down at narrower widths]

Hero min-height and padding
  Our current:   no explicit --hero-min-height token; --pad-section governs
  Aman:          hero block measured ~943px tall (full viewport at 900px + scroll zone); 0px padding, margin 65px
  Habitas:       810px measured height; 0px padding on hero; 50px margin-bottom
  Six Senses:    ~349px hero block (above-fold only before scroll), 160px margin-bottom
  Pattern:       All three use full-viewport-height hero via JS/CSS class, not min-height on the section element. Margin-bottom 50-160px separates hero from first section.
  Recommended:   Add --hero-min-height: 100svh; --hero-margin-bottom: clamp(3rem, 8vw, 8rem)

H1 font-size
  Our current:   --t-5xl: 5rem (80px) or --t-6xl: 6.5rem (104px)
  Aman:          H1 not resolved (JS-gated); body serif at 14px base
  Habitas:       H1 not resolved; display type inferred from brand; body at 18px base
  Six Senses:    H1 57.6px (3.6rem) with font-weight 400 and letter-spacing -1.15px (negative tracking)
  Pattern:       Six Senses at ~3.6rem with tight negative tracking is restrained and editorial. 5-6.5rem is oversized for luxury hospitality.
  Recommended:   --t-hero: clamp(2.75rem, 5.5vw, 4.5rem);  add --hero-tracking: -0.03em

H2 font-size
  Our current:   --t-3xl: 2.875rem (46px) or --t-2xl: 2.125rem (34px)
  Aman:          31px (about 1.94rem)
  Habitas:       36px (2.25rem) with 39.6px line-height (1.1 ratio - very tight)
  Six Senses:    H2 reading unreliable (15px nav element captured, not section heading)
  Pattern:       Aman at 1.94rem, Habitas at 2.25rem. References keep H2 closer to 2rem than 2.875rem.
  Recommended:   --t-h2: clamp(1.75rem, 3vw, 2.25rem);  line-height 1.1 to 1.15 (tight, editorial)

Body font-size and line-height
  Our current:   --t-base: 1rem (16px); no line-height token
  Aman:          14px body / 20.3px line-height (1.45 ratio) - smaller and tighter than standard
  Habitas:       18px body / 25.2px line-height (1.40 ratio) - generous and readable
  Six Senses:    16px body / 25.6px line-height (1.60 ratio) - standard with generous leading
  Pattern:       Range 14-18px. Luxury tier tends either very small (Aman, editorial) or slightly above base (Habitas, warmth). Line-height 1.4-1.6.
  Recommended:   Keep --t-base: 1rem (16px); add --lh-body: 1.55;  add --lh-heading: 1.1

Button padding and letter-spacing
  Our current:   no explicit button padding token; no --btn-tracking token
  Aman:          0px padding on matched link (text-only CTA style, no box padding); letter-spacing 0.8px on body
  Habitas:       0px padding on matched link (same pattern - bare text links not boxed buttons)
  Six Senses:    0px padding on matched element (consistent across all three)
  Pattern:       All three references use text-link CTAs with no box padding - the luxury hospitality standard avoids pill/box buttons entirely. Letter-spacing on body text 0.8px (Aman), normal (others).
  Recommended:   Add --btn-style: text-link (no background, no border-radius, no padding box); --btn-tracking: 0.08em; --btn-transform: uppercase; use underline-on-hover pattern only

Nav height and link font-size
  Our current:   no explicit nav height token
  Aman:          navLink font-size 24px - unusually large (may be open overlay state); letter-spacing normal
  Habitas:       nav height 900px (full-screen overlay captured in open state); navLink 20px
  Six Senses:    no nav captured
  Pattern:       Both captured sites use full-screen overlay nav, not a fixed-height bar. Link size 20-24px in overlay. For a fixed bar, luxury sites typically sit 60-80px tall with 13-14px links.
  Recommended:   Add --nav-height: 72px; --nav-link-size: 0.8125rem (13px); --nav-tracking: 0.12em; --nav-transform: uppercase

Container max-width
  Our current:   no explicit --container-wide or --container-narrow token
  Aman:          hero max-width 1440px (full bleed to viewport at this resolution)
  Habitas:       content inner container at 1358px; narrow inner at 500px
  Six Senses:    no container maxWidth resolved
  Pattern:       1360px wide container is the luxury hospitality standard (just inside 1440px viewport with breathing room). Narrow containers 480-560px for editorial text columns.
  Recommended:   Add --container-wide: 1360px; --container-narrow: 520px; --container-padding: clamp(1.5rem, 4vw, 3rem)

Eyebrow / sublabel typography
  Our current:   --t-xs: 0.75rem; no eyebrow-specific tracking token
  Aman:          10px / 2px letter-spacing / uppercase (very small, very widely tracked)
  Habitas:       none detected on homepage
  Six Senses:    none detected
  Pattern:       Aman's eyebrow at ~0.63rem with 2px absolute letter-spacing (~0.2em at that size) is distinctively editorial. This pattern suits bigbreath.co.
  Recommended:   Add --t-eyebrow: 0.6875rem (11px); --eyebrow-tracking: 0.18em; --eyebrow-transform: uppercase

---

RECOMMENDATIONS SUMMARY FOR tokens.css

1. --pad-section: reduce from 8rem to clamp(4rem, 7vw, 6rem). References use 45-80px, not 128px.
2. Add --hero-min-height: 100svh and --hero-margin-bottom: clamp(3rem, 8vw, 8rem). Hero height is full-viewport, gap after hero is 50-160px.
3. Add --t-hero: clamp(2.75rem, 5.5vw, 4.5rem) and --hero-tracking: -0.03em. Six Senses H1 at 3.6rem with negative tracking sets the editorial tone. Current 5-6.5rem is too large for this tier.
4. --t-h2: clamp(1.75rem, 3vw, 2.25rem) and line-height 1.1. References sit at 1.94-2.25rem, well below our 2.875rem.
5. Add --lh-body: 1.55 and --lh-heading: 1.1. All three references use tight heading line-heights (1.1-1.15) and moderate body leading (1.4-1.6).
6. Add --btn-tracking: 0.08em and --btn-transform: uppercase. All three references use bare text-link CTAs - no box buttons. Kill pill/border-radius button pattern for primary CTAs.
7. Add --nav-height: 72px, --nav-link-size: 0.8125rem, --nav-tracking: 0.12em, --nav-transform: uppercase. Luxury nav bars are thin with small uppercase tracked links.
8. Add --container-wide: 1360px, --container-narrow: 520px, --container-padding: clamp(1.5rem, 4vw, 3rem), --t-eyebrow: 0.6875rem, --eyebrow-tracking: 0.18em. These are the missing structural tokens needed to match the reference layout rhythm.
