{
  "spec_version": 2,
  "extractor_version": "0.2.0",
  "url": "https://customer.io/",
  "final_url": "https://customer.io/",
  "slug": "customer.io",
  "captured_at": "2026-11-12T15:13:16.664Z",
  "title": "Customer.io: Customer Engagement Platform For Better Outcomes",
  "meta": {
    "description": "Customer.io is a customer engagement platform for creating personalized journeys and better business outcomes across email, push, SMS, and in-app messaging.",
    "og_image": "https://cdn.sanity.io/images/onirtmj2/production/5e497275070e44cc06b05b4f2398ded18148f51b-2400x1260.png?rect=0,2,2400,1256&w=1200&h=628&fit=crop&auto=format",
    "og_title": "Customer.io: Customer Engagement Platform For Better Outcomes",
    "theme_color": "#ffffff",
    "lang": "en",
    "generator": "Next.js"
  },
  "capture": {
    "variants": [
      {
        "name": "desktop-light",
        "width": 1440,
        "height": 900,
        "scheme": "light",
        "page_height": 9016,
        "full": "screens/desktop-light-full.png",
        "fold": "screens/desktop-light-fold.png"
      },
      {
        "name": "desktop-dark",
        "width": 1440,
        "height": 900,
        "scheme": "dark",
        "page_height": 9016,
        "full": "screens/desktop-dark-full.png",
        "fold": "screens/desktop-dark-fold.png"
      },
      {
        "name": "mobile-light",
        "width": 390,
        "height": 844,
        "scheme": "light",
        "page_height": 9223,
        "full": "screens/mobile-light-full.png",
        "fold": "screens/mobile-light-fold.png"
      },
      {
        "name": "mobile-dark",
        "width": 390,
        "height": 844,
        "scheme": "dark",
        "page_height": 9223,
        "full": "screens/mobile-dark-full.png",
        "fold": "screens/mobile-dark-fold.png"
      }
    ],
    "status": 200,
    "cookie_banner": "clicked \"Reject all\"; hid div#cookiebanner",
    "warnings": [],
    "element_count": 911,
    "render_quality": {
      "status": "ok",
      "reasons": [],
      "screenshot": "ok",
      "screenshot_reasons": []
    },
    "worker_os": "macos"
  },
  "color": {
    "scheme": "light",
    "palette": [
      {
        "hex": "#FFFFFF",
        "oklch": [
          1,
          0,
          201.8
        ],
        "role": "bg",
        "area": 0.5318,
        "uses": {
          "bg": 0.979,
          "text": 0.019,
          "border": 0,
          "fill": 0.002
        },
        "css": "oklch(1 0 0)",
        "css_var": "--color-white",
        "variants": [
          "#FAFAFA",
          "#FFFCF5"
        ]
      },
      {
        "hex": "#00191C",
        "oklch": [
          0.195,
          0.033,
          205.3
        ],
        "role": "other",
        "area": 0.1671,
        "uses": {
          "bg": 1,
          "text": 0,
          "border": 0,
          "fill": 0
        },
        "css": "oklch(0.19478 0.03329 205.326)",
        "css_var": "--color-spruce-950"
      },
      {
        "hex": "#00262B",
        "oklch": [
          0.245,
          0.042,
          207.2
        ],
        "role": "text",
        "area": 0.151,
        "uses": {
          "bg": 0.735,
          "text": 0.263,
          "border": 0,
          "fill": 0.002
        },
        "css": "oklch(0.228 0.036 207.47)",
        "css_var": "--fg",
        "variants": [
          "#032125",
          "#022126",
          "#032024"
        ]
      },
      {
        "hex": "#FDF0E9",
        "oklch": [
          0.963,
          0.017,
          50
        ],
        "role": "surface",
        "area": 0.0292,
        "uses": {
          "bg": 0.977,
          "text": 0,
          "border": 0.023,
          "fill": 0
        },
        "css": "oklch(0.9628 0.017 50)",
        "css_var": "--color-zest-50",
        "variants": [
          "#F5F5F5"
        ]
      },
      {
        "hex": "#E2F4FF",
        "oklch": [
          0.958,
          0.024,
          234.4
        ],
        "role": "other",
        "area": 0.0288,
        "uses": {
          "bg": 0.989,
          "text": 0,
          "border": 0.01,
          "fill": 0.001
        },
        "css": "oklch(0.958 0.025 237.5)",
        "css_var": "--color-wave-50",
        "variants": [
          "#DFF4FF"
        ]
      },
      {
        "hex": "#000000",
        "oklch": [
          0,
          0,
          0
        ],
        "role": "other",
        "area": 0.0236,
        "uses": {
          "bg": 0,
          "text": 0,
          "border": 0,
          "fill": 1
        },
        "css_var": "--color-black"
      },
      {
        "hex": "#00191CD9",
        "oklch": [
          0.195,
          0.033,
          205.3
        ],
        "role": "other",
        "area": 0.0194,
        "uses": {
          "bg": 1,
          "text": 0,
          "border": 0,
          "fill": 0
        },
        "css": "oklab(0.19478 -0.0300904 -0.0142404 / 0.85)",
        "on_bg": "#263B3E"
      },
      {
        "hex": "#032125CC",
        "oklch": [
          0.228,
          0.036,
          207.5
        ],
        "role": "muted",
        "area": 0.0091,
        "uses": {
          "bg": 0,
          "text": 0.997,
          "border": 0,
          "fill": 0.003
        },
        "css": "oklab(0.228 -0.0319411 -0.0166062 / 0.8)",
        "on_bg": "#354D51"
      },
      {
        "hex": "#010101B3",
        "oklch": [
          0.063,
          0.001,
          203.8
        ],
        "role": "other",
        "area": 0.0066,
        "uses": {
          "bg": 0,
          "text": 0,
          "border": 0,
          "fill": 1
        },
        "css": "lab(0.228 -0.0319411 -0.0166062 / 0.7)",
        "on_bg": "#4D4D4D"
      },
      {
        "hex": "#863D1C",
        "oklch": [
          0.451,
          0.11,
          43
        ],
        "role": "accent",
        "area": 0.0056,
        "uses": {
          "bg": 0,
          "text": 0.998,
          "border": 0.002,
          "fill": 0.001
        },
        "css": "oklch(0.4514 0.11 43)",
        "css_var": "--color-zest-700"
      },
      {
        "hex": "#123A88",
        "oklch": [
          0.373,
          0.138,
          262
        ],
        "role": "other",
        "area": 0.0049,
        "uses": {
          "bg": 0,
          "text": 0.997,
          "border": 0.002,
          "fill": 0.001
        },
        "css": "oklch(0.3729 0.138 262)",
        "css_var": "--color-wave-700"
      },
      {
        "hex": "#A1C2C6",
        "oklch": [
          0.79,
          0.036,
          205.6
        ],
        "role": "other",
        "area": 0.0046,
        "uses": {
          "bg": 0,
          "text": 0.999,
          "border": 0,
          "fill": 0.001
        },
        "css": "oklch(0.79 0.036 205.6)",
        "css_var": "--color-spruce-200"
      },
      {
        "hex": "#0B363B",
        "oklch": [
          0.307,
          0.046,
          206.3
        ],
        "role": "other",
        "area": 0.0041,
        "uses": {
          "bg": 0.707,
          "text": 0,
          "border": 0.282,
          "fill": 0.012
        },
        "css": "oklch(0.3068 0.046 206.34)",
        "css_var": "--color-spruce-700"
      },
      {
        "hex": "#EBEBEB",
        "oklch": [
          0.94,
          0,
          180
        ],
        "role": "border",
        "area": 0.004,
        "uses": {
          "bg": 0.14,
          "text": 0,
          "border": 0.521,
          "fill": 0.339
        },
        "css": "oklch(0.94 0 0)",
        "css_var": "--border"
      },
      {
        "hex": "#CDE3E5",
        "oklch": [
          0.9,
          0.024,
          204.8
        ],
        "role": "other",
        "area": 0.003,
        "uses": {
          "bg": 0,
          "text": 1,
          "border": 0,
          "fill": 0
        },
        "css": "oklch(0.9 0.024 204.8)",
        "css_var": "--color-spruce-100"
      }
    ],
    "roles": {
      "bg": "#FFFFFF",
      "text": "#00262B",
      "muted": "#032125CC",
      "surface": "#FDF0E9",
      "accent": "#863D1C",
      "border": "#EBEBEB"
    },
    "accent_strategy": "dual-accent",
    "contrast": {
      "text_on_bg": 16.82,
      "muted_on_bg": 8.96,
      "accent_on_bg": 7.75
    },
    "gradients": [
      "radial-gradient(circle, oklab(0.228 -0.0319411 -0.0166062 / 0.7) 1px, rgba(0, 0, 0, 0) 1px)"
    ],
    "theme_color": "#ffffff",
    "dark_mode": {
      "responds_to_prefers_color_scheme": false
    },
    "declared_accents": [
      {
        "css_var": "--color-accent",
        "hex": "#866006",
        "painted": true
      },
      {
        "css_var": "--stroke-accent",
        "hex": "#ABFFAE",
        "painted": true
      },
      {
        "css_var": "--surface-accent",
        "hex": "#ABFFAE",
        "painted": true
      },
      {
        "css_var": "--color-on-accent",
        "hex": "#BDFFBD",
        "painted": true
      }
    ],
    "accent_detail": {
      "method": "usage",
      "cta": "#0B363B",
      "candidates": [
        {
          "hex": "#863D1C",
          "css_var": "--color-zest-700",
          "controls": 0,
          "links": 1,
          "text": 8,
          "elements": 10,
          "fills": 1,
          "area": 0.0056,
          "score": 34.8,
          "strong": true
        },
        {
          "hex": "#123A88",
          "css_var": "--color-wave-700",
          "controls": 0,
          "links": 1,
          "text": 8,
          "elements": 10,
          "fills": 1,
          "area": 0.00491,
          "score": 34.7,
          "strong": true
        },
        {
          "hex": "#866006",
          "css_var": "--fg-accent",
          "controls": 0,
          "links": 0,
          "text": 2,
          "elements": 2,
          "fills": 5,
          "area": 0.00017,
          "score": 12.3,
          "strong": false
        },
        {
          "hex": "#ABFFAE",
          "css_var": "--stroke-accent",
          "controls": 0,
          "links": 0,
          "text": 0,
          "elements": 3,
          "fills": 4,
          "area": 0.00038,
          "score": 10.9,
          "strong": false
        },
        {
          "hex": "#B52473",
          "css_var": "--color-highlight-blush",
          "controls": 0,
          "links": 0,
          "text": 1,
          "elements": 1,
          "fills": 0,
          "area": 0.00075,
          "score": 10.4,
          "strong": false
        },
        {
          "hex": "#EB7133",
          "css_var": "--color-highlight-zest",
          "controls": 0,
          "links": 0,
          "text": 1,
          "elements": 1,
          "fills": 0,
          "area": 0.00075,
          "score": 10.4,
          "strong": false
        }
      ]
    },
    "highlights": [
      {
        "hex": "#866006",
        "css_var": "--color-mustard-700",
        "elements": 7
      }
    ]
  },
  "type": {
    "families": [
      {
        "family": "Saans Font",
        "css_family": "saansFont",
        "role": "display",
        "roles": [
          "display",
          "body"
        ],
        "weights": [
          475,
          500,
          600
        ],
        "share": 1,
        "kind": "webfont",
        "classification": "unknown",
        "foundry": null,
        "stack": "saansFont, \"saansFont Fallback\"",
        "files": [
          "https://customer.io/_next/static/media/13d948bc5b1ae448-s.p.woff2"
        ],
        "internal_names": [
          "Saans Light"
        ]
      }
    ],
    "declared_unused": [],
    "scale_px": [
      12,
      14,
      16,
      18,
      20,
      24,
      30,
      40,
      64,
      96
    ],
    "ratio": 1.292,
    "body_size": 16,
    "root_size": 16,
    "line_height": 1.375,
    "display_size": 96,
    "tracking_display": "0.002em",
    "case": "sentence",
    "styles": [
      {
        "name": "display",
        "family": "Saans Font",
        "size_px": 96,
        "weight": 475,
        "line_height": 1,
        "letter_spacing_em": 0.002,
        "sample": "More impact from every"
      },
      {
        "name": "headline",
        "family": "Saans Font",
        "size_px": 40,
        "weight": 475,
        "line_height": 1.125,
        "letter_spacing_em": 0.005,
        "sample": "Everything you need to engage customers"
      },
      {
        "name": "title",
        "family": "Saans Font",
        "size_px": 18,
        "weight": 500,
        "line_height": 1.375,
        "letter_spacing_em": 0.011,
        "sample": "Build automations in a conversation"
      },
      {
        "name": "body",
        "family": "Saans Font",
        "size_px": 16,
        "weight": 475,
        "line_height": 1.375,
        "letter_spacing_em": 0.013,
        "sample": "Optimize each message with insights from"
      },
      {
        "name": "body-sm",
        "family": "Saans Font",
        "size_px": 14,
        "weight": 475,
        "line_height": 1.375,
        "letter_spacing_em": 0.014,
        "sample": "See 10+ new features live, including Age"
      },
      {
        "name": "label",
        "family": "Saans Font",
        "size_px": 16,
        "weight": 600,
        "line_height": 1.375,
        "letter_spacing_em": 0,
        "sample": "Pricing"
      }
    ],
    "mobile": {
      "body_size": 16,
      "display_size": 56
    }
  },
  "space": {
    "scale_px": [
      4,
      6,
      8,
      10,
      12,
      16,
      24,
      32,
      40,
      60,
      64,
      96
    ],
    "base": 4,
    "base_fit": 0.89,
    "density": 0.073,
    "section_padding_px": 161
  },
  "shape": {
    "radii_px": [
      2,
      4,
      9999
    ],
    "dominant_radius": 0,
    "border_usage": "hairline",
    "border_width_px": 1
  },
  "depth": {
    "shadows": [],
    "style": "flat"
  },
  "layout": {
    "container_px": 1320,
    "columns": 12,
    "hero": "left-aligned+media-below",
    "nav": "none-detected",
    "page_height_px": 9016,
    "section_count": 10
  },
  "motion": {
    "transitions": 109,
    "easing": "cubic-bezier(0, 0, 0.35, 1)",
    "durations_ms": [
      200,
      400
    ],
    "animations": [
      "marquee"
    ]
  },
  "components": {
    "button-primary": {
      "backgroundColor": "#0B363B",
      "textColor": "#FFFFFF",
      "rounded": "9999px",
      "padding": "8px 20px",
      "height": "40px",
      "fontFamily": "saansFont",
      "fontSize": "14px",
      "fontWeight": 600,
      "border": "2px solid #0B363B",
      "shadow": "oklch(0.9263 0.136 145.2) 0px 0px 0px 4px",
      "sample": ""
    },
    "button-secondary": {
      "textColor": "#00262B",
      "rounded": "9999px",
      "padding": "8px 20px",
      "height": "40px",
      "fontFamily": "saansFont",
      "fontSize": "14px",
      "fontWeight": 600,
      "border": "2px solid #0B363B",
      "shadow": "oklch(0.97 0 0) 0px 0px 0px 4px",
      "sample": ""
    }
  },
  "imagery": {
    "media_share": 0.276,
    "dominant_colors": [
      {
        "hex": "#032125",
        "share": 0.405
      },
      {
        "hex": "#FBFCF8",
        "share": 0.281
      },
      {
        "hex": "#DFE3E2",
        "share": 0.158
      }
    ],
    "has_photography": null,
    "has_illustration": null
  },
  "stack": [
    "next.js",
    "tailwind",
    "radix-ui",
    "shadcn/ui",
    "sanity",
    "google-tag-manager",
    "vercel"
  ],
  "sections": [
    {
      "index": 0,
      "kind": "banner",
      "kind_source": "dom",
      "confidence": 0.6,
      "bbox": {
        "x": 0,
        "y": 0,
        "w": 1440,
        "h": 48
      },
      "bg": "#032125",
      "crop": "img/section-00-banner.webp"
    },
    {
      "index": 1,
      "kind": "hero",
      "kind_source": "dom",
      "confidence": 0.9,
      "bbox": {
        "x": 0,
        "y": 48,
        "w": 1440,
        "h": 1529
      },
      "heading": "More impact from every",
      "bg": "#FFFFFF",
      "crop": "img/section-01-hero.webp"
    },
    {
      "index": 2,
      "kind": "features",
      "kind_source": "dom",
      "confidence": 0.5,
      "bbox": {
        "x": 0,
        "y": 1577,
        "w": 1440,
        "h": 682
      },
      "heading": "Built for agents, not just humans",
      "bg": "#FFFFFF",
      "crop": "img/section-02-features.webp"
    },
    {
      "index": 3,
      "kind": "features",
      "kind_source": "dom",
      "confidence": 0.5,
      "bbox": {
        "x": 0,
        "y": 2259,
        "w": 1560,
        "h": 863
      },
      "heading": "Everything you need to engage customers",
      "bg": "#FFFFFF",
      "crop": "img/section-03-features.webp"
    },
    {
      "index": 4,
      "kind": "features",
      "kind_source": "dom",
      "confidence": 0.5,
      "bbox": {
        "x": 92,
        "y": 3122,
        "w": 1256,
        "h": 688
      },
      "heading": "Meet your AI Agent",
      "bg": "#FFFFFF",
      "crop": "img/section-04-features.webp"
    },
    {
      "index": 5,
      "kind": "features",
      "kind_source": "dom",
      "confidence": 0.5,
      "bbox": {
        "x": 92,
        "y": 3810,
        "w": 1256,
        "h": 1020
      },
      "heading": "Support every stage of the customer journey",
      "bg": "#FFFFFF",
      "crop": "img/section-05-features.webp"
    },
    {
      "index": 6,
      "kind": "features",
      "kind_source": "dom",
      "confidence": 0.5,
      "bbox": {
        "x": 92,
        "y": 4830,
        "w": 1256,
        "h": 1410
      },
      "heading": "Infrastructure built for teams and the agents that support them",
      "bg": "#00191C",
      "crop": "img/section-06-features.webp"
    },
    {
      "index": 7,
      "kind": "feature-detail",
      "kind_source": "dom",
      "confidence": 0.45,
      "bbox": {
        "x": 60,
        "y": 6240,
        "w": 1320,
        "h": 1288
      },
      "heading": "Trusted to power billions of customer interactions",
      "bg": "#FFFFFF",
      "crop": "img/section-07-feature-detail.webp"
    },
    {
      "index": 8,
      "kind": "logos",
      "kind_source": "dom",
      "confidence": 0.8,
      "bbox": {
        "x": 92,
        "y": 7528,
        "w": 1256,
        "h": 739
      },
      "heading": "Optimize your messaging",
      "bg": "#FFFFFF",
      "crop": "img/section-08-logos.webp"
    },
    {
      "index": 9,
      "kind": "footer",
      "kind_source": "dom",
      "confidence": 0.95,
      "bbox": {
        "x": 0,
        "y": 8266,
        "w": 1440,
        "h": 750
      },
      "bg": "#00191C",
      "crop": "img/section-09-footer.webp"
    }
  ],
  "images": {
    "manifest": "img/manifest.json",
    "count": 14
  },
  "review": {
    "threshold": 0.7,
    "needs_review": [
      "color.accent_strategy",
      "color.roles.accent",
      "layout.columns",
      "layout.hero",
      "layout.section_count",
      "sections[].kind",
      "space.section_padding_px"
    ],
    "vision": "not-run"
  },
  "provenance": {
    "color.roles.bg": {
      "source": "dom",
      "confidence": 0.95
    },
    "color.roles.text": {
      "source": "dom",
      "confidence": 0.92
    },
    "color.roles.muted": {
      "source": "dom",
      "confidence": 0.82
    },
    "color.roles.surface": {
      "source": "dom",
      "confidence": 0.78
    },
    "color.roles.border": {
      "source": "dom",
      "confidence": 0.75
    },
    "color.roles.accent": {
      "source": "dom",
      "confidence": 0.55,
      "note": "most-used chromatic color on controls, links and text",
      "needs_review": true
    },
    "color.accent_strategy": {
      "source": "dom",
      "confidence": 0.6,
      "note": "hue count over chromatic colors; product mockups rendered in the DOM inflate it",
      "needs_review": true
    },
    "color.palette": {
      "source": "dom",
      "confidence": 0.9
    },
    "color.declared_accents": {
      "source": "dom",
      "confidence": 0.95
    },
    "color.dark_mode": {
      "source": "dom",
      "confidence": 0.9
    },
    "color.contrast": {
      "source": "dom",
      "confidence": 0.9
    },
    "color.gradients": {
      "source": "dom",
      "confidence": 0.85
    },
    "type.families": {
      "source": "dom",
      "confidence": 0.95,
      "note": "named from the @font-face rule that rendered (CDP platform fonts)"
    },
    "type.families[].roles": {
      "source": "dom",
      "confidence": 0.85
    },
    "type.declared_unused": {
      "source": "dom",
      "confidence": 0.95
    },
    "type.scale_px": {
      "source": "dom",
      "confidence": 0.9
    },
    "type.body_size": {
      "source": "dom",
      "confidence": 0.85
    },
    "type.display_size": {
      "source": "dom",
      "confidence": 0.85
    },
    "type.styles": {
      "source": "dom",
      "confidence": 0.8
    },
    "type.ratio": {
      "source": "dom",
      "confidence": 0.7,
      "note": "geometric fit over the scale above body size"
    },
    "type.case": {
      "source": "dom",
      "confidence": 0.75
    },
    "type.line_height": {
      "source": "dom",
      "confidence": 0.85
    },
    "type.tracking_display": {
      "source": "dom",
      "confidence": 0.85
    },
    "space.base": {
      "source": "dom",
      "confidence": 0.9,
      "note": "share of paddings/margins/gaps on the base: 0.89"
    },
    "space.scale_px": {
      "source": "dom",
      "confidence": 0.85
    },
    "space.section_padding_px": {
      "source": "dom",
      "confidence": 0.65,
      "needs_review": true
    },
    "space.density": {
      "source": "dom",
      "confidence": 0.85
    },
    "shape.radii_px": {
      "source": "dom",
      "confidence": 0.88
    },
    "shape.dominant_radius": {
      "source": "dom",
      "confidence": 0.8
    },
    "shape.border_usage": {
      "source": "dom",
      "confidence": 0.8
    },
    "depth.shadows": {
      "source": "dom",
      "confidence": 0.9
    },
    "depth.style": {
      "source": "dom",
      "confidence": 0.75
    },
    "layout.container_px": {
      "source": "dom",
      "confidence": 0.8
    },
    "layout.columns": {
      "source": "dom",
      "confidence": 0.6,
      "note": "most common grid track count; layout grids and card grids are not separated",
      "needs_review": true
    },
    "layout.nav": {
      "source": "dom",
      "confidence": 0.78
    },
    "layout.hero": {
      "source": "dom",
      "confidence": 0.6,
      "note": "geometric heuristic over the h1 and nearby media",
      "needs_review": true
    },
    "layout.section_count": {
      "source": "dom",
      "confidence": 0.6,
      "needs_review": true
    },
    "motion": {
      "source": "dom",
      "confidence": 0.8
    },
    "components": {
      "source": "dom",
      "confidence": 0.78
    },
    "stack": {
      "source": "dom",
      "confidence": 0.85,
      "note": "globals, script URLs and response headers"
    },
    "meta": {
      "source": "dom",
      "confidence": 0.99
    },
    "sections[].bbox": {
      "source": "dom",
      "confidence": 0.8
    },
    "sections[].kind": {
      "source": "dom",
      "confidence": 0.62,
      "note": "class-name and content-count heuristics; per-section confidence in sections[].confidence",
      "needs_review": true
    },
    "imagery.media_share": {
      "source": "dom",
      "confidence": 0.8
    },
    "imagery.dominant_colors": {
      "source": "pixels",
      "confidence": 0.7,
      "note": "clustered screenshot pixels inside media boxes (approximate, OKLab ΔE 0.06 clusters)"
    }
  }
}