name: mossbourne-design
version: alpha
description: >
  A botanical field-journal landing page for an off-grid Tasmanian timber-cabin
  retreat. The surface is a pale herbarium mist (`#DFE3DB`) overprinted with a
  multiply paper-fiber noise texture; ink is deep forest green (`#27402B`) with
  moss-green (`#6E8B58`) line art, kraft-tan (`#CDB58C`) washi tape, and a single
  rust (`#9B5A33`) for handwritten margin notes. The type story pairs a Fraunces
  display serif (uppercase plate titles, italic specimen names) with Work Sans
  body and a Caveat handwriting face. Signature moves: an SVG fern that draws
  itself on load, a magnifying-lens cursor that reveals photos beneath ink line
  art, sketch-to-photo crossfade cabin cards, washi-taped polaroids, and
  hand-drawn moon phases. Geometry is overwhelmingly square — hairline borders,
  near-zero radii, ruled ledger rows.
colors:
  # Brand / Ink
  forest: '#27402B'   # primary ink: body text, headings, hairline borders, footer fill
  moss: '#6E8B58'     # secondary line art (fern fronds, label strokes)
  # Accent
  rust: '#9B5A33'     # handwritten Caveat notes, marker highlight, accent captions
  kraft: '#CDB58C'    # washi tape, lens ring, footer signature text
  # Surface
  mist: '#DFE3DB'     # page background; also inverse text on forest fills
  # Translucent overlays
  rustMarker: 'rgba(155,90,51,.45)'   # highlighter sweep behind ledger terms
  forestRule80: 'rgba(39,64,43,.8)'   # nav links at 80% opacity
  mistRule30: 'rgba(223,227,219,.3)'  # footer divider on dark fill
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(9rem, 15vw, 9rem)
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: 0.04em
    textTransform: uppercase
  sectionTitle:
    fontFamily: "'Fraunces', serif"
    fontSize: 3rem
    fontWeight: 600
    letterSpacing: 0.06em
    textTransform: uppercase
  specimen:
    fontFamily: "'Fraunces', serif"
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: "'Work Sans', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  stamp:
    fontFamily: "'Work Sans', sans-serif"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 0.32em
    textTransform: uppercase
  hand:
    fontFamily: "'Caveat', cursive"
    fontSize: 1.5rem
    fontWeight: 600
rounded:
  none: 0px       # nearly everything: cards, borders, buttons, images
  marker: 2.4px   # 0.15em highlight chip behind ledger terms
  full: 9999px    # lens cursor, radial dot grid
spacing:           # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 64px
components:
  navLink:
    textColor: '{colors.forestRule80}'
    typography: '{typography.stamp}'
    underline: '1px {colors.forest} ink-draw on hover (scaleX .4 to 1)'
  ctaButton:
    backgroundColor: 'transparent'
    textColor: '{colors.forest}'
    border: '1px solid {colors.forest}'
    typography: '{typography.stamp}'
    rounded: '{rounded.none}'
    padding: '8px 20px'
    hover: 'fill {colors.forest}, text {colors.mist}'
    label: 'REQUEST A STAY →'
  cabinCard:
    backgroundColor: '{colors.mist}'
    border: '1px solid {colors.forest}'
    rounded: '{rounded.none}'
    padding: '12px'
    height: '460px'
    behavior: 'sketch image crossfades to photo on hover; handwritten note fades up'
  washiTape:
    backgroundColor: '{colors.kraft}'
    opacity: 0.78
    boxShadow: '0 1px 4px rgba(0,0,0,.12)'
    rotation: '-18deg / -14deg'
  marker:
    background: 'linear-gradient(104deg, transparent, {colors.rustMarker} 95%, transparent)'
    textColor: '{colors.forest}'
    fontWeight: 600
    rounded: '{rounded.marker}'
  ledgerRow:
    border: '1px {colors.forest} divide-y rows'
    timeLabel: '{typography.stamp}'
    title: '{typography.specimen}'
  footer:
    backgroundColor: '{colors.forest}'
    textColor: '{colors.mist}'
    divider: '1px {colors.mistRule30}'
motion:
  fernDraw: 'GSAP strokeDashoffset 2000→0, duration 2.6s, stagger 0.04, power1.inOut, delay 0.2s (on load)'
  moonDraw: 'GSAP strokeDashoffset→0, duration 1.4s, power1.inOut, ScrollTrigger top 85%'
  cardsReveal: 'GSAP y 40→0 / opacity 0→1, duration 0.8s, stagger 0.12, power2.out, ScrollTrigger top 80%'
  lensReveal: 'mousemove sets clip-path circle(115px) over photo grid; lens + tooltip follow cursor, opacity .35s'
  cabinCrossfade: 'opacity .7s ease (sketch↔photo); note .5s ease .15s delay'
  inkLink: 'underline scaleX .4→1, .35s ease, origin left'
icons:
  library: Tabler Icons (webfont, ti-*)
  style: outline
  sizes: { md: 20px, lg: 48px }
  color: '{colors.forest}'
  note: 'Plus hand-drawn inline SVG line art — fern, forest cross-section, moon phases — stroked in forest/moss'

Mossbourne

mossbourne-design · alpha

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

Overview

Mossbourne is a botanical field-journal page for an off-grid timber-cabin retreat in Tasmanian temperate rainforest. The whole page reads like a pressed-specimen plate: a pale herbarium mist surface (#DFE3DB) is overlaid with a fixed multiply-blended SVG fractal-noise texture so everything feels printed on fibrous paper, and the ink throughout is a deep forest green (#27402B). The voltage is restrained and earthy — moss green (#6E8B58) for botanical line art, kraft tan (#CDB58C) for washi-tape corners, and a single rust (#9B5A33) reserved for handwritten Caveat margin notes and the highlighter marker behind sustainability terms. The signature moves are illustrative and interactive: a tall SVG tree-fern that draws itself stroke-by-stroke on load; a circular magnifying "lens" cursor in the Forest section that wipes a clip-path circle to reveal photographs hiding beneath ink line art (with a layer-naming tooltip that follows the cursor); sketch-to-photo crossfade cabin cards; washi-taped polaroid snapshots rotated a couple degrees; and a row of hand-drawn moon phases that ink themselves in on scroll. Type pairs Fraunces (uppercase plate titles, the giant MOSS / BOURNE wordmark, italic Latin specimen names) with Work Sans body and a wide-tracked stamp micro-caps treatment, plus Caveat handwriting. Geometry is square and ruled: hairline forest borders, essentially zero corner radius, dashed rules, and ledger-style two-column grids.

Colors

Brand / Ink. forest #27402B is the workhorse — body copy, all headings, every hairline border, the dot-grid texture, and the solid footer fill. moss #6E8B58 is the secondary botanical line color used for the lighter fern fronds and crown strokes. Accent. rust #9B5A33 is the only warm pop and is rationed for the handwritten Caveat notes ("— first light, July", "move me around →"), accent captions, and as rgba(155,90,51,.45) in the linear-gradient marker highlight behind ledger terms. kraft #CDB58C is the paper-tape tan — washi corners on the polaroid, the lens ring, and the footer signature line. Surface. mist #DFE3DB is the page background and doubles as the inverse text color on the dark forest footer and tooltip. Translucent. Nav links use forest at 80%; the footer divider is mist at 30%; cabin-card notes sit on mist/80.

Typography

Three Google Fonts, imported via one @import: Fraunces (display serif, optical sizing, used 400/600/700 plus italic 500), Work Sans (body, 300–600 plus italic), and Caveat (handwriting, 400/600/700). No bespoke faces, so no substitution needed. The display face does double duty — set uppercase with tight leading-[.9] for the monumental MOSS / BOURNE wordmark and section plates, and set in italic at body scale for the Latin specimen names ("Filix Major", "Nothofagus"). Work Sans carries body and the wide-tracked stamp micro-caps (letter-spacing: .32em, uppercase) used for catalog metadata ("Coll. No. 0001", "Plate II"). Caveat is the curator's pen.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp ~9rem (15vw)	600	0.9	0.04em	Giant MOSS / BOURNE wordmark, uppercase
sectionTitle	3–3rem (md:5xl)	600	—	0.06em	Uppercase plate headings
specimen	1.125rem	400	1.1	—	Italic Latin cabin names, ledger row titles
body	15px	400	1.6	—	Paragraph copy
stamp	11px	500	—	0.32em	Uppercase catalog metadata, labels, nav
hand	1.5–3rem	600	—	—	Caveat handwritten margin notes & signature

Layout

Base unit 4px on the Tailwind scale; content is capped at max-w-[1280px] with px-8 gutters. The page is a stack of full-width sections separated by border-y hairlines, each headed by a stamp "Plate N —" eyebrow. The hero is an asymmetric two-column split (0.85fr / 1.15fr) — a hairline-bordered fern plate on the left, and a right column holding a washi-taped polaroid, a giant right-aligned wordmark, a specimen data block, and the CTA. Cabins are a 2→4 column card grid; the Forest section is a fixed-height (640px) interactive canvas with a radial dot-grid and ink line-art behind a lens-revealed photo grid; the Ledger is a two-column ruled text block with dashed section rules; Quiet Hours pairs a divided timetable list with feature cards and a torn-edge (clip-path polygon) video. Whitespace is generous and the composition leans on ruled hairlines and ledger grids rather than boxes-with-shadows.

Elevation & Depth

Almost entirely flat and paper-like. Depth comes from (1) the fixed full-page multiply noise texture at opacity .5, (2) hairline forest borders everywhere, (3) very soft tape shadows (0 1px 4px rgba(0,0,0,.12) on washi), and (4) the lens, which is the one rich shadow: box-shadow:0 0 0 6px rgba(205,181,140,.35), 0 8px 30px rgba(0,0,0,.35) plus a 3px kraft ring. The dark video card carries a plain shadow-lg. No glassmorphism, no glows.

Shapes

Square is the rule. Cards, image frames, the CTA button, and section dividers are all rounded: 0 (Tailwind defaults / bare borders). The only curves are the 9999px lens circle and the radial dot-grid dots, a tiny 0.15em radius on the marker highlight chip, and organic curves inside the hand-drawn SVGs. The video frame deliberately breaks the grid with a hand-torn clip-path polygon edge.

Components

• Header / nav — hairline-bottom bar, stamp uppercase wordmark + links; links use the ink-link underline that draws from 40% to full on hover.
• CTA button — transparent with 1px forest border, stamp label "REQUEST A STAY →", padding: 8px 20px, inverts to forest fill / mist text on hover.
• Cabin card — 460px tall, 1px forest border, mist fill, 12px pad; a framed image area where a sketch image crossfades to a photo on hover and a Caveat note fades up; footer with italic Fraunces specimen name, stamp spec line, and a small body description.
• Washi tape — kraft at 0.78 opacity, soft drop shadow, rotated chips taping down the polaroid corners.
• Marker highlight — linear-gradient(104deg,…) rust sweep behind bolded ledger terms, with box-decoration-break: clone for multi-line spans.
• Ledger row — divide-y hairline rows in a 90px / 1fr grid: stamp time label + Fraunces title + muted description.
• Footer — solid forest fill, mist text, three-column data grid over a mist/30 divider, Caveat curator sign-off.

Motion

GSAP + ScrollTrigger drive all motion. The hero fern draws itself (strokeDashoffset 2000→0, 2.6s, stagger 0.04, power1.inOut) on load; cabin cards rise and fade in on scroll (y40→0, 0.8s, stagger 0.12); the moon-phase SVGs ink in on scroll (1.4s). CSS transitions handle the cabin sketch↔photo crossfade (.7s) and note fade (.5s .15s), the ink-link underline (.35s), and the CTA color inversion. The hallmark interaction is the Forest lens: mousemove sets a clip-path: circle(115px at x y) over the hidden photo grid while the kraft-ringed lens and a forest tooltip follow the cursor and the tooltip text changes by depth.

Iconography

Two systems. UI/feature icons use Tabler Icons webfont (ti ti-moon-stars), outline style, in forest — small (~20px) and a large 48px feature glyph. The bulk of the "icon" work is hand-drawn inline SVG line art: the tall tree-fern plate, the forest cross-section, and the moon-phase row, all stroked at ~1–1.3px in forest/moss and animated via stroke-dash drawing. Decorative, illustrative, never filled except the full-moon disc.

Do's and Don'ts

• Do keep the paper-fiber noise overlay and hairline forest borders — they are the whole "pressed herbarium" character.
• Do ration rust to handwriting and the marker highlight only; let forest
  • mist carry the page.
• Do keep corners square and use ruled rules / ledger grids instead of drop-shadowed boxes.
• Do set plate titles and the wordmark in uppercase Fraunces with tight leading and wide-tracked stamp eyebrows.
• Don't introduce rounded cards, gradients-as-fill, or glassmorphism.
• Don't colorize the line art beyond forest/moss, or let images run at full saturation (the polaroid is intentionally grayscale-[15%]).
• Don't drop the GSAP draw-on animations — the self-drawing fern and moon phases are the signature.

Known Gaps

• The display font-size is responsive (text-[15vw] lg:text-[9rem]); the token records the large-screen value with the fluid range noted.
• Section titles use Tailwind responsive steps (text-4xl md:text-5xl); the token records ~3rem as a representative value.
• The paper texture and dot-grid are SVG/CSS effects, not color tokens; the noise uses feTurbulence baseFrequency 0.9 at opacity .5 with mix-blend: multiply.
• The marker radius 0.15em is converted to ~2.4px assuming a 16px base.