{
  "name": "Interactive Image",
  "tagline": "Make images and maps, interactive.",
  "description": "Add hotspots to your images or drop pins on a map. Give each point a popup, map view, or lightbox card with text, photos, video, and links.",
  "colors": [
    {
      "name": "Action blue",
      "token": "action-blue",
      "value": "#1557FF",
      "usage": "Primary purchase and publish actions."
    },
    {
      "name": "Deep navy",
      "token": "deep-navy",
      "value": "#081633",
      "usage": "Dark surfaces and map markers."
    },
    {
      "name": "Hero blue",
      "token": "hero-blue",
      "value": "oklch(0.63 0.22 255)",
      "usage": "Homepage buttons and navigation accents."
    },
    {
      "name": "Cyan",
      "token": "cyan",
      "value": "oklch(0.86 0.11 220)",
      "usage": "Headline accents on dark backgrounds."
    },
    {
      "name": "White",
      "token": "white",
      "value": "#FFFFFF",
      "usage": "Light surfaces and text on dark backgrounds."
    },
    {
      "name": "Slate",
      "token": "slate",
      "value": "oklch(0.554 0.046 257.417)",
      "usage": "Secondary text on light backgrounds."
    }
  ],
  "gradient": "linear-gradient(100deg, oklch(0.86 0.11 220), oklch(0.78 0.16 240) 55%, oklch(0.88 0.1 210))",
  "typography": [
    {
      "name": "Futura",
      "role": "Headlines",
      "stack": "\"Futura\", \"Avenir Next\", \"Century Gothic\", \"Inter\", \"Helvetica Neue\", ui-sans-serif, system-ui, sans-serif",
      "weight": "700",
      "tracking": "-0.035em"
    },
    {
      "name": "Avenir Next",
      "role": "Body & interface",
      "stack": "\"Avenir Next\", \"Century Gothic\", \"Inter\", \"Helvetica Neue\", ui-sans-serif, system-ui, sans-serif",
      "weight": "400",
      "tracking": "-0.01em"
    }
  ],
  "assets": [
    {
      "name": "Primary logo",
      "file": "/interactive-image-logo.png",
      "format": "PNG",
      "dimensions": "1962 \u00d7 580",
      "usage": "For white and light backgrounds.",
      "surface": "light"
    },
    {
      "name": "Reversed logo",
      "file": "/interactive-image-logo-white.png",
      "format": "PNG",
      "dimensions": "1962 \u00d7 580",
      "usage": "For navy and dark backgrounds.",
      "surface": "dark"
    },
    {
      "name": "Browser icon",
      "file": "/favicon.png",
      "format": "PNG",
      "dimensions": "64 \u00d7 64",
      "usage": "For small browser and interface placements.",
      "surface": "icon"
    },
    {
      "name": "Favicon bundle",
      "file": "/favicon.ico",
      "format": "ICO",
      "dimensions": "16, 32 & 48 px",
      "usage": "Multi-size icon for browser tabs.",
      "surface": "icon"
    },
    {
      "name": "Social sharing image",
      "file": "/og-interactive-image.jpg",
      "format": "JPG",
      "dimensions": "1200 \u00d7 630",
      "usage": "For website link previews and social sharing.",
      "surface": "social"
    }
  ]
}