name: restage-design
version: alpha
description: >
  Restage is an editorial, magazine-page home-staging site set on a warm cream
  paper surface, built from saturated heritage blocks — deep emerald, ochre,
  plum and blush — separated by hard plum hairlines. The signature moves are
  ticking-stripe and honeycomb section backgrounds, an arched before/after image
  slider, a tilted "pinboard" of taped-and-paperclipped photos, and a
  horizontal rail of scalloped ticket-stub cards. Type is a three-voice system:
  a high-contrast Fraunces serif (often italic) for display, Hanken Grotesk for
  body, and uppercase Space Mono for every label and version stamp (V.01–V.05).
  Geometry is overwhelmingly square — 2–6px borders, zero radius — with the
  arch and pill-shaped paperclip as the only curves.
colors:
  # Brand / heritage palette
  emerald: '#1E4A3C'   # primary surface + body text + heading ink on light
  ochre: '#D2954A'     # primary accent / CTA fill / divider / brand dot
  plum: '#4A2740'      # secondary accent + all section hairlines
  blush: '#E7B9B1'     # tertiary accent / hero stripe field / muted text on dark
  # Surface
  cream: '#F4ECE2'     # page background + paper-frame borders + text on dark
  # Hairlines (use the palette directly)
  hairline: '#4A2740'  # 2px section borders (= plum)
  # Pattern overlays (rgba, baked into backgrounds)
  stripe-light: 'rgba(244,236,226,0.55)' # blush ticking stripe (cream ink)
  stripe-faint: 'rgba(244,236,226,0.10)' # emerald ticking stripe
  stripe-ochre: 'rgba(210,149,74,0.18)'  # plum ticking stripe (ochre ink)
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(48px, 9vw, 160px)
    fontWeight: 300
    lineHeight: 0.85
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(48px, 9vw, 160px)
    fontWeight: 900
    lineHeight: 0.8
    fontStyle: italic
  heading:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(36px, 6vw, 72px)
    fontWeight: 300
    lineHeight: 0.9
  body:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 1.5px
    textTransform: uppercase
  stat:
    fontFamily: "'Space Mono', monospace"
    fontSize: clamp(48px, 6vw, 60px)
    fontWeight: 700
    lineHeight: 1
rounded:                  # near-zero by design; curves are bespoke shapes
  none: 0px
  arch: 50% 50% 0 0 / 38% 38% 0 0   # arched image frame
  pill: 30px                         # paperclip only
spacing:                  # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 56px
  '3xl': 80px
components:
  navLink:
    textColor: '{colors.plum}'
    typography: '{typography.label}'
    hoverColor: '{colors.ochre}'
  buttonPrimary:
    backgroundColor: '{colors.ochre}'
    textColor: '{colors.emerald}'
    border: '2px solid {colors.emerald}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '12px 20px'
    # hover inverts to emerald fill / cream text
  buttonSolid:
    backgroundColor: '{colors.emerald}'
    textColor: '{colors.cream}'
    border: '2px solid {colors.emerald}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '16px 24px'
  buttonOutline:
    backgroundColor: 'transparent'
    textColor: '{colors.plum}'
    border: '2px solid {colors.plum}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '20px 24px'
    # hover fills plum / cream text
  statRow:
    backgroundColor: '{colors.emerald}'   # alternates with ochre
    textColor: '{colors.cream}'
    border: '2px solid {colors.plum}'
    typography: '{typography.stat}'
    rounded: '{rounded.none}'
    padding: '28px'
  photoCard:
    backgroundColor: '{colors.cream}'
    border: '6px solid {colors.cream}'
    rounded: '{rounded.none}'
    # paper-bordered, rotated, drop-shadowed; clip + tape label attached
  ticketCard:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.emerald}'
    rounded: '{rounded.none}'
    padding: '20px'
    # scalloped left/right edges via CSS mask; fixed 280px width
  tapeLabel:
    backgroundColor: '{colors.cream}'   # also ochre variant
    textColor: '{colors.plum}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '4px 12px'
    # rotated, with a soft drop shadow ("tape" look)
  archFrame:
    border: '6px solid {colors.emerald}'
    rounded: '{rounded.arch}'
    shadow: '0 28px 60px rgba(30,74,60,0.4)'
motion:
  ba-slider: 'JS pointer-drag before/after reveal; clip-path inset updated live, no easing'
  hover: 'transition-colors on buttons + links (Tailwind default ~150ms)'
  pulse: 'animate-pulse on the "Drag to reveal" prompt and pin hints'
  divider-glow: 'static ochre glow box-shadow 0 0 22px 3px rgba(210,149,74,.5) on slider divider'
icons:
  library: Tabler icons-webfont (linked, not visibly used)
  style: outline
  color: '{colors.plum}'
  note: 'No icons rendered in markup; arrows are text glyphs (→ ‹ ›) in Space Mono'

Restage

restage-design · alpha

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

Overview

Restage is an editorial home-staging site built like a printed lookbook. The page sits on a warm cream paper field (#F4ECE2) and is carved into full-bleed colour blocks in a heritage palette — deep emerald (#1E4A3C), ochre (#D2954A), plum (#4A2740) and blush (#E7B9B1) — every block divided from the next by a hard 2px plum hairline. The surfaces themselves are patterned: "ticking" repeating-linear-gradient pinstripes in blush, emerald and plum, plus a honeycomb radial-gradient grid behind the gallery. The signature interactions are an arched before/after image slider with an ochre diamond handle, a tilted "pinboard" of photos held by drawn paperclips and taped mono labels, and a horizontal rail of scalloped ticket-stub product cards. Typography is a deliberate three-voice system: Fraunces serif (light weight for headings, heavy italic for the giant hero word "story") for display, Hanken Grotesk for running text, and uppercase Space Mono for every micro-label and the running V.01–V.05 "Spatial Revision" version stamps. The geometry is almost entirely square — thick borders, zero corner radius — so the lone arch and the pill-shaped paperclips read as intentional curves.

Colors

Brand / heritage. Four saturated tones drive the page, all declared as :root CSS variables. --emerald #1E4A3C is the workhorse: the body-text ink on cream, the heading ink, the dark section fills, and the dominant border colour. --ochre #D2954A is the primary accent — the brand dot after "RESTAGE", CTA button fills, the slider divider/handle, the underline rule, and label accents. --plum #4A2740 is the secondary accent and, crucially, the colour of nearly every section hairline (border-b-2) plus stat-row borders and mono labels. --blush #E7B9B1 is the tertiary tone: the hero/CTA ticking-stripe field, and muted text on dark sections.

Surface. --cream #F4ECE2 is the page background, the thick photo-frame borders on the pinboard, the ticket-card fill, and the text colour on every dark block.

Hairlines. Section dividers are 2px solid plum (border-[var(--plum)]); one section (the rail) divides with an ochre border instead, and the footer top-rule uses --ochre at 40% opacity.

Pattern overlays. Backgrounds bake cream/ochre at low alpha into repeating gradients: blush ticking uses rgba(244,236,226,.55), emerald ticking rgba(244,236,226,.10), plum ticking rgba(210,149,74,.18), and the honeycomb mixes rgba(255,255,255,.04) highlights with rgba(0,0,0,.18) shadows.

Typography

Three Google-Fonts families loaded in one @import. Fraunces (an opsz high-contrast serif) is the display face — used light (300) for section headings and dramatically heavy italic (900) for the oversized hero word "story", which carries a hard 2px 4px 0 emerald drop-shadow. Hanken Grotesk is the humanist body sans for paragraphs. Space Mono is the label voice: every kicker, nav item, stat caption, tape label, ticket code and the V.0x stamps are uppercase Space Mono with wide tracking (0.3em on kickers).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(48–160px)	300	0.85	—	hero words, big section heads
display-italic	clamp(48–160px)	900 italic	0.8	—	hero "story" word
heading	clamp(36–72px)	300	0.9	—	section h2
body	18px	400	1.6	—	paragraphs (text-lg/text-xl)
label	11px	700	1.4	0.15–0.3em	kickers, nav, captions, stamps
stat	clamp(48–60px)	700	1.0	—	metric figures (2.5×, +18%)

Layout

Base unit is 4px (Tailwind scale). The page is a vertical stack of full-width sections, each centred in a max-w-[1280px] container with px-6 lg:px-16 gutters and generous py-20–py-24 vertical rhythm. A sticky cream header (80px tall, 2px plum bottom border) holds the wordmark, mono nav, and an ochre CTA. The hero is a 12-column grid: an 8-col composition stacking layered display words around an arched before/after slider, beside a 4-col intro column. Other signature compositions: the stats section as a stacked grid of bordered rows alternating emerald/ochre fills; the pinboard, an absolutely-positioned collage of rotated photo frames over a honeycomb field; and the rail, a horizontally-scrolling flex row of fixed 280px ticket cards. Whitespace is confident and editorial, with deliberate overlap (negative margins pull display words over the image).

Elevation & Depth

Depth comes mostly from thick borders and rotation, not soft shadows. The arch frame carries a large coloured shadow 0 28px 60px rgba(30,74,60,.4); pinboard photos use Tailwind shadow-2xl/shadow-xl; tape labels use a small 0 2px 6px rgba(0,0,0,.25); the paperclip and handle add 0 6px 18px rgba(0,0,0,.35). The slider divider has a static ochre glow 0 0 22px 3px rgba(210,149,74,.5), and the seam strip uses a 2px backdrop-filter: blur. Otherwise sections are flat colour planes separated by hairlines.

Shapes

Resolutely rectangular: borders run 2px (hairlines/stat rows), 3px (CTA panel), and 6px (photo frames, arch frame), all with zero corner radius. The exceptions are deliberate: the .arch image frame (border-radius:50% 50% 0 0 / 38% 38% 0 0), the pill-shaped drawn paperclips (.clip, 30px radius open loop), the rotated diamond slider handle (45° square), and the scalloped ticket edges produced with radial-gradient CSS masks.

Components

• navLink — uppercase Space Mono 11px, plum, hover→ochre.
• buttonPrimary — ochre fill, emerald text, 2px emerald border, square, px-5 py-3; hover inverts to emerald fill / cream text. Label e.g. "Book a walkthrough".
• buttonSolid — emerald fill, cream text, 2px emerald border, px-6 py-4; hover→ochre fill. Label "Start a project →".
• buttonOutline — transparent, 2px plum border, plum text, px-6 py-5; hover fills plum / cream text. Label "View our portfolio".
• statRow — bordered 2px plum row, fills alternate emerald/ochre, mono stat figure left + body caption right (e.g. "2.5×", "14", "+18%", "300+").
• photoCard — image inside a 6px cream frame, rotated a few degrees, with a drawn paperclip and a rotated tape label; shadow-2xl.
• ticketCard — cream card with scalloped left/right edges (CSS mask), fixed 280px, vertical mono stub code + image + Fraunces title + ochre mono caption.
• tapeLabel — small rotated mono caption on cream or ochre with a tape shadow (e.g. "RM.02 — Dining / dark walnut + blush linen").
• archFrame — the hero's arched, 6px-emerald-bordered before/after viewport.

Motion

Restrained and mostly interaction-driven. The hero before/after slider is a vanilla-JS pointer drag: clip-path: inset() on the after-image and the divider/handle/seam positions update live on pointermove, with no easing. All buttons and links use Tailwind transition-colors for hover state swaps (~150ms). animate-pulse runs on the "‹ Drag to reveal ›" prompt. There are no authored @keyframes or scroll animations; the rail simply native-scrolls horizontally with a custom 8px ochre scrollbar thumb.

Iconography

There are effectively no rendered icons: the Tabler icons-webfont stylesheet is linked at the end of <body> but no ti-* classes appear in the markup. All directional cues are typographic glyphs in Space Mono — → on CTAs, ‹ › around the drag prompt. If icons are added, keep them Tabler outline, plum or ochre, sized small (16–20px) to match the mono labels.

Do's and Don'ts

• Do keep every section a single saturated colour plane separated by 2px plum hairlines; let the ticking/honeycomb patterns carry texture.
• Do use the three-voice type split strictly: Fraunces for display (italic for emphasis), Hanken Grotesk for body, uppercase Space Mono for every label.
• Do keep corners square and borders thick; reserve curves for the arch and paperclips only.
• Do keep the V.0x — … mono stamps as the throughline of the editorial voice.
• Don't round corners, soften borders, or add gradients beyond the existing ticking/honeycomb patterns.
• Don't introduce colours outside emerald / ochre / plum / blush / cream.
• Don't swap the CTA inversion behaviour or drop the ochre divider glow on the slider.

Known Gaps

• Type sizes are responsive Tailwind utilities (text-5xl lg:text-7xl, text-[10rem]); the spec records representative clamp() ranges rather than per-breakpoint pixel values.
• letterSpacing on labels varies in markup between tracking-widest (~0.1em), tracking-wider, and tracking-[0.3em]; the token uses a representative mid value.
• rounded.arch and the ticket scallop are bespoke CSS shapes, not a simple radius; values are copied verbatim from the stylesheet.
• Tabler icons are linked but unused; the icon guidance is forward-looking.