name: terraknot-design
version: alpha
description: >
  Terra Knot is a regenerative-fashion field journal rendered as a pressed-plant
  ledger. The surface is warm linen (#E8E1D2) printed in bark ink (#2E2A24), with
  moss-green (#6B7B52) and clay-terracotta (#B5694B) as the two earthen voltages.
  The signature moves are a multiply-blended fractal-noise grain over every
  section, dashed-stitch seams and hairlines, a hand-drawn SVG vine that draws as
  you scroll the soil-to-seam timeline, a hover-fanned material swatch deck, and a
  cork-board of draggable polaroids. The type story pairs italic Fraunces display
  with the highly readable Atkinson Hyperlegible body and a Courier Prime mono used
  for journal captions and small caps. Geometry is square-cornered throughout —
  no rounded corners — so everything reads like cards pinned to a page.
colors:
  # Brand / Voltage
  moss: '#6B7B52'    # primary brand green — archive section bg, swatch card, vine stroke
  clay: '#B5694B'    # accent terracotta — CTA fills, eyebrows, prices, selection, links-hover
  moss-tint: '#7d8c63' # one-off lighter moss on swatch card No.03
  # Surface
  linen: '#E8E1D2'   # page surface, footer bg, text on dark sections
  polaroid: '#FBF8F1' # near-white polaroid card stock
  # Text
  bark: '#2E2A24'    # primary ink — headings, body, default text
  bark-85: 'rgba(46,42,36,0.85)' # hero lede body
  bark-75: 'rgba(46,42,36,0.75)' # section body copy
  bark-70: 'rgba(46,42,36,0.70)' # mono eyebrows on linen
  bark-55: 'rgba(46,42,36,0.55)' # hero footer line meta
  bark-50: 'rgba(46,42,36,0.50)' # copyright, dashed input border
  # Hairlines / Stitch
  stitch: 'rgba(46,42,36,0.40)' # dashed stitch-row repeating gradient
  stitch-soft: 'rgba(46,42,36,0.35)' # vertical dashed-stitch divider
  # On-dark
  linen-70: 'rgba(232,225,210,0.70)' # mono captions on moss/dark
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(3.4rem, 9vw, 7.5rem)
    fontWeight: 500
    lineHeight: 0.92
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(3.4rem, 9vw, 7.5rem)
    fontWeight: 400
    fontStyle: italic
  section-title:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2.4rem, 5vw, 4rem)
    fontWeight: 400
    lineHeight: 1.25
  card-title:
    fontFamily: "'Fraunces', serif"
    fontSize: 30px
    fontWeight: 400
  body:
    fontFamily: "'Atkinson Hyperlegible', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.625
  eyebrow:
    fontFamily: "'Courier Prime', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 3.85px
    textTransform: uppercase
  meta:
    fontFamily: "'Courier Prime', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 2.4px
    textTransform: uppercase
rounded:
  none: 0px   # everything is square-cornered
spacing:      # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 64px
components:
  cta-primary:
    backgroundColor: '{colors.clay}'
    textColor: '{colors.linen}'
    typography: '{typography.meta}'
    rounded: '{rounded.none}'
    padding: '12px 24px'
    # "Open the Archive" / "Send" — solid clay block, mono uppercase
  cta-ghost:
    textColor: '{colors.bark}'
    typography: '{typography.meta}'
    rounded: '{rounded.none}'
    # "Soil → Seam" — dashed underline, underline-offset 4px
  swatch-card:
    backgroundColor: '{colors.moss}'
    textColor: '{colors.linen}'
    typography: '{typography.card-title}'
    rounded: '{rounded.none}'
    padding: '20px'
    # 256x384px deck card, shadow-2xl; variants use clay and moss-tint
  polaroid:
    backgroundColor: '{colors.polaroid}'
    textColor: '{colors.bark}'
    typography: '{typography.meta}'
    rounded: '{rounded.none}'
    padding: '10px 10px 42px'
    # draggable photo card, box-shadow 0 12px 26px rgba(20,18,14,.35), rotated
  input-underline:
    textColor: '{colors.bark}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    # transparent, bottom border-b-2 border-dashed bark/50
  eyebrow-label:
    textColor: '{colors.clay}'
    typography: '{typography.eyebrow}'
    # "Traceability Ledger" etc. — clay mono kicker above each heading
motion:
  reveal: 'GSAP from opacity:0,y:50 over 0.9s power2.out; ScrollTrigger start top 85% on .reveal vine nodes'
  vine-draw: 'GSAP strokeDashoffset len→0, ease none, scrub:1, scrub-tied to #timeline scroll'
  deck-fan: 'anime.js on hover — cards translateX offset*120, rotate offset*5, translateY abs(offset)*-10 over 600ms outElastic(1,.7); reset 500ms outQuad'
  polaroid-drag: 'anime.js createDraggable within #board — releaseStiffness 120, releaseDamping 16, maxVelocity 2'
  wax-float: 'anime.js wax seal rotate [-4,4] over 6000ms loop alternate inOutSine'
  smooth-scroll: 'Locomotive Scroll v5 with data-scroll parallax (data-scroll-speed 0.6 / -0.5 / 1.2)'
icons:
  library: game-icons (lorc wax-seal SVG) + inline SVG filters
  style: solid silhouette
  sizes: { md: 112px, lg: 144px }
  color: '{colors.clay}'   # achieved via CSS filter recolor of the seal

Terra Knot

terraknot-design · alpha

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

Overview

Terra Knot is a regenerative-fashion landing page styled as a pressed-plant field journal — a "ledger of clothing grown from the soil up." The whole page sits on a warm linen surface (#E8E1D2) printed in dark bark ink (#2E2A24), with two earthen voltages doing all the accent work: moss green (#6B7B52) and clay terracotta (#B5694B). Every section carries a feTurbulence fractal-noise .grain layer at 7% opacity in mix-blend-mode: multiply, giving the page a printed-paper texture. The hallmark moves are stitching and tracing: dashed stitch-row seams between sections, a center dashed-stitch divider in the hero, and a hand-drawn SVG vine-path (moss stroke, stroke-dasharray:2 10) that draws itself as you scrub through the soil-to-seam timeline. Interaction is tactile — a material swatch deck fans open on hover (anime.js outElastic), polaroids on a cork-board are physically draggable, and a wax seal floats gently at the hero center. Type pairs italic Fraunces display headings, an Atkinson Hyperlegible body, and Courier Prime mono for every eyebrow, caption, and small-caps label. Geometry is uniformly square — there is not a single rounded corner — so each element reads like a card or specimen pinned to the page.

Colors

Brand / Voltage. moss #6B7B52 is the primary green: it fills the entire Archive section background, the first swatch deck card, and is the stroke color of the vine SVG. clay #B5694B is the terracotta accent — solid fills on the primary CTAs ("Open the Archive", "Send"), every mono eyebrow kicker, product prices, hover color on footer links, and the ::selection highlight (clay bg / linen text). moss-tint #7d8c63 is a one-off lighter green used only on swatch card No. 03.

Surface. linen #E8E1D2 is the page surface (set on #tk-root) and the footer background; it also serves as the text color on the dark moss Archive section and inside the colored swatch cards. polaroid #FBF8F1 is the slightly warmer off-white card stock for the draggable polaroids.

Text. bark #2E2A24 is the default ink for all headings and body. It is used at several opacities: bark/85 for the hero lede, bark/75 for section body copy, bark/70 for mono eyebrows on linen, bark/55 for the hero footer meta row, and bark/50 for the copyright line and the dashed email-input border.

Hairlines / Stitch. Seams are drawn with bark at low alpha: stitch rgba(46,42,36,.40) in the .stitch-row repeating-linear-gradient (10px dash / 10px gap), and stitch-soft rgba(46,42,36,.35) for the vertical .dashed-stitch divider.

On-dark. On the moss Archive section, mono captions use linen/70.

Typography

Three Google Fonts loaded via a single @import: Fraunces (optical-size serif, the display face, used italic for "Terra" and roman for "Knot" and all section/card titles), Atkinson Hyperlegible (the highly legible humanist sans-serif body), and Courier Prime (the typewriter mono used for journal captions, eyebrows, prices, and metadata). All three are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3.4rem,9vw,7.5rem)	500	0.92	—	"Knot" hero word
display-italic	clamp(3.4rem,9vw,7.5rem)	400 italic	0.92	—	"Terra" hero word
section-title	clamp(2.4rem,5vw,4rem)	400	1.25	—	"Soil to Seam", section h2s
card-title	30px	400	—	—	timeline node + swatch h3
body	15px	400	1.625	—	lede + section paragraphs
eyebrow	11px	400	—	0.35em (~3.85px)	section kickers, hero meta
meta	12px	400	—	0.2–0.3em	CTAs, captions, prices, copyright

Layout

Base unit is 4px on the standard Tailwind scale. The page is a single scrolling column of full-width sections, each tagged data-scroll-section for Locomotive Scroll. The hero is a md:grid-cols-2 split — a left "Field Journal" text column (parallax speed 0.6) and a right full-bleed image column (parallax speed -0.5), joined down the center by a vertical dashed-stitch divider, with a wax seal pinned dead-center (speed 1.2). The timeline is a max-w-5xl centered column of six alternating md:grid-cols-2 vine nodes (image / text), threaded by the central vine SVG. The swatch deck is a centered flex row of three overlapping (-ml-12) cards. The Archive is a fixed-height (620px) #board with absolutely positioned, rotated polaroids. Sections are divided by full-width dashed stitch-row rules. Generous vertical rhythm (py-24 md:py-32) and max-w-3xl/ max-w-xl text measures keep the journal airy.

Elevation & Depth

Depth comes from photographic shadows and paper texture, not UI elevation. Images in the timeline use Tailwind shadow-lg; swatch deck cards use shadow-2xl; polaroids carry a custom box-shadow: 0 12px 26px rgba(20,18,14,.35). The wax seal has filter: drop-shadow(0 6px 10px rgba(46,42,36,.35)). The defining depth layer, though, is the .grain fractal-noise SVG sitting at opacity:.07, mix-blend-mode:multiply over every section, which flattens everything into one printed page. No glassmorphism, no glows.

Shapes

Resolutely square. There are no rounded-* classes anywhere — cards, buttons, inputs, images, polaroids and swatch cards all have hard 90° corners, reinforcing the pressed-specimen / pinned-card metaphor. The only curves are organic and illustrative: the hand-drawn Bézier vine-path and the wax-seal silhouette. Lines are dashed rather than solid (stitch rows, the central divider, the email input underline, the "Soil → Seam" link), reading as stitching/thread.

Components

• cta-primary — solid clay block, linen text, mono uppercase meta, square, padding 12px 24px. Labels: "Open the Archive", "Send".
• cta-ghost — text link with decoration-dashed underline-offset-4. Label: "Soil → Seam".
• swatch-card — 256×384px deck card, moss fill (variants clay and moss-tint), linen text, shadow-2xl, 20px padding; image strip + mono spec list ("Fiber / Weight / Source / Dye").
• polaroid — #FBF8F1 stock, 10px/10px/42px padding (deep bottom lip), custom drop shadow, slight rotation; mono product name + clay price.
• input-underline — transparent field, border-b-2 border-dashed bark/50, body type, placeholder bark/40.
• eyebrow-label — clay mono uppercase kicker with wide tracking above every section heading ("Traceability Ledger", "Material Swatch Deck", "Field Notes").
• stitch-row — full-width 1.5px dashed seam divider between sections.

Motion

Heavily animated via three libraries. Locomotive Scroll v5 drives smooth scrolling and data-scroll-speed parallax in the hero. GSAP + ScrollTrigger fades in .reveal timeline nodes (opacity:0,y:50, 0.9s, power2.out, start top 85%) and scrubs the vine strokeDashoffset from full length to 0 as you scroll #timeline (ease none, scrub:1). anime.js v4 powers the tactile bits: the swatch deck fans on mouseenter (translateX offset*120, rotate offset*5, 600ms outElastic(1,.7)) and resets on leave (500ms outQuad); polaroids are createDraggable within #board (releaseStiffness 120, damping 16); and the wax seal floats with a looping alternating rotate:[-4,4] over 6000ms inOutSine.

Iconography

Effectively a single illustrative icon: the game-icons lorc/wax-seal.svg loaded from jsDelivr, sized 112px (md) to 144px (lg), recolored to clay via a CSS filter (invert/sepia/saturate/hue-rotate). The rest of the "iconography" is inline SVG used for effect, not UI: the feTurbulence grain filters and the vine-path Bézier. There is no general-purpose UI icon set.

Do's and Don'ts

• Do keep every corner square — the pinned-card / specimen feel depends on zero border-radius.
• Do lay the .grain multiply layer over every new section so it stays on the same printed page.
• Do use Courier Prime mono, uppercase, with wide tracking for all eyebrows, captions, prices, and metadata; reserve Fraunces for display/titles.
• Do render dividers and underlines as dashed "stitches," not solid rules.
• Don't introduce a third accent color — only moss and clay (plus the linen surface and bark ink) carry the palette.
• Don't add drop-shadow-based UI elevation or glass; depth is photographic shadow plus paper grain only.
• Don't mix in geometric/outline UI icons — the icon language is the single illustrative wax seal.

Known Gaps

• The grain layer's background image is left empty in CSS; texture comes from the inline feTurbulence SVG, so the visual grain is approximate (baseFrequency 0.9, 2 octaves).
• The wax-seal color is produced by a CSS filter chain, not a literal hex; clay is the intended target and is recorded as the icon color.
• Spacing tokens are inferred from the Tailwind utility scale actually used (px-6/8/16, py-12/16/24/32, gaps 3/5/8/16); no custom spacing variables exist.
• Letter-spacing for the eyebrow token is 0.35em; the px value (~3.85px) is computed from the 11px size.