name: bagni-del-carmine-design
version: alpha
description: >
  An editorial, archival hospitality site for a restored nineteenth-century
  Milanese bathhouse. The palette is a warm cream paper (`#F2E6CB`) against deep
  emerald (`#0E3B2E`), near-black ink (`#15110C` / `#211A12`), brass (`#C68B36`),
  oxblood (`#7A1E22`) and verdigris (`#2E7D6B`). The type story pairs a Marcellus
  serif display (uppercase, wide tracking) with a Cormorant italic accent for
  pull-quotes and a JetBrains Mono for prices, coordinates and folio refs. The
  signature moves are scroll-pinned set pieces: a cream→emerald theme inversion,
  a cursor-tracked room preview, a hover-expand bento grid, an SVG-path-draw
  before/after restoration wipe, and a pinned reservation folio swap. Geometry is
  strictly square — zero border radius — with hairline rules, dashed brass
  dividers and a recurring engraved sun emblem.
colors:
  # Surface
  ink: '#15110C'        # darkest surface — nav, hero, footer, stat-wall, bento tile fill
  emerald: '#0E3B2E'    # deep green surface — experiences section, image placeholders, inverted building bg
  cream: '#F2E6CB'      # primary page background and light text on dark surfaces
  oxblood: '#7A1E22'    # reservations left ledger panel + salon tile fill, room-number label
  # Text
  text-ink: '#211A12'   # default body + heading text on cream
  # Brand / Accent
  brass: '#C68B36'      # primary accent — eyebrows, key hero word, buttons, dividers, prices, rules
  verdigris: '#2E7D6B'  # secondary accent — area chips, checkbox, preview placeholder
  # Hairlines / tints
  hairline-ink: 'rgba(33,26,18,.2)'      # list dividers, form-footer rule
  hairline-brass: 'rgba(198,139,54,.25)' # stat-wall grid border
  reservation-tag: 'rgba(46,125,107,.5)' # bento reservation tag border (text #6EC8B0)
  # Scrim / Gradient
  hero-scrim: 'rgba(21,17,12,.56→.00)'   # layered directional + vignette scrim over hero video
typography:
  display:
    fontFamily: "'Marcellus', serif"
    fontSize: clamp(40px, 6.4vw, 82px)
    fontWeight: 400
    lineHeight: 0.94
    letterSpacing: 0.03em
    textTransform: uppercase
  eyebrow:
    fontFamily: "'Marcellus', serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.35em
    textTransform: uppercase
  accent-italic:
    fontFamily: "'Cormorant', serif"
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.5
  body:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 13px
    fontWeight: 400
    letterSpacing: 0.15em
rounded:                 # radius scale — the system is entirely square
  none: 0px
spacing:                 # base unit 4px; section gutter 64px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px
components:
  nav:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '0 48px'    # fixed bar, 56px tall
  buttonBrass:
    backgroundColor: '{colors.brass}'
    textColor: '{colors.ink}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '14px 28px' # hover → fills cream
  buttonOutline:
    backgroundColor: 'transparent'
    border: '2px solid rgba(242,230,203,.5)'
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '12px 28px'
  chipVerdigris:
    backgroundColor: 'transparent'
    border: '1px solid {colors.verdigris}'
    textColor: '{colors.verdigris}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '3px 8px'
  currencyToggle:
    backgroundColor: 'rgba(33,26,18,.08)'
    textColor: '{colors.text-ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '3px'       # active pill: ink bg, cream text
  bentoTile:
    backgroundColor: '{colors.ink}'
    border: '1px solid rgba(198,139,54,.3)'
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    padding: '24px'      # hover → scale 1.04 + shadow
  inputLine:
    backgroundColor: 'transparent'
    border: '0 0 2px 0 solid {colors.text-ink}'  # bottom rule only; focus → brass
    textColor: '{colors.text-ink}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '8px 2px'
  reservationTag:
    backgroundColor: 'rgba(46,125,107,.2)'
    border: '1px solid {colors.reservation-tag}'
    textColor: '#6EC8B0'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '4px 10px'
motion:
  ease-out: 'cubic-bezier(.16,1,.3,1) — the single shared easing'
  hero-rise: 'staggered translateY(28px)+fade entrance, .7–.9s, delays .15→1.05s'
  theme-inversion: 'building section bg cream→emerald & text ink→cream via JS hex lerp on scroll (#26)'
  parallax: 'building image translateY -0.18×scroll; hero video scale→1.15; hammam img -0.12×'
  clip-reveal: 'building H2 line-inner clip-path inset 100%→0 over .9s; plate captions left-wipe'
  cursor-preview: 'fixed 260×340 image follows pointer, clip-path circle(0→50%) (#24)'
  bento-hover: 'hovered tile scale 1.04 + 0 20px 60px shadow; siblings dim .55 & scale .985 (#28)'
  svg-path-draw: 'restoration route stroke-dashoffset len→0 driven by pin scroll (#31)'
  before-after: 'after-image clip-path inset right 100%→0 with draggable-look brass divider line'
  folio-swap: 'reservations left panel swaps 3 folios by scroll third; sun rotates 0→120deg (#22)'
  count-up: 'stat-wall numbers ease-out cubic count to target over 1400ms on intersection'
icons:
  library: inline SVG
  style: engraved line / filled emblem (custom sun-burst), schematic floorplan rects
  stroke: 1–1.5px
  sizes: { sm: 40px, md: 120px }
  color: '{colors.brass}'

Bagni del Carmine

bagni-del-carmine-design · alpha

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

Overview

Bagni del Carmine is an editorial, archival hospitality landing page for a restored 1891 Milanese municipal bathhouse. The whole page is set on warm cream paper (--cream #F2E6CB) and reads like a printed folio: roman-numeral section markers ("— II — The Building"), figure captions ("Fig. 1"), plate references ("Pl. 07"), and a wordmark dotted as Bagni · Del · Carmine. Against the cream, deep emerald (--emerald #0E3B2E) and near-black ink (--ink #15110C, --text-ink #211A12) carry the dark surfaces, while brass (--brass #C68B36) is the single voltage — every eyebrow, divider, price, rule and the key hero word ("Carmine") glows brass. Oxblood (--oxblood #7A1E22) and verdigris (--verdigris #2E7D6B) are supporting jewels (the reservations ledger, the salon tile, area chips). The type story is three-handed: Marcellus serif for all display and labels (uppercase, very wide .18–.4em tracking), Cormorant italic 600 for warm pull-quotes and descriptions, and JetBrains Mono for prices, coordinates and folio tabs. Geometry is uncompromisingly square — border-radius is 0 everywhere — held together by hairline rules and dashed-brass dividers (repeating-linear-gradient). The page is a chain of scroll-pinned set pieces: a cream→emerald theme inversion, a cursor-tracked floating room preview, a hover-expand bento grid, an SVG-path-draw before/after restoration wipe, and a pinned reservation folio-swap — all driven by a single dependency-free rAF scroll engine on cubic-bezier(.16,1,.3,1).

Colors

Surface. --ink #15110C is the darkest fill (nav, hero base, footer, stat-wall, default bento tile). --emerald #0E3B2E is the deep-green surface for the Experiences section, all image placeholders (background:var(--emerald)), and the end-state of the Building theme inversion. --cream #F2E6CB is the page background and the light text color on every dark surface. --oxblood #7A1E22 fills the Reservations left ledger panel and the type-only Salon bento tile. Text. --text-ink #211A12 is the default heading + body color on cream. Accent. --brass #C68B36 is the lone brand voltage: eyebrows, dividers, the .h1-key hero word, .btn-brass, prices, stat values, the footer rule and sun. --verdigris #2E7D6B is the secondary accent — area chips (.chip-verdigris), the form checkbox accent-color, and the room-preview placeholder. Hairlines / tints. List dividers and the form footer use rgba(33,26,18,.2); the stat-wall grid uses rgba(198,139,54,.25); the bento reservation tag is rgba(46,125,107,.2) fill / rgba(46,125,107,.5) border with #6EC8B0 text. Scrim. The hero stacks three gradients of rgba(21,17,12,…) — a flat .12 tint, a 105° directional scrim (.56→.00) anchored to the text column, and a top/bottom vignette.

Typography

Families load from Google Fonts: Marcellus (display/labels), Cormorant italic 600 (accent), Manrope 400/500/600 (body), JetBrains Mono 400/700 (numeric). All are open-source, so no substitution is needed. Marcellus is used exclusively uppercase with wide tracking; Cormorant is always italic 600; mono uses font-variant-numeric: tabular-nums.

Token	Size	Weight	Line-height	Tracking	Usage
display (.f-display)	clamp(40px,6.4vw,82px)	400	.94	.03em (labels .18–.4em)	Hero H1, section H2s, wordmark, eyebrows, buttons, labels — all uppercase
eyebrow	11px	400	—	.35em	Roman-numeral section markers, chip/label text, button text
accent-italic (.f-accent-italic)	15–22px	600	1.5	—	Hero subhead, room descriptions, pull-quote, opening notes
body (.f-body / Manrope)	17px (16px prose)	400	1.65	—	Body copy, form inputs, plate caption text
mono (.f-mono)	10–44px	400/700	varies	.1–.25em	Prices, coordinates, folio tabs, stat values, fine print

Layout

Base unit 4px; the recurring section gutter is 64px (24px on mobile). The page is a full-bleed vertical scroll of distinct sections, each ~100vh or taller: fixed 56px nav → 100vh hero (video bg, left text column max-width 720px) → Building (260vh outer, sticky 100vh inner, 5fr/7fr two-column) → Rooms (full-bleed list, 1fr/auto rows) → Experiences (emerald, 7fr/5fr bento grid 680px tall) → Restoration (300vh outer, sticky inner, 1fr/1fr/1fr canvas) + stat-wall (2×2 grid) → Reservations (300vh outer, sticky 5fr/7fr inner) → footer. Signature structural moves: scroll-pinned sticky sections with a tall outer "scroll budget", a two-column inverting Building spread, a bento grid where one tile spans two rows, and a split ledger/form reservation. Whitespace is generous and editorial, framed by hairline top-borders between sections (border-top: 2px solid var(--text-ink)).

Elevation & Depth

The system is overwhelmingly flat — depth comes from hairlines and layered scrims, not shadows. The only real box-shadow is on a hovered bento tile: 0 20px 60px rgba(0,0,0,.4). The hero H1 carries a text-shadow (0 1px 2px / 0 8px 40px rgba(21,17,12,…)) for legibility over video. Borders do the structural work: 1–2px solid ink/brass rules, the dashed-brass repeating-linear-gradient dividers, and 1px grid cell borders in the stat-wall. Depth between sections is created by position: sticky pins and z-index layering rather than elevation.

Shapes

Strictly rectilinear. border-radius is 0 on every element — buttons, tiles, chips, inputs, toggles. The visual rhythm instead comes from sharp rectangular plates, hairline rules, and dashed dividers. The only curves in the entire design are the inline SVG emblems: the eight-point engraved sun (reservations + footer), the floorplan circles, and the restoration route path — all decorative.

Components

• Nav — fixed bar, --ink fill, --cream text, 56px tall, 0 48px padding; Marcellus 11px eyebrow links with .24em tracking, hover → brass; "Reserve" link is permanently brass (.accent).
• Button (brass) — --brass fill, --ink text, Marcellus 11px .18em uppercase, 14px 28px, square; hover fills --cream.
• Button (outline) — transparent, 2px solid rgba(242,230,203,.5), cream text, 12px 28px; hover → solid cream border + faint cream wash.
• Chip (verdigris) — 1px solid var(--verdigris), verdigris text, Marcellus 10px .15em, 3px 8px, square (used for the area m² chips).
• Currency toggle — rgba(33,26,18,.08) track, 3px padding; active button flips to --text-ink fill + cream text; mono 11px labels (EUR/USD/GBP).
• Bento tile — --ink fill, 1px solid rgba(198,139,54,.3), square; on hover scales 1.04 with 0 20px 60px shadow while siblings dim to .55 and scale .985. Each tile carries a mono "Sala N" tag, a brass eyebrow, a Marcellus title, a Cormorant description, a brass mono price and a "Book Session →" link.
• Input (line) — transparent with a 2px solid var(--text-ink) bottom border only; Manrope 16px; focus turns the underline --brass.
• Reservation tag — rgba(46,125,107,.2) fill, .5 verdigris border, #6EC8B0 text, Marcellus 10px ("Advance Reservation Required").
• Floorplan SVG — schematic per-room plan: ink rects/lines 1.5px + a brass circle and opacity:.3 brass fill block.
• Stat-wall cell — bordered grid cell (rgba(198,139,54,.15)), centered; mono stat value (brass or oxblood) + Marcellus uppercase label.

Motion

A single shared easing --ease-out: cubic-bezier(.16,1,.3,1). The hero plays a staggered rise: ornament, per-word H1, divider, subhead, CTAs and bottom strip fade + translateY(28px) up on setTimeout delays from .15s to 1.05s (@keyframes hero-rise). The scroll engine is dependency-free, rAF-throttled, and drives four pinned effects: (1) theme inversion — the Building inner bg lerps cream→emerald and text ink→cream via JS hex interpolation across the pin (#26); (2) before/after + SVG draw — the restoration route path animates stroke-dashoffset len→0 while the after-image clip-path wipes right and plate captions reveal in thirds (#31); (3) folio swap — the reservations ledger swaps three folio panels by scroll-third and the sun SVG rotates 0→120° (#22); plus parallax on the hero video (scale→1.15), building image (−0.18×) and hammam image (−0.12×). IntersectionObserver triggers: rooms H2 skew-settle, experiences H2 blur→sharp, staggered bento tile rise (80ms apart), stat-wall cubic count-ups (1400ms), and the footer rule/wordmark reveal. Hover effects: the cursor-tracked room preview (clip-path: circle(0→50%), follows pointer) and the bento expand.

Iconography

No icon font — all icons are inline SVG. The hallmark is a custom eight-point engraved sun-burst emblem (filled center circle + triangular rays + outline ring) appearing large (120px) in the Reservations ledger and small (40px) in the footer; it rotates with scroll in the reservations pin. Other SVG: schematic room floorplans (ink rects 1.5px + brass circle + faint brass fill) and the restoration route path (brass .8 stroke, dash-draw). Typographic ornaments (✦, dotted middots) stand in for decorative glyphs. Stroke weights are 1–1.5px; the emblem and route are brass, floorplan structure is ink.

Do's and Don'ts

• Do keep everything square — border-radius: 0 is a defining trait.
• Do reserve brass as the only accent voltage; let oxblood and verdigris stay rare supporting jewels.
• Do set all display/label text in uppercase Marcellus with wide tracking, and all prices/coordinates/refs in JetBrains Mono.
• Do use Cormorant italic 600 for any warm, descriptive or quoted prose.
• Do build depth from hairlines, dashed-brass dividers and scrims, not shadows.
• Do lean into the archival folio voice (roman numerals, "Fig.", "Pl.", dotted wordmark, MDCCC dates).
• Don't round corners, add drop shadows (beyond the one bento hover), or use gradients except the hero scrim.
• Don't introduce a second sans for display or set Marcellus lowercase.
• Don't let the cream surface go cold/white — it must read as warm paper.
• Don't add new accent hues; the five-color jewel palette is the system.

Known Gaps

• Several effect values are computed at runtime in JS rather than declared in CSS: the Building bg/text colors are interpolated between #F2E6CB/#0E3B2E and #211A12/#F2E6CB; parallax offsets (−0.18×, −0.12×, video scale cap 1.15), the folio scroll thresholds (.33/.66) and sun rotation (×120°) are described from the script, not from static styles.
• The hero scrim is a three-layer stacked gradient of rgba(21,17,12,…); the single hero-scrim token approximates the dominant directional layer's range.
• Mono and accent-italic sizes vary by context (10–44px / 15–22px); the token records a representative value with the range noted in the table.
• The page ships static-fallback CSS that forces scroll-triggered states visible by default; the documented motion reflects the JS-enabled experience.