name: maison-trois-design
version: alpha
description: >
  A cinematic, editorial landing page for a three-city boutique hotel group, set
  on a warm bone (#F3EBDD) paper that alternates with deep ink (#0E1E1C) and
  emerald (#0A4E47) night sections. The voltage is a jade-to-coral pairing —
  jade (#16D9A3) for labels, accents and the eight-point star motif, coral
  (#FF5C49) for CTAs and price highlights. The type story is a high-contrast
  Fraunces serif (with italics for emphasis), a Spline Sans body, and a wide
  uppercase Spline Sans Mono used as the connective "coordinate" tissue. The
  geometry is editorial and mostly sharp-cornered — overlapping image stacks
  with hard offset shadows, a bento grid, a scrolling coordinate rail, and a
  mouse-spotlight map reveal; only buttons, pills and avatars go fully round.
colors:
  # Brand / Voltage
  jade: '#16D9A3'           # primary accent: eyebrows, labels, em italics on dark, stars, borders, hover
  coral: '#FF5C49'          # secondary accent: CTAs, price values, active pill, focus ring, map gems
  # Surface
  bone: '#F3EBDD'           # warm paper page surface; also text color on dark sections
  ink: '#0E1E1C'            # darkest surface: hero, reserve, experiences, footer
  emerald: '#0A4E47'        # mid-dark surface: cards, tiles, image backings, date fields
  # Text
  muted-on-bone: '#5C7370'  # muted body/notes/labels on bone surfaces
  muted-on-ink: '#9FB8B2'   # muted body/labels on ink & emerald surfaces
  # Hairlines (derived from brand at low alpha)
  hairline-jade: 'rgba(22,217,163,.25)'   # 1px borders/dividers on dark (alpha varies .18–.32)
  hairline-emerald: 'rgba(10,78,71,.3)'   # 1px borders/dividers on bone (alpha varies .3–.4)
  # Scrim / Overlay
  scrim: 'rgba(14,30,28,.88)'  # bottom of hero overlay, tile scrim, tag backings

Maison Trois

maison-trois-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + :root CSS variables and class rules. Fictional/sample product; described factually.

Overview

Maison Trois is a cinematic, chapter-structured landing page for a fictional three-city boutique hotel group. It opens on a full-bleed looping hero video darkened by an ink gradient overlay and a grain texture, with a giant Fraunces headline that rises word-by-word out of clipped masks. The page is paced like a book — each section is an "Chapter" eyebrow set in wide uppercase mono. The surface alternates between warm bone paper (#F3EBDD) and deep ink night (#0E1E1C), with emerald (#0A4E47) as the recurring image-backing and card fill. The voltage is a two-color play: jade (#16D9A3) carries the labels, italic emphasis on dark, hairline borders, and a recurring eight-point star clip-path motif; coral (#FF5C49) owns every call-to-action, price figure, the active pill, and the focus ring. Type is the star — Fraunces serif (600 for display, 400 italic for emphasis), Spline Sans for body, and Spline Sans Mono in wide all-caps tracking as the connective "coordinate" tissue (rails, tier labels, legends, prices). Geometry is editorial: mostly sharp 0-radius blocks, an overlapping image stack with a hard 14px 14px 0 offset shadow, a bento grid that dims its siblings on hover, a horizontally scrolling coordinate rail, and a radial mouse-spotlight that masks the neighborhood map.

Colors

Brand / Voltage. jade #16D9A3 is the primary accent — it colors every eyebrow and mono label, the italic em words on dark surfaces, the logo mark glyph, hairline borders, and the eight-point star motif (rendered as a clip-path polygon). coral #FF5C49 is the action voltage: the Reserve and Search buttons, the active interior pill, every price value (.pv), the map gem dots, the experiences progress bar, and the :focus-visible outline.

Surface. bone #F3EBDD is the warm paper page background and the default text color on every dark section. ink #0E1E1C is the deepest surface — hero, reservation, experiences, and footer. emerald #0A4E47 is the mid-dark tone used as the fill behind images (tiles, image stack, map), date-bar fields, and the avatar backing.

Text. Headings use ink on bone and emerald for section H2s on bone; bone for headings on dark. Muted text splits by surface: muted-on-bone #5C7370 for body/notes on paper, muted-on-ink #9FB8B2 for body/labels on ink and emerald.

Hairlines. Borders are thin and brand-tinted at low alpha — jade hairlines rgba(22,217,163,.18–.32) divide dark sections (coord rail, date bar, tiles, footer rules), emerald hairlines rgba(10,78,71,.3–.4) divide content on bone (interior copy card, notes box, map frame).

Scrim / Overlay. A vertical ink gradient (rgba(14,30,28,.7→.88)) darkens the hero and every bento tile; small tag chips sit on rgba(14,30,28,.78).

Typography

Three Google Fonts families loaded via one css2 @import: Fraunces (optical-size serif, italic axis) for display and italic emphasis; Spline Sans for UI/body; Spline Sans Mono for all wide-tracked uppercase labels. All are open-source and used directly — no substitution needed.

Token	Size	Weight	Line-height	Tracking	Usage
display-hero	clamp(46px,8vw,112px)	600	.94	-.025em	Fraunces hero H1 (word-rise)
display-foot	clamp(56px,15vw,140px)	600	.9	-.03em	Footer wordmark (clip-reveal)
heading-2	clamp(38px,6vw,64px)	600	1	-.02em	Fraunces section H2
heading-3	34–40px	600	1.02–1.05	—	Fraunces tile/copy/panel titles
quote	clamp(30px,3.6vw,50px)	400 italic	1.08	—	Fraunces italic blockquote
body	13–18px	400	1.5–1.7	—	Spline Sans paragraphs/inputs
mono-label	9–12px	500	—	.2–.3em, UPPERCASE	Spline Sans Mono eyebrows, labels, rails
price	24–30px	500	—	.02em	Spline Sans Mono price values

Layout

Base unit is 4px; the spacing scale runs 4 / 6 / 12 / 14 / 18 / 22 / 24 / 30 / 40px with large section padding of 80–120px vertical. Content is centered in a max-width: 1320px wrapper with 40px gutters (22px on mobile). The page is a vertical sequence of full-width chapters: a 100vh hero (min 680px) with a fixed-then-solid nav; an "Interior" stage that overlaps a giant Fraunces numeral (clamp(220px,34vw,440px)) behind a bordered copy card and a three-layer parallax image stack; a "Reservation" section with a flush date bar and a 4-column / 200px-row bento grid (a 2×2 suite tile plus tall and ambient tiles); a 300vh "Experiences" block that pins a sticky 100vh split (image left, swapping text panels right); a neighborhood section with a 5fr/7fr grid pairing field notes against a mouse-spotlight map; and a footer with a dispatch form, 4 link columns, and a giant clip-revealed wordmark. Whitespace is generous and editorial; the signature moves are overlap, layering, and horizontal motion.

Elevation & Depth

Depth is built mostly from layering and hairlines, not soft shadows. The signature is a hard offset shadow on the interior copy card: 14px 14px 0 -2px var(--emerald) — a graphic, print-like drop. Soft shadows appear only on floating images (0 24px 60px rgba(14,30,28,.4)) and on the hovered bento tile (0 26px 60px rgba(0,0,0,.45), 0 0 0 1px var(--coral) — a shadow plus a coral keyline). The nav becomes glassy on scroll (rgba(14,30,28,.92) + backdrop-filter: blur(6px)). The hero is darkened by a multi-stop gradient overlay plus an overlay-blend grain texture; the map uses a radial jade glow under a spotlight mask.

Shapes

Predominantly sharp — most blocks, cards, tiles, image frames and inputs have 0 radius, giving an editorial, framed feel. Full pills (border-radius: 999px) are reserved for interactive controls: the Reserve/Experience CTAs, the interior tier pills (in a pill track), and their container. Circles (50%) appear only on the curator avatar and the map gem dots. The recurring eight-point star is a clip-path polygon used decoratively across the page in jade and coral.

Components

• Nav — fixed, transparent → rgba(14,30,28,.92) + blur on scroll; logo is an emerald square mark with a jade star glyph + Fraunces 24px wordmark; mono nav links in bone that hover to jade.
• Reserve button — coral fill, bone text, 999px pill, mono 11px .2em uppercase, 11×22px; hover lifts translateY(-2px) + brightens.
• Coordinate rail — full-width track on rgba(10,26,24,.55) with jade top/bottom hairlines, mono chips (jade N° numbers + coral stars), auto-scrolling 34s linear.
• Interior copy card — bone fill, emerald hairline border, hard 14px 14px 0 -2px emerald offset shadow, 30px padding, mono tier label in coral + Fraunces H3 in emerald.
• Tier pills — pill track on rgba(10,78,71,.12); inactive emerald mono text, active = coral fill + bone text.
• Date bar — flush row of emerald fields separated by 1px jade gaps, mono labels in jade + Fraunces/mono values in bone; trailing coral Search → field.
• Bento tile — emerald fill, jade hairline, dimmed image (opacity .62) + ink scrim; mono tier label (jade), Fraunces title (bone), coral price; outlined jade Select button; on hover the tile lifts while siblings dim to .55.
• Experience panel/CTA — swapping text panels with jade colhead rules and Fraunces H3; coral pill CTA Reserve Experience →; coral progress ticks.
• Map / gems — emerald map frame, crosshair cursor, radial spotlight reveal; coral gem dots with bone halo open a bordered bone hover card.
• Footer form — transparent input under a 2px jade underline (coral on focus), jade Subscribe → button with ink text.

Motion

Everything is scroll- and intersection-driven via requestAnimationFrame. The shared easing is cubic-bezier(.2,.8,.2,1). Hero words rise from clipped masks (translateY(110%)→0, .9s, staggered 70ms by --i). Section H2s clip-wipe in (clip-path inset 1s); the footer wordmark clip-reveals (1.1s). The reservation heading "winds up" (letter-spacing .3em→-.02em + opacity); bento tiles stagger in (.05–.37s delays). The coordinate rail auto-slides infinitely (34s). The Experiences block is a pinned sticky scroll that cross-fades two text panels and two images at the 50% scroll mark, with a blur-in headline. Interior numeral, image stack, and curator avatar parallax on scroll; the neighborhood map follows the mouse via a radial mask (with a sin/cos pulse fallback on touch). Reduced motion is authored as a reduce flag but is hard-coded to false.

Iconography

No icon library — there are no SVG icon sets or webfont icons. "Icons" are CSS-only: a recurring eight-point star rendered as a clip-path polygon (jade or coral, ~9–14px), the logo's jade star glyph in an emerald square, a rotated-square diamond map anchor, and text arrows (→, ↳, ↻) typed inline.

Do's and Don'ts

• Do keep jade for labels/accents/stars and coral strictly for actions, prices, and the active state.
• Do alternate bone and ink/emerald surfaces and lead each section with a mono "Chapter NN —" eyebrow.
• Do keep blocks sharp (0 radius) and reserve pills for buttons/tier controls and circles for avatars/dots.
• Do set display copy in Fraunces 600 with 400 italic for emphasis, and labels in wide uppercase Spline Sans Mono.
• Don't round the cards, tiles, or image frames, or replace the hard offset shadow with a soft blur.
• Don't introduce a third accent hue or use coral for non-actionable decoration.
• Don't drop the wide tracking from mono labels or set body copy in the mono face.

Known Gaps

• Spacing scale is inferred from observed padding/gap values; there is no formal token scale in the HTML.
• Hairline colors are listed at representative alphas; the source varies jade hairlines .18–.32 and emerald hairlines .3–.4 by context.
• Heading-3 and body rows cover ranges (multiple real sizes) rather than a single value.
• Hero video, grain, and most imagery are remote assets; described by role, not embedded.