name: solene-design
version: alpha
description: >
  An editorial parfumerie landing page on a warm cream paper surface (#F4EBD9)
  with near-black ink (#0B0710) type. The signature move is a 12-frame
  scroll-scrubbed flacon sequence (one "solar hour" per viewport) paired with a
  chartreuse-to-plum spectrum vocabulary that runs through wavelength bars,
  per-season tinted sticky panels, a cursor-spotlight birthdate chart, and an
  animated footer chord. Type is a tri-voice system: italic Bodoni Moda display
  serif, uppercase letterspaced JetBrains Mono labels, and Manrope body. Geometry
  is sharp — zero border-radius everywhere except the circular brand mark and dots
  — with depth carried by 1px ink hairlines and tinted backgrounds rather than
  shadows.
colors:
  # Surface
  cream: '#F4EBD9'      # primary page paper; nav/hero/section backgrounds
  cream-2: '#f4e6cf'    # capsule panel 2 (Soleil d'Or) tinted surface
  cream-3: '#ecd7c2'    # capsule panel 3 (Vendange) tinted surface
  ink: '#0B0710'        # near-black; primary text, hairlines, inverted surfaces
  # Brand / Accent (the spectrum)
  chartreuse: '#DAFF3F' # primary CTA fill, form underline accent, footer rule
  orange: '#FF5B1F'     # signal accent; accent words, hover fills, submit buttons, focus ring
  plum: '#3A0F4C'       # secondary accent; eyebrows, kickers, deep spectrum end
  rose: '#E8B8C9'       # soft accent; footer tagline, spectrum mid-tone
  # Text
  muted: '#5B4A4E'      # muted body/labels on cream
  muted-inv: '#a89aa0'  # muted text on inverted (ink) astro surface
  # Spectrum stops (12-stem birthdate chart + footer chord)
  spec-2: '#B7F3BC'     # green-mint
  spec-3: '#80E0C8'     # teal
  spec-4: '#FFD15B'     # gold
  spec-5: '#FF8A3D'     # amber
  spec-7: '#E84668'     # rose-red
  spec-9: '#B23A6B'     # magenta
  spec-10: '#7E2A6A'    # violet
  spec-11: '#1E0B33'    # deep indigo
  # Hairlines (alpha)
  hairline-ink: 'rgba(11,7,16,.22)'      # note-sheet row dividers on cream
  hairline-cream: 'rgba(244,235,217,.16)' # footer dividers on ink
typography:
  display:
    fontFamily: "'Bodoni Moda', 'Times New Roman', serif"
    fontSize: clamp(44px, 6.4vw, 100px)
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.015em
    fontStyle: italic
  display-bold:
    fontFamily: "'Bodoni Moda', 'Times New Roman', serif"
    fontSize: clamp(56px, 8.4vw, 140px)
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.025em
  vine-headline:
    fontFamily: "'Bodoni Moda', 'Times New Roman', serif"
    fontSize: clamp(80px, 16vw, 260px)
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: -0.035em
    textTransform: uppercase
  serif-detail:
    fontFamily: "'Bodoni Moda', 'Times New Roman', serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.45
    fontStyle: italic
  label:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 0.32em
    textTransform: uppercase
  label-sm:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontSize: 9.5px
    fontWeight: 500
    letterSpacing: 0.22em
    textTransform: uppercase
  body:
    fontFamily: "'Manrope', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-lg:
    fontFamily: "'Manrope', system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.5
rounded:                # sharp system: everything square except circles
  none: 0px
  full: 9999px          # brand mark, spectrum bar dot
spacing:                # base unit 2px; common steps below
  xxs: 2px
  xs: 6px
  sm: 8px
  md: 14px
  lg: 18px
  xl: 24px
  '2xl': 36px
  '3xl': 56px
  '4xl': 80px
components:
  nav:
    backgroundColor: 'linear-gradient(to bottom, rgba(244,235,217,.92), rgba(244,235,217,0))'
    textColor: '{colors.ink}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.none}'
    padding: '18px 36px'
    note: 'fixed; backdrop-filter blur(6px); links underline-on-hover in orange'
  nav-cta:
    backgroundColor: '{colors.chartreuse}'
    textColor: '{colors.ink}'
    typography: '{typography.label-sm}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '10px 16px'
    note: 'hover -> orange fill, cream text'
  btn-primary:
    backgroundColor: '{colors.chartreuse}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '14px 22px'
    note: 'hover -> orange fill, cream text'
  btn-ghost:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '14px 22px'
    note: 'hover -> ink fill, cream text'
  accent-chip:
    backgroundColor: '{colors.chartreuse}'
    textColor: '{colors.ink}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.none}'
    padding: '5px 10px'
    note: 'fill is per-panel (chartreuse / orange / plum)'
  dossier-link:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.label-sm}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '12px 18px'
    note: 'hover fill = per-season accent'
  note-row:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.serif-detail}'
    border: '1px solid {colors.hairline-ink} (top only)'
    rounded: '{rounded.none}'
    padding: '14px 0 0'
    note: '96px mono label column + italic serif body; origin tag in label-sm muted'
  form-field:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.serif-detail}'
    border: '2px solid {colors.chartreuse} (bottom only)'
    rounded: '{rounded.none}'
    padding: '8px 0 10px'
    note: 'italic serif input value; focus -> bottom border orange; label is label-sm muted'
  submit:
    backgroundColor: '{colors.orange}'
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '16px 32px'
    note: 'hover -> plum fill'
  brand-mark:
    backgroundColor: 'transparent'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.full}'
    note: 'double concentric ring (inner ::before at .4 opacity) + orange center dot'
motion:
  hero-scrub: '12-frame opacity crossfade (transition opacity .12s linear); scroll position drives active frame, clock (Roman numeral) and FRAME nn/12 readout over 1300vh'
  headline-reveal: 'word-by-word slide-up: translateY(110%) skewY(8deg) -> 0, transition 1s cubic-bezier(.2,.8,.2,1), staggered 50–450ms'
  capsule-lock: 'sticky-stacked panels; on lock the name slides up (.9s) and note rows fade-up staggered .4–.6s'
  vine-word-fill: 'scroll progress lights each headline word with an animated gradient text-fill (background-clip:text), with matching card fade-in'
  astro-spotlight: 'cursor radial-gradient mask (220px) reveals the colored spectrum chart; touch fallback animates an orbiting pulse'
  astro-invert: 'on submit, surface inverts cream->ink over .6s and the verdict cross-fades in'
  footer-chord: '12 colored bars scaleY(0)->1 from top, staggered 0–660ms on scroll into view'
  parallax: 'gentle photo parallax translate3d (cy * -0.12) with scale(1.08)'
  easing: 'cubic-bezier(.2,.8,.2,1) (--ease) used throughout'
icons:
  library: inline glyphs / unicode (no icon font)
  style: 'typographic arrows and marks (↗ ↓ → ↻ ✦) plus Roman numerals'
  color: '{colors.ink}'
  note: 'no SVG icon set; CSS-drawn select chevrons and the concentric brand mark stand in for iconography'

Solène & Hours

solene-design · alpha

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

Overview

Solène & Hours is an editorial parfumerie page that treats the page as warm printed paper: a cream surface (#F4EBD9) under near-black ink (#0B0710), with a four-color spectrum — chartreuse #DAFF3F, signal orange #FF5B1F, plum #3A0F4C, rose #E8B8C9 — used as a controlled accent vocabulary. The signature move is the hero: a 12-frame scroll-scrubbed flacon image sequence stretched over 1300vh so each viewport of scroll advances exactly one "solar hour," synchronized with a Roman-numeral clock, a FRAME nn / 12 readout, and a vertical chartreuse-to-plum wavelength bar whose dot tracks scroll. Below it, four sticky stacked capsule panels each carry a seasonal chromatic chord (cream, warm cream #f4e6cf, #ecd7c2, then a full ink inversion). The type story is tri-voice: italic Bodoni Moda for display and detail, uppercase letterspaced JetBrains Mono for every label/eyebrow, and Manrope for body copy. Geometry is deliberately sharp — border-radius:0 on every box, with circles reserved only for the concentric brand mark and the bar dot. Depth comes from 1px ink hairlines and tinted backgrounds, never drop shadows.

Colors

Surface. cream #F4EBD9 is the dominant paper, set on html,body and most sections. Two warmer paper tints stage the capsule panels: #f4e6cf (panel 2) and #ecd7c2 (panel 3). ink #0B0710 is the near-black used for text, hairlines, the footer, and the inverted capsule panel 4 / astro surface.

Brand / spectrum. Four accents carry the "scent spectrum": chartreuse #DAFF3F (primary CTA fills, the nav CTA, form underline, footer rule), orange #FF5B1F (signal accent — accent words, all hover fills, submit buttons, the :focus-visible ring), plum #3A0F4C (eyebrows, kickers, brand tagline, the deep end of every spectrum), and rose #E8B8C9 (footer tagline, spectrum mid-tone). A full 12-stop gradient (#DAFF3F → #B7F3BC → #80E0C8 → #FFD15B → #FF8A3D → #FF5B1F → #E84668 → #B23A6B → #7E2A6A → #3A0F4C → #1E0B33 → #0B0710) colors the birthdate chart stems and the footer chord bars.

Text. ink for headings/body on cream; muted #5B4A4E for secondary labels and lede copy; #a89aa0 for muted text on the inverted astro surface.

Hairlines. rgba(11,7,16,.22) divides note-sheet rows on cream; rgba(244,235,217,.16) divides footer blocks on ink.

Typography

Three Google Fonts loaded via one stylesheet link: Bodoni Moda (optical-size serif, weights 400/700/900 + italics), JetBrains Mono (400/500/700), and Manrope (400/500/600/700). Bodoni Moda is the display and detail face, almost always italic for hero/section names and serif detail rows, but switched to weight 900 roman for the big editorial section headers (Capsules intro, Vine, Booking). JetBrains Mono is the label voice — always uppercase with wide tracking (.14em–.32em) at small sizes (9.5–11px). Manrope handles body and lede copy. All faces are mainstream open-source, so no substitutes are needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(44–100px)	400 italic	0.92	-0.015em	Hero H1, capsule names, panel names
display-bold	clamp(56–140px)	900	0.9	-0.025em	Capsule intro / booking section headers
vine-headline	clamp(80–260px)	900	0.92	-0.035em	TÊTE CŒUR FOND mask-fill words (uppercase)
serif-detail	18px	400 italic	1.45	—	Note-sheet bodies, ledes, form input values
label	11px	500	—	0.32em	Eyebrows, kickers, button text (uppercase)
label-sm	9.5px	500	—	0.22em	Origin tags, row labels, fine print (uppercase)
body	16px	400	1.55	—	Hero sub, footer copy, body paragraphs
body-lg	19px	400	1.5	—	Intro/lede paragraphs

Layout

Base unit reads as ~2px (values cluster on 2/6/8/14/18/24/36/56/80). The page is a sequence of full-viewport scroll-driven acts rather than a conventional flow: a fixed blur-gradient nav; a 1300vh hero with a sticky 100vh stage holding an off-center flacon image well (min(48vw,880px) wide, anchored right), bottom-left headline block, upper-right clock meta, and a right-gutter wavelength bar; a 400vh capsule act of four sticky-stacked two-column panels (text left, parallax photo right); a 300vh vine act with one giant flex-wrapped headline and a 3-column card row; a 250vh astro act with a centered form panel over a cursor-revealed 12-bar chart; a two-column booking section (min-height:90vh, plum photo column

• form column); and an ink footer (max-width:1320px inner) topped by a 12-bar animated chord. Whitespace is generous and editorial, with 8vw/6vw/4vw section gutters and large clamp-scaled headlines.

Elevation & Depth

Flat by design — there are no box-shadow drop shadows anywhere. Depth is built from: (1) 1px ink hairlines — the 1px solid var(--ink) borders on buttons, chips, the image well frame, and note-row top borders; (2) tinted background layering — capsule panels step through warmer creams and an ink inversion to imply z-order; (3) glass blur — the nav and the booking photo chip use backdrop-filter:blur() over a translucent fill; (4) gradient overlays — hero frame top/bottom scrims and a chartreuse mix-blend-mode:multiply wash over the booking photo. The :focus-visible state is a 2px orange outline at 3px offset.

Shapes

Aggressively rectangular. border-radius:0 (implicit) on every button, chip, input, panel, and image frame — even form fields keep square corners (border-radius:0 is set explicitly to override UA styles). The only curves in the system are perfect circles: the concentric border-radius:50% brand mark (outer ring + inner ring + orange center dot) and the border-radius:50% wavelength-bar dot. The aesthetic is precise, print-block geometry; nothing is softened.

Components

• Nav — fixed top bar, translucent cream gradient + 6px blur, 18px 36px padding; mono links (uppercase, .22em) underline-on-hover in orange.
• Nav CTA ("Atelier ↗") — chartreuse fill, 1px ink border, square; hover → orange fill / cream text.
• Primary button ("Turn the Wheel ↓") — chartreuse fill, 1px ink border, 14px 22px, mono label; hover → orange / cream.
• Ghost button ("Book Atelier ↗") — transparent, 1px ink border; hover → ink fill / cream text.
• Accent chip ("№ I · Vernal Equinox") — small mono pill (square), fill keyed to the panel's season (chartreuse / orange / plum).
• Dossier link ("Read the dossier →") — outlined mono link with per-season hover fill.
• Note row — 96px mono label column + italic Bodoni body, separated by a rgba(11,7,16,.22) top hairline; origin tags in muted label-sm.
• Form field — borderless input with a 2px chartreuse bottom rule, italic Bodoni value text; focus turns the rule orange. Selects use CSS-drawn orange chevrons.
• Submit ("Book a Bespoke Consultation →") — orange fill, cream text, 1px ink border; hover → plum.
• Brand mark — 34px concentric circle (ink ring + faint inner ring + orange center dot).
• Footer chord — row of 12 full-height bars stepping across the spectrum.

Motion

A single rAF scroll loop drives the page. Hero scrub: scroll over 1300vh crossfades 12 flacon frames (opacity .12s linear), updating the Roman clock, FRAME nn/12 readout, and bar-dot position. Headline reveal: words slide up from translateY(110%) skewY(8deg) over 1s, staggered 50–450ms (sub/CTAs fade up with .8s/1.1s delays). Capsule lock: sticky-stacked panels add is-locked when pinned, sliding the name up (.9s) and fading note rows in staggered .4–.6s. Vine fill: scroll progress lights each headline word with an animated gradient text-fill plus a matching card fade-in. Astro: a 220px radial mask follows the cursor to reveal the colored chart (touch devices get an orbiting pulse); submit inverts the surface cream→ink over .6s and cross-fades the verdict in. Footer chord: 12 bars scaleY(0)→1 from the top, staggered 0–660ms on scroll into view. Photos get a gentle parallax (translate3d + scale(1.08)). All easing is cubic-bezier(.2,.8,.2,1). A prefers-reduced-motion block is present (header comment) but empty.

Iconography

No icon font or SVG set. Iconography is typographic: unicode arrows and marks (↗ ↓ → ↻ ✦) inside button labels, Roman numerals (I–XII) as the hero clock and chart axis, and CSS-drawn forms — the concentric circle brand mark and gradient-built select chevrons. Color follows context: ink on cream, cream on ink, orange for emphasis marks.

Do's and Don'ts

• Do keep the cream paper surface and near-black ink as the base; let the four spectrum colors stay accents, not fields.
• Do set every label/eyebrow in uppercase JetBrains Mono with wide tracking, and reserve italic Bodoni for names and detail copy.
• Do keep all corners square; the only circles are the brand mark and bar dots.
• Do carry depth with 1px ink hairlines and tinted backgrounds.
• Don't add drop shadows or rounded cards — the system is flat and print-blocky.
• Don't introduce a new accent hue; stay within the chartreuse→plum spectrum and its 12 interpolated stops.
• Don't mix the three type roles (no mono body, no sans display headlines).

Known Gaps

• Exact spacing scale is inferred from the clustered pixel values in the markup (no formal token scale exists in the source); the spacing tokens are a reasonable reconstruction, not authored variables.
• Hero, capsule, and chart imagery are remote CDN/Unsplash/Pexels URLs, not part of the design tokens.
• The prefers-reduced-motion section is declared but empty, so reduced-motion behavior is unspecified.
• Per-panel capsule tints #f4e6cf / #ecd7c2 are read directly from inline class rules; they have no named CSS variable in the source.