{
  "name": "SPUN Medika",
  "source": {
    "url": "https://spun.global/id",
    "capturedAt": "2026-07-30",
    "mode": "content-overhaul",
    "method": "playwright computed-style extraction + full-page capture",
    "evidence": [
      "RECON/original-recon-summary.md",
      "RECON/screenshots/original-1440.png"
    ],
    "note": "Visual language study. SPUN is a live commercial visa platform; its logo, testimonial content and product screenshots are NOT reused. See plan.md section 9."
  },

  "design_system": {
    "color": {
      "bg": { "value": "#fafafa", "evidence": "SOURCE", "note": "computed body/header/main background" },
      "surface": { "value": "#ffffff", "evidence": "SOURCE", "note": "cards, inputs, chips" },
      "surface_warm": { "value": "#fff6ed", "evidence": "SOURCE", "note": "footer, promo bands" },
      "surface_neutral": { "value": "#efeceb", "evidence": "SOURCE", "note": "inactive chip fill" },
      "fg": { "value": "#000000", "evidence": "SOURCE" },
      "fg_control": { "value": "#171412", "evidence": "SOURCE", "note": "button label ink" },
      "muted": { "value": "#89766c", "evidence": "SOURCE", "note": "warm grey, not neutral grey" },
      "muted_light": { "value": "#bcb0a9", "evidence": "SOURCE" },
      "border": { "value": "#dbd5d1", "evidence": "SOURCE" },
      "hairline": { "value": "#e5e7eb", "evidence": "SOURCE", "note": "Tailwind default divider" },
      "accent": { "value": "#ff7524", "evidence": "SOURCE", "note": "prices, step numbers, primary CTA. High-signal; never a large wash." },
      "accent_secondary": { "value": "#db4268", "evidence": "SOURCE", "note": "savings/discount badges, promo tint" }
    },

    "color_extension": {
      "rationale": "SPUN has no semantic layer; a medical estimator needs one. Uses the clinical-safety tokens already registered in project rules.",
      "ok": { "value": "#16a34a", "usage": "estimate confidence Tinggi" },
      "warn": { "value": "#d97706", "usage": "estimate confidence Sedang, 'sering terlewat' flags" },
      "risk": { "value": "#dc2626", "usage": "confidence Rendah, unresolved open items" },
      "constraints": [
        "Always paired with an icon AND a text label.",
        "Never used as a large fill or background wash.",
        "No triage/acuity use — this product does not triage patients.",
        "Confined to confidence chips and open-item status."
      ]
    },

    "typography": {
      "families": {
        "display": "Instrument Sans",
        "body": "Instrument Sans",
        "mono": null
      },
      "evidence": "SOURCE",
      "selfHost": true,
      "license": "OFL via Google Fonts — real face must be self-hosted, no system-font substitute",
      "scale": [
        { "role": "display",        "size": "48px", "weight": 700 },
        { "role": "section",        "size": "30px", "weight": 600 },
        { "role": "eyebrow",        "size": "24px", "weight": 500 },
        { "role": "subhead",        "size": "18px", "weight": 600 },
        { "role": "body",           "size": "16px", "weight": 400 },
        { "role": "card-title",     "size": "14px", "weight": 600 },
        { "role": "list-item",      "size": "14px", "weight": 500 },
        { "role": "control",        "size": "14px", "weight": 600 }
      ],
      "letterSpacing": "normal",
      "note": "Single family across display and body — permitted here because the artifact is utilitarian and data-dense."
    },

    "geometry": {
      "radius": {
        "pill": "9999px",
        "control": "8px",
        "card": "16px"
      },
      "usage": {
        "pill": "chips, filters, inputs, search segments, secondary buttons, icon buttons",
        "control": "header auth buttons (Masuk/Daftar), promo CTAs",
        "card": "content cards"
      },
      "borderWidth": "1px",
      "posture": "border-led containment; shadows are very low-alpha and reserved for floating layers",
      "evidence": "SOURCE"
    },

    "spacing": {
      "controlPadding": { "chip": "8px 16px", "pill": "10px 16px", "auth": "12px 16px", "icon": "12px", "promoCta": "8px 40px", "searchSegment": "20px 24px 4px" },
      "evidence": "SOURCE"
    }
  },

  "design_style": {
    "posture": "Warm, consumer-friendly transactional. A single decisive flourish (the hero sunrise gradient) over an otherwise flat, high-density, price-forward grid.",
    "signature_moves": [
      "Warm peach radial gradient with a soft sunburst arc, hero only",
      "Pill-shaped multi-segment search bar as the hero's functional centrepiece",
      "Horizontally scrolling pill taxonomy row directly beneath the hero",
      "Price-forward cards: 'Dari IDR ...' in accent, strikethrough comparison, savings badge in rose",
      "Numbered process steps with the numeral in accent, paired with a product screenshot",
      "Warm cream footer as a surface change rather than a decorative separator"
    ],
    "restraint_rules": [
      "Accent #ff7524 appears at most a few times per viewport — on price and on the primary action.",
      "The gradient lives in the hero and nowhere else.",
      "One type family; hierarchy comes from weight and size only.",
      "No smooth-scroll library, no scroll-jacking — the original has neither."
    ],
    "avoid": [
      "purple gradient washes",
      "emoji as feature icons",
      "an icon beside every heading",
      "invented statistics or fake testimonials presented as real",
      "hand-drawn SVG people or scenery in place of real imagery"
    ]
  },

  "visual_effects": {
    "effect_intensity": "lightweight",
    "implementation_tier": "CSS only",
    "detected": {
      "webgl": false,
      "canvas": false,
      "smoothScroll": false,
      "gsap": false,
      "scrollSnap": false
    },
    "effects": [
      { "name": "hero radial gradient + sunburst arc", "impl": "CSS radial-gradient + conic/mask arc", "evidence": "SOURCE" },
      { "name": "horizontal chip scroller", "impl": "overflow-x with scroll-snap-type: none, native", "evidence": "PARTIAL", "note": "interaction-probe not yet run" },
      { "name": "sticky header", "impl": "position: sticky", "evidence": "PARTIAL" },
      { "name": "card hover lift", "impl": "unknown", "evidence": "GUESS", "note": "requires interaction-probe.mjs to confirm; do not invent a transform until captured" }
    ]
  },

  "carry_over": {
    "keep": ["information architecture", "section order and rhythm", "visual grammar", "price-forward card pattern", "process-step pattern", "search-first hero"],
    "replace": ["all copy (visa -> medical tourism)", "brand name and mark", "imagery", "testimonials", "statistics", "route names"],
    "add": ["semantic confidence layer", "itemized cost ledger", "live recompute levers", "provenance badges", "medical disclaimer on every numeric surface"]
  }
}