--- version: alpha name: "1 Hotels" description: "Nature-immersive luxury hotel design system built on a warm parchment canvas, Lineto Brown's airy tracking, and a forest-deep navy that anchors the brand without overpowering the landscape." colors: # Surface / canvas background: "#f2f0e9" surface: "#ffffff" surface-dark: "#394034" # deep forest olive — used for dark-mode panels and footer surface-warm: "#f9f8f7" # barely-off-white — form inputs, booking widget # Text / ink ink: "#222222" ink-muted: "#555555" on-background: "#222222" on-surface: "#555555" on-dark: "#f2f0e9" # warm parchment text on dark panels # Brand accent primary: "#0d334a" # forest navy — CTAs, submit buttons, active states on-primary: "#ffffff" primary-hover: "#103d59" # was rgb(16,61,89) — dembrandt interactiveDeltas # Warm earth accent accent-earth: "#615144" # warm mushroom brown — links, underline CTAs, active nav accent-earth-hover: "#555555" # was rgb(86,86,86) — dembrandt hover # Interaction states text-hover: "#555555" # was rgb(86,86,86) — slightly lifted gray on hover focus-ring: "#0d334a" # forest navy focus ring focus-tint: "#f2f0e9" # warm parchment — focus container hint # Semantic error: "#c0392b" # /* estimated */ — not surfaced by dembrandt success: "#394034" # deep olive — confirmation states # Borders border: "#e4e4e4" # was rgb(228,228,228) — form field hairlines border-subtle: "#e0e0e0" # was rgb(224,224,224) — secondary dividers border-earth: "#615144" # warm-earth bottom-border on links and CTAs # Shadow tints shadow-soft: "#000000" # used by card: rgba(0,0,0,0.2)–(0.3) — flattened to hex shadow-card: "#000000" # was rgba(0,0,0,0.3) 0px 10px 40px 0px — modal lift typography: display-hero: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 38px fontWeight: 700 lineHeight: 1.0 letterSpacing: 3.84px display: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 27px fontWeight: 500 lineHeight: 1.2 letterSpacing: 2.7px heading-section: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 2.2px heading-sub: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 2.0 letterSpacing: 1.26px body-large: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 2.0 letterSpacing: 1.26px body: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 2.0 letterSpacing: 1.26px editorial-serif: fontFamily: "Plantin Std, Georgia, Times New Roman, serif" fontSize: 14px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0px nav-link: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 2.8px button-ui: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 2.4px caption: fontFamily: "Brown, Nunito Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 2.2px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 100px rounded: none: 0px sm: 2px md: 5px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 20px 40px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 20px 40px button-ghost: backgroundColor: "transparent" textColor: "{colors.surface}" typography: "{typography.button-ui}" rounded: "{rounded.none}" borderColor: "{colors.surface}" padding: 20px 40px button-ghost-hover: backgroundColor: "transparent" textColor: "{colors.on-background}" typography: "{typography.button-ui}" rounded: "{rounded.none}" borderColor: "{colors.ink}" padding: 20px 40px button-earth: backgroundColor: "transparent" textColor: "{colors.accent-earth}" typography: "{typography.button-ui}" rounded: "{rounded.none}" borderColor: "{colors.border-earth}" padding: 12px 0px button-earth-hover: backgroundColor: "transparent" textColor: "{colors.text-hover}" typography: "{typography.button-ui}" rounded: "{rounded.none}" borderColor: "{colors.text-hover}" padding: 12px 0px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 32px card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" padding: 32px input: backgroundColor: "{colors.surface-warm}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" borderColor: "{colors.border}" padding: 8px 24px input-focus: backgroundColor: "{colors.surface-warm}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.sm}" borderColor: "{colors.focus-ring}" padding: 8px 24px badge: backgroundColor: "{colors.surface-warm}" textColor: "{colors.accent-earth}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 4px 10px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" borderColor: "{colors.border}" padding: 0px 32px --- # 1 Hotels Design System ## Overview 1 Hotels occupies a singular position in hospitality design: a luxury hotel group that treats environmental commitment not as a marketing layer but as the formal logic of its visual system. The page canvas is a warm parchment (`{colors.background}`) pulled directly from unbleached linen and natural fiber, a tone that refuses the sterile white of corporate hospitality and the tan warmth of "wellness-adjacent" brands. Against it, full-bleed landscape photography — a marsh at dawn, a Hudson River panorama, a Maldivian horizon at dusk — carries the emotional weight entirely. The chrome does almost nothing except hold space. The typographic backbone is Lineto Brown, a humanist geometric sans with exceptionally open apertures and a characteristic "l" that reads as almost calligraphic. 1 Hotels uses it consistently in uppercase with generous tracking (`{typography.display}` at 2.7px, `{typography.button-ui}` at 2.4px), which creates a slow, almost ceremonial reading pace — the pace of someone who has nowhere to be. Plantin Std appears as a serif counterweight in editorial micro-contexts, a Garamond-lineage face that grounds the warmer Brown headlines in something older and quieter. The signature visual move is restraint carried to a formal extreme. Buttons are `0px` radius, often ghost — transparent fills with a single hairline border against photography (`1px solid rgba(255,255,255,0.5)`). The only solid CTA fill is the forest navy `{colors.primary}` in the booking widget, where function demands legibility. Cards lift slightly with a soft ambient shadow when hovered (`rgba(0,0,0,0.2) 0px 0px 18px`), but at rest the interface is perfectly flat. The result is a digital environment that feels less like a website and more like a printed conservation annual — unhurried, materially aware, built for people who chose the hotel because it knows what the world costs. **Key Characteristics:** - Warm parchment canvas (`{colors.background}`) — not white, not beige, but the color of recycled content paper - Lineto Brown in persistent UPPERCASE at wide tracking — slow, ceremonial, nature-resort pace - Ghost button as the default CTA: transparent fill, hairline border, `{rounded.none}` — zero decoration - Forest navy `{colors.primary}` reserved for the booking widget's submit — function over brand expression - Warm earth tone `{colors.accent-earth}` for underline links and bordered secondary CTAs — tactile, quiet - Deep forest olive `{colors.surface-dark}` for dark panel moments — not pure black, ecologically tinted - Full-bleed landscape photography as the primary design element — horizon lines, water surfaces, foliage - Plantin Std serif counterpoint (`{typography.editorial-serif}`) — editorial gravity inside all-sans Brown system - Spacing scale reaching 100px (`{spacing.4xl}`) — breathing room calibrated to resort generosity - Near-zero border radius: `{rounded.none}` for buttons and cards, `{rounded.sm}` for inputs — sharp, material ## Colors ### Primary - **Warm Parchment** (`{colors.background}`): The dominant page canvas. Derived from natural fiber tones; not warm-white but definitively non-white. Every photography section bleeds edge-to-edge against it. - **Pure White** (`{colors.surface}`): Panel surfaces, booking widget backgrounds, modal overlays — white appears contextually, not as the base canvas. - **Near-Black** (`{colors.ink}`): Primary body text and heading content on parchment surfaces. ### Brand Accent - **Forest Navy** (`{colors.primary}`): The single solid CTA fill — used exclusively in the booking widget's submit state and form action buttons where the function demands unambiguous weight. Hover lifts to `{colors.primary-hover}`. - **Warm Earth** (`{colors.accent-earth}`): Underline CTAs ("Explore the property"), secondary link states, and bordered ghost buttons on light surfaces. The warmest color in the chrome palette. ### Text States - **Body Gray** (`{colors.ink-muted}`): Secondary text — property summaries, form labels, descriptive copy below navigation items. - **Hover Gray** (`{colors.text-hover}`): Applied on link and button hover — slightly lifted from body gray; transition at 0.3s ease. ### Surfaces & Dark Panels - **Forest Olive** (`{colors.surface-dark}`): The dark surface applied to footer and certain immersive editorial panels. Biophilic rather than neutral — reads like a darkened treeline. - **Form Warm** (`{colors.surface-warm}`): Input field backgrounds — the barely-off-white that separates form chrome from the parchment canvas. ### Borders & Dividers - **Form Hairline** (`{colors.border}`): `1px solid` on inputs and select fields. - **Earth Underline** (`{colors.border-earth}`): Bottom-border decoration on earth-tone CTAs and active navigation items. ### Shadow Tints - `{colors.shadow-soft}` is used at low opacity (`rgba(0,0,0,0.2–0.3)`) for card hover lifts and modal elevations — the only depth signal in an otherwise flat interface. ## Typography ### Font Family - **Primary**: Lineto Brown (`Brown, BrownLL`), with fallbacks: `Nunito Sans, ui-sans-serif, system-ui, sans-serif` - **Editorial Serif**: Plantin Std, with fallbacks: `Georgia, Times New Roman, serif` - **UI System (tertiary)**: Arial — appears only in form labels and accessibility contexts where Brown fails to load - Fonts are self-hosted as `.ttf`, `.otf`, and `.woff` files — no external font CDN dependency; privacy-aligned with the brand's sustainability positioning ### Hierarchy | Token | Use | |---|---| | `display-hero` | Hero section labels, landing overlay text at 38px UPPERCASE — the slowest-reading tier | | `display` | Section headers, property name displays, key editorial titles | | `heading-section` | Sub-section anchors, amenity category headers, location titles | | `heading-sub` | Card subtitles, body-adjacent headings, room category labels | | `body-large` | Lead paragraphs in property description, editorial intros | | `body` | Standard running copy — descriptions, policies, footer links | | `editorial-serif` | Plantin Std appears on pull-quotes, selected captions, seasonal editorial moments | | `nav-link` | Navigation items — UPPERCASE, Brown 700 at wide tracking | | `button-ui` | CTA labels — UPPERCASE, tight, 12px at 2.4px tracking | | `caption` | Location bylines, photo credits, legal micro-copy | ### Principles - **Uppercase as cadence, not emphasis**: Brown is always all-caps in display and navigation contexts — not for shouting, but for the contemplative pace uppercase creates when tracked wide - **Tracking is the brand signal**: Letter-spacing ranges from 1.26px at body to 3.84px at hero — the spacing between letters mirrors the space between guests at a resort - **Serif as texture, not hierarchy**: Plantin appears sparingly as a visual counterpoint, never as a competing hierarchy level — Brown is the typographic ground - **Line-height at 2.0 for body text**: Double-spaced feel gives the prose the breathing room of a letterpress printed card, not a web form ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. 1 Hotels uses a markedly generous spacing scale. The `{spacing.4xl}` 100px step appears between major sections — a white-space move that mirrors the long walks between resort facilities. The 8px base is tighter than typical luxury (which often bases at 4px), but the large-step jumps compensate: from 32px to 48px to 64px to 100px, sections breathe at resort rather than retail pace. ### Grid & Container - Max content width: 1440px for full-page layouts; 1280px for editorial content columns - Full-bleed photography is the primary layout device — full viewport width, constrained height ratios at each breakpoint - 12-column grid underlying the booking widget and property detail pages; editorial sections often break to 2-up or 1-up feature layouts - Booking widget uses a condensed horizontal strip form at desktop — check-in / check-out / destination / guests inline, submit at right edge ### Whitespace Philosophy - **Resort generosity**: Between sections, the vertical gap is deliberately excess — a digital pause that mirrors the experience of checking into a property that has nothing to sell you in the hallway - **Photography does the grid work**: Full-bleed images are not "hero" sections — they are structural dividers, replacing ruled lines and section headings with landscape transitions - **No sidebar layouts**: The interface never splits into a persistent left navigation or content-plus-sidebar arrangement; everything is full-column or full-bleed ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Page canvas, full-bleed photography, body sections | | Hairline (Level 1) | `1px solid {colors.border}` | Form fields, booking widget frame, input separators | | Card Hover (Level 2) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Property cards on hover — the only ambient depth signal | | Modal / Drawer (Level 3) | `rgba(0,0,0,0.3) 0px 10px 40px 0px` | Booking modal, full-screen destination overlays | | Focus Ring | `2px solid {colors.focus-ring}` | Form inputs and interactive elements on keyboard focus | **Shadow Philosophy**: 1 Hotels treats depth almost identically to how Aman does — as an event, not a default. Resting cards are flat; only hover triggers the soft lift. The values are warm-neutral (pure black at low opacity against a parchment surface reads as a slightly warm shadow), which supports the environmental material logic. The two shadow values found by dembrandt confirm this: both are modal-weight, reserved for transient elevations. Never on buttons, headers, or persistent chrome. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Buttons, cards, photography crop frames, navigation panels | | `sm` | 2px | Form inputs, checkboxes — the only softening, barely perceptible | | `md` | 5px | Modal dialogs, tooltip surfaces, cookie panel | | `pill` | 9999px | Social media icon buttons (circular), avatar images | The philosophy is sharpness as a material value. Natural stone, raw wood, linen — the reference materials for 1 Hotels are not soft. Buttons cut hard; cards have no rounding; photography crops are rectilinear. The `{rounded.sm}` on inputs is a practical accessibility concession, not a design statement. Circles appear only for social icons, where the convention is too entrenched to override. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button variants - **`button-primary`** — Forest navy fill (`{colors.primary}`), white text, zero radius, 20px 40px padding. Used exclusively in the booking widget submit. The one moment of solid brand color in all-ghost chrome. - **`button-ghost`** — Transparent fill, white `1px` hairline border, uppercase Brown 700 at 2.4px tracking. Appears over photography for CTAs like "Explore" and "Discover". The default CTA mode for editorial contexts. - **`button-earth`** — Transparent fill, warm earth bottom-border only (`{colors.border-earth}`). Used for underline-style CTAs on parchment surfaces: "Learn more", "Book a table". Bottom-border-only construction emphasizes ground over container. ### Cards Cards are flat at rest and lift softly on hover (`rgba(0,0,0,0.2) 0px 0px 18px 0px` at 0.25s ease). Zero border radius, parchment or white background depending on section. Property cards run photography full-width above a text block — name in `{typography.display}`, location in `{typography.caption}`. ### Inputs Text inputs use `{colors.surface-warm}` background with a `{colors.border}` 1px border. On focus, the border transitions to `{colors.focus-ring}` (forest navy). The input panel in the booking widget uses a horizontal layout with minimal separation between fields — a single hairline divider rather than individual boxes. ### Navigation The top navigation runs on the parchment canvas (`{colors.background}`), center-aligned wordmark, Brown 700 UPPERCASE nav links at wide tracking. On scroll, a gentle background-opacity shift anchors the bar. Mobile collapses to a full-screen menu overlay with `{colors.surface-dark}` fill and parchment text. ## Do's and Don'ts ### Do - Use `{colors.background}` (warm parchment) as the page canvas — never swap to pure white as the base - Run button labels in UPPERCASE with `{typography.button-ui}` tracking (2.4px) — the tracking is as important as the case - Keep buttons at `{rounded.none}` — the sharp edge is a load-bearing brand signal, not an oversight - Use `{colors.primary}` (forest navy) only in the booking widget and definitive submit CTAs — preserve its weight by rationing it - Lead every major section with full-bleed landscape photography — the horizon line is the brand's most powerful visual - Apply `{colors.accent-earth}` for underline-style links and secondary CTAs on parchment surfaces - Use `{spacing.4xl}` (100px) between major page sections — the large gap is intentional resort breathing room - Self-host fonts (Brown and Plantin Std) — no Google Fonts dependency, consistent with privacy and sustainability positioning - Apply `{colors.surface-dark}` (forest olive) for immersive dark-panel sections — never pure black ### Don't - Don't use a white canvas as the page background — `{colors.background}` warm parchment is the brand base, not white - Don't add border-radius to buttons or cards — `{rounded.none}` is non-negotiable in the button family - Don't use Brown in mixed or title case for navigation or CTAs — UPPERCASE at wide tracking is the typographic contract - Don't introduce gradients anywhere in UI — the palette is flat surfaces and photography, never gradated - Don't apply drop shadows to resting cards, buttons, or persistent navigation — depth is an event (hover or modal), not a state - Don't crowd photography with opaque overlay scrims — if text must sit over imagery, choose frames with inherent negative space - Don't introduce `{colors.primary}` as a decorative color — forest navy is a functional marker, not a palette tone - Don't use tight line-height on body text — `{typography.body}` line-height 2.0 is the reading rhythm, tightening it breaks the pace --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single column, hero type drops to 24px, full-bleed photography maintained | | Mobile | 375–768px | Single column, hamburger to full-screen dark overlay menu, booking widget collapses to stacked | | Tablet | 768–1024px | 2-up property card grid, partial inline navigation, booking widget single-row | | Desktop | 1024–1440px | Full inline navigation, 3-up property grid, horizontal booking widget | | Large Desktop | ≥1440px | Max 1440px container, 100px section spacing, 4-up property grid with wider gutters | ### Touch Targets - Primary CTAs: min 48px tap height (20px top + bottom padding on 12px type ≈ 44px natural — augmented to 48px on mobile via padding override) - Navigation links: 44px touch row height on mobile, 56px on the full-screen overlay - Booking widget: each form field min 44px height, submit button full-width on mobile ### Collapsing Strategy - **Navigation**: Horizontal Brown UPPERCASE links collapse into a full-screen `{colors.surface-dark}` overlay with parchment text and `{typography.nav-link}` at 2× scale on mobile - **Booking widget**: Inline horizontal row (check-in / check-out / property / guests) stacks vertically on tablet and below, submit becomes full-width - **Photography**: Full-bleed treatment maintained at all breakpoints; art-directed portrait crops replace landscape at mobile - **Section spacing**: `{spacing.4xl}` (100px) steps reduce to `{spacing.3xl}` (64px) at tablet and `{spacing.2xl}` (48px) at mobile - **Typography**: Display scales from 38px (hero) to 27px at tablet, 22px at mobile — wide tracking adjusted proportionally down ### Image Behavior - Landscape photography uses art-directed crops: full panoramic ratio at desktop, tighter 3:2 or portrait at mobile - Property card photography: fixed aspect ratio maintained across grid reflows - Logo appears in both a minimal letterform version (mobile) and the full vertical stack (desktop) --- ## Agent Prompt Guide ### Quick Color Reference - Background (canvas): `{colors.background}` — warm parchment - Primary text: `{colors.ink}` - Secondary text: `{colors.ink-muted}` - Brand CTA: `{colors.primary}` — forest navy - Earth accent: `{colors.accent-earth}` - Dark surface: `{colors.surface-dark}` - Form border: `{colors.border}` - Focus ring: `{colors.focus-ring}` ### Example Component Prompts - "Create a 1 Hotels-style hero section over a full-bleed landscape photograph (marsh at dawn, edge to edge). Center a 38px Brown 700 UPPERCASE headline 'STAY WILD' in white, letter-spacing 3.84px, line-height 1.0. Below, a ghost button: transparent fill, `1px solid rgba(255,255,255,0.5)`, zero border-radius, 20px 40px padding, 12px Brown 700 UPPERCASE label 'EXPLORE PROPERTIES' at 2.4px tracking. No overlay scrim — the image provides the contrast." - "Build a 1 Hotels property card on `{colors.background}` canvas. Full-width photograph at top (zero radius, 16:9 crop), then text block: 22px Brown 500 UPPERCASE property name in `{colors.ink}` at 2.2px tracking, 16px Brown 400 city + country in `{colors.ink-muted}` at 1.26px tracking below with 2.0 line-height. Bottom of card: a bottom-border CTA — Brown 700 UPPERCASE 'DISCOVER MORE' at 12px, 2.4px tracking, `{colors.accent-earth}` text with `1px solid {colors.border-earth}` bottom-border only, no fill. On card hover: `rgba(0,0,0,0.2) 0px 0px 18px 0px` shadow at 0.25s ease." - "Design a 1 Hotels booking widget. Horizontal strip on `{colors.surface-warm}` background. Four fields inline: 'Destination', 'Check In', 'Check Out', 'Guests' — each 16px Brown 400 label in `{colors.ink-muted}`, 1px bottom-border `{colors.border}`, no box border on sides. At right edge: a solid submit button — `{colors.primary}` fill, white text, Brown 700 UPPERCASE 'CHECK AVAILABILITY' at 12px 2.4px tracking, zero border-radius, 20px 40px padding. On hover: lift to `{colors.primary-hover}`." - "Create a 1 Hotels navigation bar. `{colors.background}` parchment background, 1px bottom border `{colors.border}`. Centered brand mark. Left cluster: Brown 700 UPPERCASE 14px nav links at 2.8px tracking in `{colors.ink}` — 'HOTELS', 'OFFERS', 'SH STUDIOS', 'SUSTAINABILITY'. On hover: `{colors.accent-earth}` bottom underline, text color shifts to `{colors.accent-earth}`. Right cluster: search icon, account icon, Brown 700 UPPERCASE 'BOOK' CTA button in `{colors.primary}` fill." - "Build a 1 Hotels section divider with editorial serif quote. Dark panel: `{colors.surface-dark}` fill, full-width. Inside: Plantin Std 600 italic pull-quote at 24px, `{colors.on-dark}` parchment text, centered, max-width 720px, `{spacing.4xl}` 100px padding top and bottom. Below the quote: 12px Brown 700 UPPERCASE attribution in `{colors.accent-earth}` at 2.2px tracking. This is the only Plantin appearance in the interface — a moment of serif weight against the all-Brown system." ### Iteration Guide 1. Set the page canvas to `{colors.background}` (warm parchment) — this single decision separates 1 Hotels from every white-canvas luxury competitor 2. Place full-bleed landscape photography as the primary structural element — horizon lines, water, foliage; never interiors or portraits as the lead image 3. All display and navigation copy is UPPERCASE Brown with `{typography.display}` or `{typography.button-ui}` tracking — the slow pace of wide tracking is the brand's temporal signature 4. Default to ghost buttons (`{components.button-ghost}`) over photography; use `{components.button-earth}` on parchment surfaces; reserve `{components.button-primary}` for booking submit only 5. Keep elevation flat at rest — add `rgba(0,0,0,0.2) 0px 0px 18px 0px` shadow only on hover or modal events, never as a default card treatment 6. Use zero border-radius (`{rounded.none}`) on all buttons and cards; `{rounded.sm}` only on form inputs 7. Introduce `{colors.surface-dark}` sparingly for dark editorial moments — one or two panels per page maximum, never the dominant surface 8. Space major sections at `{spacing.4xl}` (100px) on desktop — the generosity is the brand's most legible luxury signal --- ## 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 1 Hotels. Brand names and trademarks belong to their respective owners.