{
  "project_slug": "cableforge",
  "project_name": "CableForge",
  "generated_at": "2026-04-25T19:30:00Z",
  "phase": "phase-1-homepage-only",
  "source_wireframe": "library/wireframe-patterns/compositions/rope-competitor-homepage.html",
  "positioning": "Application-First, Spec-Transparent — engineered cordage where every product touch surfaces breaking strength, stretch, and weight as live data, not buried PDFs.",
  "competitors": ["samsonrope.com", "denverrope.com", "neropes.com"],
  "shared_section_structure": [
    "header",
    "hero (split: pitch + spec readout)",
    "configurator (3-step matched rope finder)",
    "industries grid (8 application tiles)",
    "product line spec cards (3 constructions)",
    "engineering credibility + pull-test telemetry + stats",
    "distributor locator + map",
    "footer"
  ],
  "mockups": [
    {
      "id": 1,
      "variant": "live-instrument",
      "name": "Live Instrument",
      "tagline": "A data-cockpit for the rope buyer.",
      "description": "Treat the page like an engineering test bench. Cool slate cockpit alternating with cream drafting-paper sections. Monospace numerics, exposed grid lines, terminal-style live-data ticks, and a single high-contrast amber signal accent. The configurator and pull-test telemetry are the heroes.",
      "differentiators": [
        "alternating dark-cockpit / cream-drafting-paper rhythm (4 contrast switches across the page)",
        "live status bar with running clock and operational ping",
        "blueprint SVG behind hero headline + technical SVG glyphs behind every industry tile",
        "monospace numerics throughout (IBM Plex Mono); display sans for headlines",
        "amber signal accent (#ffb800) used sparingly as alert/match indicator",
        "pull-test telemetry graph rendered as a live SVG line chart with failure marker",
        "angular technical shape dividers (notched cuts) + hazard-tape datum strips between sections"
      ],
      "type_system": {
        "display": "Inter 800 (no caps)",
        "body": "Inter 400/500",
        "mono": "IBM Plex Mono 500/600 — used for all numerics, status labels, P/Ns"
      },
      "palette": {
        "ink": "#06090f",
        "cockpit_surface": "#161c28",
        "drafting_paper": "#fcfaf4",
        "drafting_cream": "#ebe6da",
        "signal": "#ffb800",
        "good": "#3ddc97"
      },
      "motion_profile": "Subtle live-data pulses (0.05–0.5Hz blinks), scan-line sweep across the rope-vis area, IntersectionObserver fade-up on section entry. Reduced-motion respected.",
      "section_emphasis": [
        "hero with cockpit panel (largest visual weight)",
        "configurator (light section — feels like writing on graph paper)",
        "engineering telemetry (the pull-test graph is the proof point)"
      ],
      "best_for": "Buyers who think in part numbers — engineers, defense procurement, riggers who want the spec sheet open before they pick up the phone.",
      "pages": [
        {"file": "index.html", "status": "ready"},
        {"file": "about.html", "status": "pending"},
        {"file": "services.html", "status": "pending"},
        {"file": "service-single.html", "status": "pending"}
      ],
      "entry": "index.html"
    },
    {
      "id": 2,
      "variant": "forged-material",
      "name": "Forged Material",
      "tagline": "Heritage cordage, refined for the modern catalog.",
      "description": "Premium editorial. Display serif headlines (Fraunces) over warm graphite + paper + oxblood-rust palette. Generous whitespace, rope-weave SVG imagery throughout, magazine-like vertical rhythm. The configurator becomes a quieter, more elegant 3-step ribbon. Heritage and craftsmanship led, never brochure-ware.",
      "differentiators": [
        "display-serif headlines (Fraunces variable) with italic accents on key words",
        "warm graphite ink + cream paper + oxblood/rust accent palette",
        "rope-weave SVG patterns rendered in-place as featured product imagery",
        "configurator presented as a single elegant ribbon (not three cards)",
        "industry cards with bespoke abstract SVG illustrations behind each tile",
        "engineering credibility shown through a 'plate' figure with woven-pattern background + pull-test graph overlay",
        "organic wave-curve shape dividers between major sections",
        "section numbering uses lowercase Roman numerals (i / ii / iii) for editorial restraint",
        "footer features a giant serif tagline, italicized cities, and a dotted-rule cert lockup"
      ],
      "type_system": {
        "display": "Fraunces 400/500 with italic emphasis (variable-font opsz)",
        "body": "Inter 400/500",
        "no_mono": "Specs use Fraunces tabular for editorial cohesion"
      },
      "palette": {
        "ink": "#1a1814",
        "paper": "#f4ede4",
        "cream": "#ebe1d2",
        "rust_deep": "#7d2624",
        "rust": "#9c3a36",
        "gold": "#b08348"
      },
      "motion_profile": "Slow, gentle fade-up reveals (0.8s cubic). No scrolling decoration. Hover lifts (-4px) and refined shadow expansions. Reduced-motion respected.",
      "section_emphasis": [
        "hero with rope-weave figure (imagery carries identity)",
        "industries grid (cards feel like a catalog spread)",
        "heritage section (the long-form trust statement)"
      ],
      "best_for": "Premium-marine, defense, and high-end commercial buyers who reward craft and the appearance of unhurried expertise.",
      "pages": [
        {"file": "index.html", "status": "ready"},
        {"file": "about.html", "status": "pending"},
        {"file": "services.html", "status": "pending"},
        {"file": "service-single.html", "status": "pending"}
      ],
      "entry": "index.html"
    },
    {
      "id": 3,
      "variant": "engineered",
      "name": "Engineered",
      "tagline": "Brutalist-tech. Data first. No decoration.",
      "description": "Uncompromising functional minimalism. All-caps Inter Black headlines + JetBrains Mono for every number. Stark monochrome black/white/concrete with a single hazard-yellow acid accent. Asymmetric grid lines, exposed 1px borders, technical-drawing aesthetic. The hero is split into a massive headline + a true product-data table. Industries grid becomes a numbered catalog spread.",
      "differentiators": [
        "all-caps Inter 900 display headlines + JetBrains Mono numerics — no other typefaces",
        "stark monochrome (#000 / #fff / #cccccc) with hazard-yellow (#d4ff00) acid accent",
        "scrolling marquee at the top of the page",
        "hero right column is a true product-data table (no rope visualization — pure spec)",
        "industries presented as a 4-up catalog spread with massive numerals",
        "product lines presented as horizontal stacked rows (one row per product) instead of cards",
        "asymmetric grid markers, vertical-rl section numbering, repeating yellow/black hazard stripes between sections",
        "brutalist angular shape dividers with notch cuts + hazard-tape datum bars",
        "footer leads with a giant typographic 'CABLEFORGE /' wordmark"
      ],
      "type_system": {
        "display": "Inter 900 ALL CAPS, tight letter-spacing (-2.5px to -4px)",
        "body": "Inter 400/500",
        "mono": "JetBrains Mono 500/700 — every number, label, code"
      },
      "palette": {
        "black": "#000000",
        "ink": "#0a0a0a",
        "concrete": "#2a2a2a",
        "white": "#ffffff",
        "paper": "#f5f5f5",
        "acid": "#d4ff00"
      },
      "motion_profile": "Fast, snap-quick (0.5s reveals). Scrolling marquee at the top. Acid-yellow blinks on telemetry. No graceful curves — every transition is binary. Reduced-motion respected.",
      "section_emphasis": [
        "hero data table (data is the design)",
        "engineering telemetry section (dark, large, dominant)",
        "industries spread (numbered catalog of capabilities)"
      ],
      "best_for": "Procurement engineers and ops buyers who hate marketing copy — the page reads like a spec sheet, which is the point.",
      "pages": [
        {"file": "index.html", "status": "ready"},
        {"file": "about.html", "status": "pending"},
        {"file": "services.html", "status": "pending"},
        {"file": "service-single.html", "status": "pending"}
      ],
      "entry": "index.html"
    }
  ],
  "shared_design_choices": [
    "All three import their own font stack (no shared variables.css since this is a competitor-positioning exercise, not a real client pipeline run).",
    "All three respect prefers-reduced-motion and use IntersectionObserver for scroll-triggered reveals.",
    "All three are single self-contained HTML files with inline CSS and minimal vanilla JS.",
    "All three derive their information architecture from the same source wireframe — same 8 sections, same content roles.",
    "All three use SVGs as background graphics (no raster images required) — rope-weaves, blueprint grids, pull-test graphs, map topo lines, industry illustrations.",
    "All three use shape dividers between major contrast transitions: angular notches in Mockup 1 + 3, organic waves in Mockup 2."
  ],
  "next_steps": [
    "Hand the three mockups to the client for selection.",
    "Once a winner is chosen, run mockup-generator Phase 2 to extend the winning variant with about / services / service-single pages.",
    "After Phase 2, hand the winning variant directory to mockup-to-block-theme for WordPress conversion."
  ]
}