# Audienceful — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.audienceful.com/
Captured: 2026-11-04
CSS measured: 2026-11-04T08:36:13.456Z at 1440×1000 — https://www.audienceful.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The audienceful.com homepage uses a clean, minimal design aesthetic characterized by generous whitespace, a stark black-and-white base palette, and a vibrant primary blue. A notable design choice is the mix of a clean geometric sans-serif (Inter) with a retro pixel font (w95) for specific display keywords, creating a distinct typographic contrast. The page alternates between light and dark backgrounds to demarcate major sections and relies heavily on high-fidelity app UI mockups, interactive workflow diagrams, and code snippets to demonstrate product capabilities.

## Classification

- Industry: marketing
- Site type: Landing, Blog
- Business model: Software
- Styles: minimal, typographic, retro, app-ui-showcase, alternating-themes
- Platform: WordPress
- Technology: Next.js

## Typography

- Display: w95 — weight 400; size 88.2px; line-height 92.6px; tracking -2.5px; Regular (95% role confidence, computed values)
- Heading: inter — weight 400; size 84px; line-height 88.2px; tracking -2.5px; Regular (95% role confidence, computed values)
- Body: inter — weight 400; size 21px; line-height 31.5px; tracking normal; Regular (90% role confidence, computed values)
- Mono: Unidentified — weight 400; size 12px; line-height 26px; tracking 0.2px; uppercase (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FDFCFC: color-1: computed rgb(253, 252, 252); AI role: The primary light background color (#FDFCFC). (95% role confidence, computed values)
- Canvas — canvas #0B0B0B: color-2: computed rgb(11, 11, 11); AI role: The primary dark background color (#0B0B0B) for alternating sections. (95% role confidence, computed values)
- Text — text #1C1917: color-6: computed rgb(28, 25, 23); AI role: The primary dark text color (#1C1917) on light backgrounds. (95% role confidence, computed values)
- Primary Action — primary action #0062FF: color-30: computed rgb(0, 98, 255); AI role: Vibrant blue (#0062FF) used for primary CTA buttons. (95% role confidence, computed values)
- Muted Text — muted text #777169: color-9: computed rgb(119, 113, 105); AI role: Grey text (#777169) used for secondary descriptions and labels. (85% role confidence, computed values)
- Surface — surface #F5F3F1: color-3: computed rgb(245, 243, 241); AI role: Subtle light grey (#F5F3F1) used for card backgrounds and form fields. (85% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "54px",
    "lineHeight": "58.3px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "h2",
        "text": "All-in-one platform for both humans and agents to run customer messaging.",
        "top": 2339,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "humans",
        "top": 2335,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "agents",
        "top": 2397,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "a",
        "text": "Login",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Start free",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Features",
        "top": 13913,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "112px",
    "lineHeight": "112px",
    "letterSpacing": "-4.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Start for free",
        "top": 13429,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "84px",
    "lineHeight": "88.2px",
    "letterSpacing": "-2.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Agentic Email.",
        "top": 120,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "26px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 14,
    "contexts": [
      {
        "tag": "p",
        "text": "[01]The platform",
        "top": 2201,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "[01]",
        "top": 2207,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "[02]Templates",
        "top": 3481,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "21px",
    "lineHeight": "31.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Campaigns, newsletters, automations, forms and your list live in one app on one subscriber record, s",
        "top": 2484,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Start from a designed email or a proven automation, or ask the agent to adapt one to your brand and ",
        "top": 3763,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "We think our built-in agent is the best, but you're never locked in. Every action is in our API and ",
        "top": 5028,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Orders from Shopify and payments from Stripe are tied back to the campaign or flow that drove them, ",
        "top": 9487,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Merge tags and conditional blocks read order history, plan and custom fields, so one campaign reads ",
        "top": 9487,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Pull products straight from your store into any email: new arrivals, back in stock, or the items lef",
        "top": 9487,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "19px",
    "lineHeight": "27.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "One platform for all Email Campaigns, Marketing Automation, Newsletters, Forms and Transactional mai",
        "top": 231,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Marketing Automation",
        "top": 233,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "14.5px",
    "lineHeight": "23.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Branching flows triggered by signups, events, purchases and engagement. Start from a template or bui",
        "top": 3039,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "13.5px",
    "lineHeight": "20.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Wire up our transactional email over MCP, same look as the marketing emails.",
        "top": 5365,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Win back everyone who’s gone quiet in the last 90 days.",
        "top": 1555,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "13px",
    "lineHeight": "20.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Done. I drafted a win-back in your voice for 1,284 people, ready for Tuesday morning.",
        "top": 1629,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "12.5px",
    "lineHeight": "18.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "Ask the agent anything…",
        "top": 1832,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Email revenue · 30 days",
        "top": 9126,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Abandoned cart",
        "top": 9164,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "span",
        "text": "Shopify",
        "top": 6878,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Stripe",
        "top": 6878,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "WooCommerce",
        "top": 6878,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "12.5px",
    "lineHeight": "18.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Payment receipt",
        "top": 5792,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Magic sign-in link",
        "top": 5792,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Shipping notice",
        "top": 5853,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "400",
    "size": "11.5px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Hi {{ first_name | default: \"there\" }},",
        "top": 9107,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "{{ first_name | default: \"there\" }}",
        "top": 9109,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "if orders_count > 1",
        "top": 9144,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "12,480 sent this month",
        "top": 5810,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "21,340 sent this month",
        "top": 5810,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "8,205 sent this month",
        "top": 5872,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Set up a full year of email campaigns in minutes.",
        "top": 5303,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Build 25+ automations to cover your whole customer lifecycle.",
        "top": 5389,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Turn rough notes into a polished newsletter.",
        "top": 5498,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Set up a full year",
        "top": 5304,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Build 25+ automations",
        "top": 5390,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Turn rough notes",
        "top": 5499,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Platform",
        "top": 11,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Solutions",
        "top": 11,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Integrations",
        "top": 11,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "w95",
    "fontStack": "w95, \"w95 Fallback\"",
    "weight": "400",
    "size": "56.7px",
    "lineHeight": "61.2px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "All-in-one platform",
        "top": 2343,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Gorgeous",
        "top": 3623,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Go full autonomous.",
        "top": 4888,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "20px",
    "lineHeight": "30px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Revenue tracking",
        "top": 9449,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Dynamic content",
        "top": 9449,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Shopify product feeds",
        "top": 9449,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Trigger",
        "top": 8800,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Audienceful agent",
        "top": 8647,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Send · welcome, 10% off",
        "top": 8552,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "maya@northwind.co · accepts marketing",
        "top": 8714,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Founder, ReallyGoodEmails.com",
        "top": 13076,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Chief Digital Officer, Athletic Greens",
        "top": 13076,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "450",
    "size": "46px",
    "lineHeight": "46px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "99.7%",
        "top": 12747,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "32%",
        "top": 12747,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "100s",
        "top": 12747,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“Holy sh*t this is fantastic… I'm really impressed so far. You all have built something special here",
        "top": 12899,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "“I love products like Audienceful. It hints at a better future, connecting creatives with richer wor",
        "top": 12899,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "“So much easier to use… has already saved us hundreds of hours.”",
        "top": 12899,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "450",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Matthew (@Whale)",
        "top": 13055,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Kelly Smith",
        "top": 13055,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Andy Karp",
        "top": 13055,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "1,000 subscribers free, forever",
        "top": 13672,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "·",
        "top": 13672,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "No credit card",
        "top": 13672,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "15.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "→ add to subscribers",
        "top": 8519,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "→ tag new-customer",
        "top": 8886,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "→ pick theme: Brand",
        "top": 8764,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
    "weight": "400",
    "size": "12.5px",
    "lineHeight": "21.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "pre",
        "text": "{ \"email\": \"jane@acme.com\", \"event\": \"order_shipped\", \"properties\": { \"order_id\": \"4821\", \"carrier\":",
        "top": 5501,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "order_shipped",
        "top": 5563,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Schedule",
        "top": 1772,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Edit",
        "top": 1772,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "400",
    "size": "11.5px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "POST /v2/events",
        "top": 5471,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "202 · delivered in 1.2s",
        "top": 5471,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "11.5px",
    "lineHeight": "17.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "All on Brand theme",
        "top": 5748,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "24/7 checks",
        "top": 11371,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Send email",
        "top": 1699,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Output",
        "top": 8935,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "w95f",
    "fontStack": "w95f, monospace",
    "weight": "400",
    "size": "180px",
    "lineHeight": "270px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "text",
        "text": "audienceful",
        "top": 14785,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "w95",
    "fontStack": "w95, \"w95 Fallback\"",
    "weight": "400",
    "size": "117.6px",
    "lineHeight": "117.6px",
    "letterSpacing": "-4.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Start",
        "top": 13435,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "w95",
    "fontStack": "w95, \"w95 Fallback\"",
    "weight": "400",
    "size": "88.2px",
    "lineHeight": "92.6px",
    "letterSpacing": "-2.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Agentic",
        "top": 126,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "$36,635",
        "top": 9119,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "17px",
    "lineHeight": "25.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "audienceful",
        "top": 15,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial",
    "weight": "500",
    "size": "13.5px",
    "lineHeight": "20.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "We saved your spot",
        "top": 1720,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FDFCFC",
    "alpha": 1,
    "cssValue": "rgb(253, 252, 252)",
    "count": 17,
    "contexts": [
      {
        "tag": "nav",
        "text": "audiencefulPlatformSolutionsIntegrationsResourcesPricingLoginStart freeAI Email MarketingCollaborate",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Agentic Email.One platform for all Email Campaigns, Marketing Automation, Newsletters, Forms and Tra",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Agentic Email.One platform for all Email Campaigns, Marketing Automation, Newsletters, Forms and Tra",
        "top": 56,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#0B0B0B",
    "alpha": 1,
    "cssValue": "rgb(11, 11, 11)",
    "count": 9,
    "contexts": [
      {
        "tag": "section",
        "text": "[04]IntegrationsDeep integrations and flows that build themselves, and track revenue. Orders, carts,",
        "top": 6201,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F5F3F1",
    "alpha": 1,
    "cssValue": "rgb(245, 243, 241)",
    "count": 29,
    "contexts": [
      {
        "tag": "p",
        "text": "Win back everyone who’s gone quiet in the last 90 days.",
        "top": 1555,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Send emailWe saved your spotGone quiet · 1,284 · Tue 9:00 AMScheduleEdit",
        "top": 1685,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Set up a full year of email campaigns in minutes.",
        "top": 5276,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 62,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Audienceful\",\"url\":\"https://www.audi",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Login",
        "top": 12,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "Try it for free",
        "top": 318,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6975,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#1C1917",
    "alpha": 1,
    "cssValue": "rgb(28, 25, 23)",
    "count": 65,
    "contexts": [
      {
        "tag": "a",
        "text": "Login",
        "top": 12,
        "property": "text"
      },
      {
        "tag": "h1",
        "text": "Agentic Email.",
        "top": 120,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Agentic",
        "top": 126,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 8,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      },
      {
        "tag": "line",
        "text": "",
        "top": 8631,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F6F7FB",
    "alpha": 1,
    "cssValue": "rgb(246, 247, 251)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5276,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#777169",
    "alpha": 1,
    "cssValue": "rgb(119, 113, 105)",
    "count": 60,
    "contexts": [
      {
        "tag": "p",
        "text": "One platform for all Email Campaigns, Marketing Automation, Newsletters, Forms and Transactional mai",
        "top": 231,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Marketing Automation",
        "top": 233,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Gone quiet · 1,284 · Tue 9:00 AM",
        "top": 1742,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFF",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(255, 255, 255, 0.08)",
    "count": 2,
    "contexts": [
      {
        "tag": "text",
        "text": "audienceful",
        "top": 14785,
        "property": "text"
      },
      {
        "tag": "text",
        "text": "audienceful",
        "top": 14785,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#A59F97",
    "alpha": 1,
    "cssValue": "rgb(165, 159, 151)",
    "count": 53,
    "contexts": [
      {
        "tag": "div",
        "text": "Send email",
        "top": 1699,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "[01]The platform",
        "top": 2201,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "[01]",
        "top": 2207,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#0B0B0B",
    "alpha": 0.8,
    "cssValue": "oklab(0.149577 -1.49012e-8 7.45058e-9 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "const event = await audienceful.events.get(id) const person = await audienceful.people.get(event.ema",
        "top": 8458,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 0.5490196078431373,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.55)",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Orders, carts, subscriptions and plan changes arrive from your store and billing as events. Segment ",
        "top": 6532,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.03137254901960784,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.03)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Email revenue · 30 days$36,635Abandoned cart$18,420Black Friday · day 1$11,905Welcome series$6,310",
        "top": 9102,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.2196078431372549,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.22)",
    "count": 1,
    "contexts": [
      {
        "tag": "pre",
        "text": "const event = await audienceful.events.get(id) const person = await audienceful.people.get(event.ema",
        "top": 8458,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#18181B",
    "alpha": 1,
    "cssValue": "rgb(24, 24, 27)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "POST /v2/events202 · delivered in 1.2s{ \"email\": \"jane@acme.com\", \"event\": \"order_shipped\", \"propert",
        "top": 5460,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Transactional templates",
        "top": 5746,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.0392156862745098,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.04)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "WelcomeBrowsedAbandoned cartPost-purchaseReview requestReorderBack in stockTrial endingFailed paymen",
        "top": 8389,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.8,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)",
    "count": 2,
    "contexts": [
      {
        "tag": "pre",
        "text": "{ \"email\": \"jane@acme.com\", \"event\": \"order_shipped\", \"properties\": { \"order_id\": \"4821\", \"carrier\":",
        "top": 5501,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "maya@northwind.co · accepts marketing",
        "top": 8714,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#6E6E6E",
    "alpha": 1,
    "cssValue": "rgb(110, 110, 110)",
    "count": 58,
    "contexts": [
      {
        "tag": "a",
        "text": "Email Marketing",
        "top": 13953,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.45098039215686275,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.45)",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "[04]Integrations",
        "top": 6250,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "[04]",
        "top": 6256,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "$349",
        "top": 9260,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#000000",
    "alpha": 0.7019607843137254,
    "cssValue": "oklab(0 0 0 / 0.7)",
    "count": 3,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“Holy sh*t this is fantastic… I'm really impressed so far. You all have built something special here",
        "top": 12899,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#221111",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(28, 25, 23, 0.06)",
    "count": 50,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 56,
        "property": "border"
      },
      {
        "tag": "section",
        "text": "",
        "top": 1967,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1968,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.5)",
    "count": 15,
    "contexts": [
      {
        "tag": "button",
        "text": "Browsed",
        "top": 8393,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Shopify",
        "top": 8670,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#000000",
    "alpha": 0.0392156862745098,
    "cssValue": "oklab(0 0 0 / 0.04)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Email templatesForm templatesPopup templatesLanding templatesAutomation templates",
        "top": 3999,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FFFFFF",
    "alpha": 0.07058823529411765,
    "cssValue": "rgba(255, 255, 255, 0.07)",
    "count": 33,
    "contexts": [
      {
        "tag": "section",
        "text": "[04]IntegrationsDeep integrations and flows that build themselves, and track revenue. Orders, carts,",
        "top": 6201,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "[04]IntegrationsDeep integrations and flows that build themselves, and track revenue. Orders, carts,",
        "top": 6202,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "Shopify",
        "top": 6780,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.6980392156862745,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Output",
        "top": 8935,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 9409,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 9411,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FFFFFF",
    "alpha": 0.7490196078431373,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.75)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Space Jacket",
        "top": 9242,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "rgb(26, 26, 26)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Shopifyjust nowcustomer.createdmaya@northwind.co · accepts marketing",
        "top": 8657,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.6)",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "POST /v2/events",
        "top": 5471,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 6830,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 6831,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#0062FF",
    "alpha": 1,
    "cssValue": "rgb(0, 98, 255)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Start free",
        "top": 12,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#262626",
    "alpha": 0.6,
    "cssValue": "oklab(0.268617 0.000012286 0.00000536442 / 0.6)",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "Platform",
        "top": 11,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 21,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 26,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#000000",
    "alpha": 0.45098039215686275,
    "cssValue": "oklab(0 0 0 / 0.45)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "12,480 sent this month",
        "top": 5810,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#262626",
    "alpha": 1,
    "cssValue": "rgb(38, 38, 38)",
    "count": 8,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#737373",
    "alpha": 1,
    "cssValue": "oklch(0.556 0 0)",
    "count": 6,
    "contexts": [
      {
        "tag": "button",
        "text": "View all ↓",
        "top": 14425,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Browse all →",
        "top": 14411,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "© 2021–2026 Audienceful",
        "top": 14713,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#009966",
    "alpha": 1,
    "cssValue": "oklch(0.596 0.145 163.225)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "24/7 checks",
        "top": 11371,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 11415,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 11419,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.4)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "if orders_count > 1",
        "top": 9144,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0 0 0 / 0.1)",
    "count": 12,
    "contexts": [
      {
        "tag": "img",
        "text": "",
        "top": 991,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "POST /v2/events202 · delivered in 1.2s{ \"email\": \"jane@acme.com\", \"event\": \"order_shipped\", \"propert",
        "top": 5460,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#000000",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0 0 0 / 0.5)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Founder, ReallyGoodEmails.com",
        "top": 13076,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#00D492",
    "alpha": 1,
    "cssValue": "oklch(0.765 0.177 163.223)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "202 · delivered in 1.2s",
        "top": 5471,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 5477,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#A1A1A1",
    "alpha": 1,
    "cssValue": "oklch(0.708 0 0)",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "Contact us:",
        "top": 14713,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Sales",
        "top": 14707,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 14715,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#000000",
    "alpha": 0.058823529411764705,
    "cssValue": "oklab(0 0 0 / 0.06)",
    "count": 26,
    "contexts": [
      {
        "tag": "div",
        "text": "Payment receipt12,480 sent this month",
        "top": 5783,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 11547,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#10B981",
    "alpha": 1,
    "cssValue": "rgb(16, 185, 129)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "customer.created",
        "top": 8692,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 8779,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.1)",
    "count": 15,
    "contexts": [
      {
        "tag": "div",
        "text": "POST /v2/events202 · delivered in 1.2s",
        "top": 5461,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#000000",
    "alpha": 0.0784313725490196,
    "cssValue": "oklab(0 0 0 / 0.08)",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Wire up our transactional email over MCP, same look as the marketing emails.",
        "top": 5365,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Transactional templatesAll on Brand themePayment receipt12,480 sent this monthMagic sign-in link21,3",
        "top": 5725,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.15)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Shopifyjust nowcustomer.createdmaya@northwind.co · accepts marketing",
        "top": 8657,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#635BBD",
    "alpha": 1,
    "cssValue": "rgb(99, 91, 189)",
    "count": 6,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 3636,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 3636,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 3638,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#FAFAFA",
    "alpha": 1,
    "cssValue": "rgb(250, 250, 250)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Start free",
        "top": 12,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#00BC7D",
    "alpha": 1,
    "cssValue": "oklch(0.696 0.17 162.48)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "All on Brand theme",
        "top": 5748,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 5754,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical padding (often 100px+) separating major sections, creating a relaxed pacing.
- Corner style: Rounded corners are applied consistently across buttons, UI mockups, and content cards.
- Radius: Large radii for pill-shaped buttons; moderate radii (approx 8-16px) for feature cards and floating UI panels.
- Borders: Most elements are borderless relying on contrast, but subtle 1px borders are used in dark mode sections and on some outline buttons.
- Buttons: Pill-shaped with solid primary fills or transparent backgrounds with subtle borders.
- Content width: Centered max-width container, but UI graphics are allowed to bleed wider than the text columns.
- Density: Low density, utilizing ample whitespace to draw focus to large typography and intricate product visuals.
- Evidence: Observed via DOM/CSS facts and layout structure in provided screenshots.

## Sections

Gallery section count: 15. Each entry corresponds to one gallery capture.

1. **Navbar — Audienceful Navbar** (Home)
   Logo left, grouped dropdown links centre and a single filled sign-up button right keep the main action clear without crowding.
   Capture: 1440×56px; page bounds 0–56px of 15021px; source section ID: `760c3282-9ea5-4a14-afc4-4b231ce6b948`; image: https://media.designdetails.io/library/010d62f97626414233d4c4cee639d2d1be04acd59bdc6eb8c1eb561b5eb16681/760c3282-9ea5-4a14-afc4-4b231ce6b948.webp
   SECTION.md v3.2: `760c3282-9ea5-4a14-afc4-4b231ce6b948` (deterministic evidence; editorial review pending)
2. **Hero — Centered headline over product collage** (Home)
   A large pixel-style headline and one blue button sit above a collage of email designs and editor UI that shows the product immediately.
   Capture: 1440×1911px; page bounds 56–1967px of 15021px; source section ID: `0c75f437-67f5-4ca0-8645-f05afa109dc1`; image: https://media.designdetails.io/library/80187936abbe0c36bd06283f8ffca43679d39d39507f28ce2a3c26549452b264/0c75f437-67f5-4ca0-8645-f05afa109dc1.webp
   SECTION.md v3.2: `0c75f437-67f5-4ca0-8645-f05afa109dc1` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Single row of customer logos** (Home)
   Muted grey logos in evenly divided cells add credibility right after the hero without pulling attention from the message.
   Capture: 1440×185px; page bounds 1967–2152px of 15021px; source section ID: `49207cc8-fabc-45f3-87ea-b041031510fd`; image: https://media.designdetails.io/library/5ca5b15a3aea57c3353b1dc73cf404ba802a0f9af4182415ae0ca6af01472f46/49207cc8-fabc-45f3-87ea-b041031510fd.webp
   SECTION.md v3.2: `49207cc8-fabc-45f3-87ea-b041031510fd` (deterministic evidence; editorial review pending)
4. **Features — Feature list beside product screenshot** (Home)
   A stacked list of capabilities sits beside a table screenshot, so visitors scan the scope and see the real interface together.
   Capture: 1440×1280px; page bounds 2152–3432px of 15021px; source section ID: `ad435116-1216-4e15-aaca-c8145b54513b`; image: https://media.designdetails.io/library/be058f5bfe68e7dca9d6943dc96a0cadf8616e73317b57c0ab536af097b550ce/ad435116-1216-4e15-aaca-c8145b54513b.webp
   SECTION.md v3.2: `ad435116-1216-4e15-aaca-c8145b54513b` (deterministic evidence; editorial review pending)
5. **Gallery — Template carousel with category tabs** (Home)
   Pill tabs filter a row of tall, varied email designs, letting visitors judge quality and range at a glance.
   Capture: 1440×1265px; page bounds 3432–4697px of 15021px; source section ID: `ff8a2b33-36d2-4990-b7be-81e51c7cb015`; image: https://media.designdetails.io/library/4a42ee847fa6c8db300df086983e4159d4a785114d83f78934a946119feca3f8/ff8a2b33-36d2-4990-b7be-81e51c7cb015.webp
   SECTION.md v3.2: `ff8a2b33-36d2-4990-b7be-81e51c7cb015` (deterministic evidence; editorial review pending)
6. **Features — Task list beside report preview** (Home)
   Short outcome-led tasks on the left pair with a weekly report card on the right to show what the agent delivers.
   Capture: 1440×1311px; page bounds 4697–6008px of 15021px; source section ID: `66a41342-92d2-488e-81f1-2360d107dfb1`; image: https://media.designdetails.io/library/74ac34cc5a24edffd506805075a6e19de99b53637acf7337ce4fd15fe3bf5e84/66a41342-92d2-488e-81f1-2360d107dfb1.webp
   SECTION.md v3.2: `66a41342-92d2-488e-81f1-2360d107dfb1` (deterministic evidence; editorial review pending)
7. **Logo Cloud — Integration logos in dark grid** (Home)
   Labelled platform icons in evenly spaced cells show compatible tools fast, ending with a view-all link.
   Capture: 1440×761px; page bounds 6201–6962px of 15021px; source section ID: `cb3379ca-2ea1-4b3c-8fb1-f62f3cc7c316`; image: https://media.designdetails.io/library/f3b07f1942706207edfdf3c506c2a68b3301c06256e8d1e51ffc5d7d97e9a3a4/cb3379ca-2ea1-4b3c-8fb1-f62f3cc7c316.webp
   SECTION.md v3.2: `cb3379ca-2ea1-4b3c-8fb1-f62f3cc7c316` (deterministic evidence; editorial review pending)
8. **Dashboard — Dark automation flow builder screen** (Home)
   A full-width dark screenshot of a node canvas with a sidebar and stats panel shows the product's depth and keeps the dark theme.
   Capture: 1440×960px; page bounds 6962–7922px of 15021px; source section ID: `3c7dffa9-c0f6-4276-a25c-7f12f01b725e`; image: https://media.designdetails.io/library/199113b3a74168e919f197c6bf7925791f5658b11d870be913b4133dc59c6bcb/3c7dffa9-c0f6-4276-a25c-7f12f01b725e.webp
   SECTION.md v3.2: `3c7dffa9-c0f6-4276-a25c-7f12f01b725e` (deterministic evidence; editorial review pending)
9. **Process — Tabbed flow diagram of triggers** (Home)
   Scenario tabs above a node diagram trace a trigger through the agent to its outputs, making the automation logic visible.
   Capture: 1440×1058px; page bounds 7922–8980px of 15021px; source section ID: `aae9c7e9-2d9b-4b7c-aaab-ae556658b60c`; image: https://media.designdetails.io/library/a96b79ba82ee79fb33b39dd768d253f7dcb9a7d93013a147f968f0f14591877d/aae9c7e9-2d9b-4b7c-aaab-ae556658b60c.webp
   SECTION.md v3.2: `aae9c7e9-2d9b-4b7c-aaab-ae556658b60c` (deterministic evidence; editorial review pending)
10. **Features — Three dark cards with visuals** (Home)
   Each card pairs a small UI illustration with an icon, title and short text, so three capabilities read in parallel.
   Capture: 1440×663px; page bounds 8980–9643px of 15021px; source section ID: `426a5ff9-ede1-40d4-9b3b-c3ae8c495056`; image: https://media.designdetails.io/library/02821cb974542bf8843ce243d6013c1a6dcc3e171b4d9d9d6857383e1e183967/426a5ff9-ede1-40d4-9b3b-c3ae8c495056.webp
   SECTION.md v3.2: `426a5ff9-ede1-40d4-9b3b-c3ae8c495056` (deterministic evidence; editorial review pending)
11. **Dashboard — Deliverability analytics dashboard screenshot** (Home)
   A bright analytics screen with health gauges, metric tiles and a trend chart proves monitoring is built in and easy to read.
   Capture: 1440×1424px; page bounds 9836–11260px of 15021px; source section ID: `e30e031a-784c-4681-90cf-34018f0fe4d4`; image: https://media.designdetails.io/library/cab94f12056424da56bed91cf3642c60effb4a010c716f3e854cb075bbe9eb76/e30e031a-784c-4681-90cf-34018f0fe4d4.webp
   SECTION.md v3.2: `e30e031a-784c-4681-90cf-34018f0fe4d4` (deterministic evidence; editorial review pending)
12. **Features — Three pastel feature cards** (Home)
   Soft gradient cards pair mini UI visuals with short titles and descriptions to explain scale, repair and API in parallel.
   Capture: 1440×675px; page bounds 11260–11935px of 15021px; source section ID: `f3d27cf7-8982-4639-8a83-b84a23e08a24`; image: https://media.designdetails.io/library/12983e6d3f0b3e5250d5fb58cd82fc8ae9811cb4daf6e90a5cb48ee79841fc05/f3d27cf7-8982-4639-8a83-b84a23e08a24.webp
   SECTION.md v3.2: `f3d27cf7-8982-4639-8a83-b84a23e08a24` (deterministic evidence; editorial review pending)
13. **Testimonials — Photo cards with stats and quotes** (Home)
   Large photos with overlaid result numbers sit above short quotes with names and roles, joining evidence to credible voices.
   Capture: 1440×1204px; page bounds 11935–13139px of 15021px; source section ID: `c0ccfe53-cc22-47df-81aa-2c0a14c3923f`; image: https://media.designdetails.io/library/2d290c0990a79da2704f31cf2594a4a5704e513d00610648ab2d3de0515aca9a/c0ccfe53-cc22-47df-81aa-2c0a14c3923f.webp
   SECTION.md v3.2: `c0ccfe53-cc22-47df-81aa-2c0a14c3923f` (deterministic evidence; editorial review pending)
14. **CTA — Dark closing call to action** (Home)
   A big pixel headline, one blue button and a small line about free limits make the final ask simple and risk-free.
   Capture: 1440×709px; page bounds 13139–13848px of 15021px; source section ID: `a7a912b6-37b6-4d96-9754-6511741ee55a`; image: https://media.designdetails.io/library/2e41fafea877645c01ed61e0036ddb6a4ab4df53410761b8d34b739881a83d95/a7a912b6-37b6-4d96-9754-6511741ee55a.webp
   SECTION.md v3.2: `a7a912b6-37b6-4d96-9754-6511741ee55a` (deterministic evidence; editorial review pending)
15. **Footer — Multi-column footer with large wordmark** (Home)
   Grouped link columns cover features, integrations, comparisons and resources, while a giant pixel wordmark closes the page with brand presence.
   Capture: 960×600px; page bounds 13848–15021px of 15021px; source section ID: `942eac5c-13af-443c-84f1-00f5ca19f60c`; image: https://media.designdetails.io/library/b523504529898939bc295a4ee546fa3dbba6e14e037850ad290ae2b1bda8766a/942eac5c-13af-443c-84f1-00f5ca19f60c.webp
   SECTION.md v3.2: `942eac5c-13af-443c-84f1-00f5ca19f60c` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/ecc4fa54494a03f4dc459e7c81c352604189d70a97e6d7c9279434f68803dbb2/desktop_full-92f64d5a-2026-11-04T08-36-13-495Z.webp
- Mobile screenshot: https://media.designdetails.io/library/baf3fbaba1c8c098870d98b79927a98899beb20c45d056b4c32a70a4756f6822/mobile_full-92f64d5a-2026-11-04T08-36-56-587Z.jpg
- Open Graph image: https://media.designdetails.io/library/5697c37ad84506d4f647eaead4f73738b3ce5f519e2c5fef7e00c162fe477342/og_image-92f64d5a-2026-11-04T08-36-21-628Z.webp
- Full-page video: https://media.designdetails.io/library/40bb33b2dc3fdd0ae605db45ca5f37a58d6bbf7df7c82969c2907cd2b1c01e71/motion-1793782946954.mp4
- Video poster: https://media.designdetails.io/library/7f054051b396c3ad05543d68d92fbadf83f104b6c0b103ff9b89556562df5db2/motion-poster-1793782946954.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Primary Button
- Outline Button
- Feature Card
- Testimonial Card
- Logo Strip
- Footer
- UI Mockup Collage
- Workflow Node Diagram
- Section Numbering

## Quality rubric

Overall: 57.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Audienceful's homepage is a well-assembled, professional SaaS marketing page: a warm neutral palette anchored by a single blue CTA, a consistent numbered-section/alternating-background structure, and extensive, specific product UI mockups that ground feature claims in believable detail. Typography pairs a clean Inter scale with a retro pixel font for accent words, executed consistently across many instances. Where it falls short of a higher tier is originality — the pixel-font contrast, node-and-line integration diagrams, bracketed section numbering, and sticky feature sidebar are all now-common conventions in contemporary AI/dev-tool marketing sites rather than a distinctive invented system — and motion, where the available evidence shows standard scroll-triggered reveals and background transitions without confirmation of refined interaction craft. The result is a competent, content-rich execution within a familiar idiom rather than a design that pushes beyond it.

- Typography (15%): 61 — A deliberate two-voice system pairs a clean Inter scale (54–112px headings, 21px lead paragraphs, 12px monospace section tags) with a retro pixel display font (w95) reserved for a handful of keywords per section. Sizing is consistent and intentional (negative tracking on large display sizes, uniform 12px uppercase mono for [0x] labels), giving real hierarchy across dozens of distinct type roles. The pixel-font accent is a now-familiar SaaS trope rather than a bespoke solution, and some body copy sizes proliferate (15px, 15.5px, 14.5px, 13.5px) without an obviously systematized scale.
- Color (10%): 64 — A warm off-white/near-black base (#FDFCFC, #0B0B0B) with warm greys (#777169, #A59F97) avoids a sterile grayscale feel, and a single saturated blue (#0062FF) is reserved exclusively for primary CTAs, giving clear action affordance. Dark sections use believable near-black panels with low-alpha white borders/text for depth. Status greens (#00D492, #10B981, #009966) are used consistently inside UI mockups to signal 'success/live' states. The palette is restrained and purposeful, though fairly conventional for the SaaS genre and leans on product-mockup colors (varying brand colors inside screenshots) for most of its visual richness rather than an authored palette.
- Layout (20%): 66 — The page runs a clear structural system: numbered sections ([01]–[07]), alternating light/dark backgrounds, a sticky feature sidebar synced to scrolling content, a horizontally-scrolling template strip inside a vertical page, and workflow-diagram and dashboard panels that bleed wider than the text column. Content width is consistently centered with generous vertical rhythm (100px+ section padding) and card-grids (testimonials, integrations, feature tiles) recur with consistent radius and spacing tokens. This is a coherent, multi-section system rather than a single hero trick, though the component vocabulary (card + mockup + CTA) repeats fairly uniformly across sections without much structural variation.
- Motion (20%): 52 — Gemini's recording documents several scroll-triggered behaviors — staggered hero mockup settling, a sticky sidebar with content swap, a horizontally-sliding template row, and smooth light-to-dark background transitions — but the actual captured frames at close timestamps (1.8s vs 2.4s) show largely identical hero states, and no hover/interaction frames are available to confirm responsiveness, easing quality, or restraint. The breadth of scroll-linked moments suggests an above-average motion budget for a marketing site, but nothing here demonstrates refined timing, easing curves, or interaction-level craft beyond standard reveal-on-scroll patterns common to this product category.
- Originality (25%): 45 — The core visual moves — a pixel/monospace accent font layered onto a clean sans headline system, numbered section tags, node-and-line workflow diagrams, sticky feature sidebars, and alternating light/dark sections — are now widely recognized conventions across contemporary AI/dev-tool SaaS marketing sites. Execution is competent and the UI-mockup-forward approach fits the product (an email platform) logically, but there is no single hard-to-substitute idea here that couldn't be swapped for another vendor's template; the pattern library is borrowed rather than invented.
- Content (10%): 69 — Content and design are tightly fused: the page substitutes abstract feature claims for believable, detailed product UI (people tables, workflow builder, dashboards, code/API snippets, transactional email previews) that double as both proof and visual interest. Specific, concrete metrics (99.7% delivery, 32% revenue increase, $36,635 email revenue) and named integrations (Shopify, Stripe, WooCommerce) ground the marketing copy in verifiable detail rather than vague superlatives, and testimonials carry named attributions and titles.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A pixel-style headline sits above a fanned row of glossy email templates, instantly showing the range of designs the tool can produce rather than describing it. Light grey backgrounds and a dark editor panel with an open chat box break up the long page into clear chapters, letting visitors scan features while trusting the real product screens over generic icons.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.