# Artie — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.artie.com/
Captured: 2026-11-06
CSS measured: 2026-11-06T09:25:27.551Z at 1440×1000 — https://www.artie.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 site exhibits a modern, clean, and corporate aesthetic with geometric and gradient embellishments. It relies on a light gray canvas with white surfaces, using a structured grid for feature cards and mockups. The typography pairs a distinctive serif for display and headings with a clean sans-serif for body copy and UI elements. Geometric shapes with soft gradients provide visual interest without overwhelming the content.

## Classification

- Industry: developer-tools
- Site type: Landing, Blog
- Business model: Software
- Styles: minimal, geometric, gradient, corporate, ambient-ui
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: arizonaMix — weight 400; size 56px; line-height 59.9px; tracking -2px; Regular (100% role confidence, computed values)
- Heading: arizonaMix — weight 400; size 48px; line-height 51.8px; tracking -1.4px; Regular (100% role confidence, computed values)
- Body: saans — weight 420; size 18px; line-height 27px; tracking 0.3px; Regular (100% role confidence, computed values)
- Mono: saansMono — weight 400; size 13px; line-height 19.5px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Surface — surface #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White #FFFFFF used for cards, the navigation bar, and UI mockups. (100% role confidence, computed values)
- Primary Action — primary action #047454: color-6: computed rgb(4, 116, 84); AI role: Dark green #047454 used for primary CTA buttons. (100% role confidence, computed values)
- Canvas — canvas #F5F5F5: color-2: computed rgb(245, 245, 245); AI role: Light gray #F5F5F5 used as the primary background for the page body. (95% role confidence, computed values)
- Text — text #241D18: color-5: computed rgb(36, 29, 24); AI role: Dark #241D18 used for primary headings and high-contrast text. (95% role confidence, computed values)
- Muted Text — muted text #5B5048: color-9: computed rgb(91, 80, 72); AI role: Lighter #5B5048 used for body paragraphs and secondary UI text. (90% 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": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h3",
        "text": "Data replication",
        "top": 3076,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "New Managed Kafka",
        "top": 3076,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "01The destination matches production in real time.",
        "top": 4117,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "51.8px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "h2",
        "text": "The promises behind the pipeline.",
        "top": 3396,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Built for the data stackyou already run.",
        "top": 4530,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Get your data streaming in 3 steps",
        "top": 5134,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "32.2px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h4",
        "text": "Connect your source",
        "top": 5310,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Choose tables to replicate",
        "top": 5549,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Deploy and stream",
        "top": 5789,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "33.6px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Runs where your data lives",
        "top": 7459,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "You hear about it first",
        "top": 7597,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Fits how you already work",
        "top": 7712,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "400",
    "size": "56px",
    "lineHeight": "59.9px",
    "letterSpacing": "-2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Your production data, streamed in real time.",
        "top": 233,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Products",
        "top": 2772,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 23,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 709,
        "property": "font"
      },
      {
        "tag": "td",
        "text": "started rebalancing Kafka cluster prod-events",
        "top": 1459,
        "property": "font"
      },
      {
        "tag": "td",
        "text": "Artie",
        "top": 1459,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "p",
        "text": "Artie streams every change from your production databases to Snowflake, BigQuery, Iceberg, and more.",
        "top": 369,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Managed CDC for production databases. Every insert, update, and delete lands in Snowflake, BigQuery,",
        "top": 3123,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Apache Kafka on AWS for half the cost of MSK. We replace failed brokers, grow disks, and roll out up",
        "top": 3123,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "420",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "12",
        "top": 918,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "8",
        "top": 918,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "3",
        "top": 918,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "20px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "11 streaming, 1 paused",
        "top": 942,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "No active alerts",
        "top": 942,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "All delivering",
        "top": 942,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Pipelines",
        "top": 884,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Monitors",
        "top": 884,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Webhooks",
        "top": 884,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Product",
        "top": 9518,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Platform",
        "top": 9518,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Resources",
        "top": 9518,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "1 pipeline has undeployed changes.",
        "top": 824,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1 pipeline",
        "top": 825,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "380",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Good afternoon, Sam",
        "top": 787,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "380",
    "size": "32px",
    "lineHeight": "36px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "215.2M",
        "top": 1052,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Recent activity",
        "top": 1388,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Real-time CDC from your production database to your warehouse.",
        "top": 9582,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "32px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Rows processed",
        "top": 1021,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "13px",
    "lineHeight": "18.9px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 110,
    "contexts": [
      {
        "tag": "span",
        "text": "Streaming",
        "top": 2916,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Streaming",
        "top": 2946,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Backfilling",
        "top": 2976,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "13px",
    "lineHeight": "18.9px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 70,
    "contexts": [
      {
        "tag": "span",
        "text": "PostgreSQL · 42 tables",
        "top": 2840,
        "property": "font"
      },
      {
        "tag": "th",
        "text": "Table",
        "top": 2876,
        "property": "font"
      },
      {
        "tag": "th",
        "text": "Status",
        "top": 2876,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "14px",
    "lineHeight": "20.3px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 58,
    "contexts": [
      {
        "tag": "span",
        "text": "Production to Snowflake",
        "top": 2819,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "prod-events",
        "top": 2856,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Billing to BigQuery",
        "top": 3528,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "Data replication",
        "top": 9558,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Managed Kafka",
        "top": 9598,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Connectors",
        "top": 9638,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Managed Kafka is live: Apache Kafka on AWS for half the cost of MSK",
        "top": 9,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ": Apache Kafka on AWS for half the cost of MSK",
        "top": 9,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Product",
        "top": 61,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "560",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Deployment",
        "top": 7459,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Security",
        "top": 7459,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Observability",
        "top": 7597,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 54,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Start for free",
        "top": 54,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "New",
        "top": 786,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Search for anything...",
        "top": 713,
        "property": "font"
      },
      {
        "tag": "th",
        "text": "Change",
        "top": 1425,
        "property": "font"
      },
      {
        "tag": "th",
        "text": "By",
        "top": 1425,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "© 2026 Artie",
        "top": 10325,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Terms",
        "top": 10325,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Privacy",
        "top": 10325,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "460",
    "size": "13px",
    "lineHeight": "18.9px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "strong",
        "text": "AWS DMS",
        "top": 7008,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Fivetran",
        "top": 7008,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "AWS DMS",
        "top": 6438,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "380",
    "size": "96px",
    "lineHeight": "96px",
    "letterSpacing": "-4.8px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Managed means",
        "top": 2132,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "our engineers",
        "top": 2228,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "get paged,",
        "top": 2324,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "strong",
        "text": "prod-events",
        "top": 1470,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "public.refunds",
        "top": 1511,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Billing to BigQuery",
        "top": 1551,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "14px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Succeeded",
        "top": 1466,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Succeeded",
        "top": 1507,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Succeeded",
        "top": 1547,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "saansMono",
    "fontStack": "saansMono, \"saansMono Fallback\", monospace",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "text",
        "text": "0",
        "top": 1304,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "100M",
        "top": 1239,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "200M",
        "top": 1174,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "text",
        "text": "Oct 22",
        "top": 1322,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Oct 24",
        "top": 1322,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Oct 26",
        "top": 1322,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, -apple-system, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "420",
    "size": "13px",
    "lineHeight": "18.9px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Switched from AWS DMS and Fivetran",
        "top": 7008,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Switched from AWS DMS",
        "top": 6438,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Switched from AWS DMS",
        "top": 6711,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "saansMono",
    "fontStack": "saansMono, \"saansMono Fallback\", monospace",
    "weight": "500",
    "size": "7.9px",
    "lineHeight": "11.8px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "text",
        "text": "35.03",
        "top": 9808,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "29.47",
        "top": 9808,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "26.52",
        "top": 9808,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "arizonaMix",
    "fontStack": "arizonaMix, \"arizonaMix Fallback\", serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "52px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 5242,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2",
        "top": 5481,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3",
        "top": 5721,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "See all connectors",
        "top": 4753,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "See use cases",
        "top": 7992,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Try free with",
        "top": 9349,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "saansMono",
    "fontStack": "saansMono, \"saansMono Fallback\", monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 4122,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 4122,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 4122,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "420",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "kbd",
        "text": "⌘",
        "top": 713,
        "property": "font"
      },
      {
        "tag": "kbd",
        "text": "K",
        "top": 713,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "saans",
    "fontStack": "saans, \"saans Fallback\", system-ui, sans-serif",
    "weight": "460",
    "size": "18px",
    "lineHeight": "24.3px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Learn more",
        "top": 8822,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 188,
    "contexts": [
      {
        "tag": "a",
        "text": "Start for free",
        "top": 54,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "app.artie.comSRHomeSearch for anything...⌘KGood afternoon, SamNew1 pipeline has undeployed changes.P",
        "top": 663,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Search for anything...⌘K",
        "top": 709,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 21,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"contactPoint\":{\"@type\":\"ContactPoint\",\"cont",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "(function(){try{var s=document.currentScript,r=s&&s.parentElement;if(!r)return;var p=localStorage.ge",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "header",
        "text": "Skip to contentManaged Kafka is live: Apache Kafka on AWS for half the cost of MSKProductProductData",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 15,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 59,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "0100M200M300MOct 22Oct 24Oct 26Oct 28",
        "top": 1109,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#A6ABA3",
    "alpha": 1,
    "cssValue": "rgb(166, 171, 163)",
    "count": 8,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 9839,
        "property": "svg-stroke"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 9843,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#241D18",
    "alpha": 1,
    "cssValue": "rgb(36, 29, 24)",
    "count": 302,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": 112,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Managed Kafka is live: Apache Kafka on AWS for half the cost of MSK",
        "top": 9,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 12,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#047454",
    "alpha": 1,
    "cssValue": "rgb(4, 116, 84)",
    "count": 67,
    "contexts": [
      {
        "tag": "a",
        "text": "Start for free",
        "top": 54,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 3492,
        "property": "::before-background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4638,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#141414",
    "alpha": 0.2,
    "cssValue": "rgba(20, 20, 20, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"contactPoint\":{\"@type\":\"ContactPoint\",\"cont",
        "top": 0,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#141414",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(20, 20, 20, 0.1)",
    "count": 478,
    "contexts": [
      {
        "tag": "header",
        "text": "Skip to contentManaged Kafka is live: Apache Kafka on AWS for half the cost of MSKProductProductData",
        "top": 0,
        "property": "::after-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 3482,
        "property": "border"
      },
      {
        "tag": "article",
        "text": "01The destination matches production in real time.Every insert, update and delete lands within a min",
        "top": 4092,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#5B5048",
    "alpha": 1,
    "cssValue": "rgb(91, 80, 72)",
    "count": 119,
    "contexts": [
      {
        "tag": "p",
        "text": "Artie streams every change from your production databases to Snowflake, BigQuery, Iceberg, and more.",
        "top": 369,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "app.artie.com",
        "top": 669,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 677,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "rgba(0, 0, 0, 0.2)",
    "count": 5,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 9946,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#E2C7FF",
    "alpha": 1,
    "cssValue": "rgb(226, 199, 255)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Managed Kafka is live: Apache Kafka on AWS for half the cost of MSK",
        "top": 0,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "New",
        "top": 3081,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 6222,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#DCF5EC",
    "alpha": 1,
    "cssValue": "rgb(220, 245, 236)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Production to SnowflakePostgreSQL · 42 tablesTableStatusRows syncedordersStreaming18,402,113customer",
        "top": 2772,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Buying through AWS Marketplace?",
        "top": 9310,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#786C63",
    "alpha": 1,
    "cssValue": "rgb(120, 108, 99)",
    "count": 160,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 809,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 820,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 813,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#E5F5EF",
    "alpha": 1,
    "cssValue": "color(srgb 0.897059 0.960784 0.937843)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4530,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#EDE3F9",
    "alpha": 1,
    "cssValue": "color(srgb 0.93098 0.888627 0.976471)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "prod-eventsRunningAWS us-east-1Topics14Consumer groups6",
        "top": 2772,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#F3F3F2",
    "alpha": 1,
    "cssValue": "rgb(243, 243, 242)",
    "count": 57,
    "contexts": [
      {
        "tag": "span",
        "text": "Succeeded",
        "top": 1466,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#4A99C3",
    "alpha": 1,
    "cssValue": "rgb(74, 153, 195)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1172,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#E4F5EF",
    "alpha": 1,
    "cssValue": "color(srgb 0.892157 0.960784 0.936078)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 5242,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#F7F4F2",
    "alpha": 1,
    "cssValue": "rgb(247, 244, 242)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "SR",
        "top": 701,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#F7F6F5",
    "alpha": 1,
    "cssValue": "rgb(247, 246, 245)",
    "count": 4,
    "contexts": [
      {
        "tag": "th",
        "text": "Change",
        "top": 1425,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#271414",
    "alpha": 0.050980392156862744,
    "cssValue": "color(srgb 0.141176 0.113725 0.0941176 / 0.05)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Switched from AWS DMS and Fivetran",
        "top": 7002,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#C925D1",
    "alpha": 1,
    "cssValue": "oklch(0.603 0.26 326.012)",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 3484,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#222211",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(36, 29, 24, 0.06)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "app.artie.com",
        "top": 669,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#212119",
    "alpha": 0.12156862745098039,
    "cssValue": "color(srgb 0.141176 0.113725 0.0941176 / 0.12)",
    "count": 22,
    "contexts": [
      {
        "tag": "ul",
        "text": "",
        "top": 1587,
        "property": "border"
      },
      {
        "tag": "li",
        "text": "",
        "top": 1588,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 9222,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(255, 255, 255, 0.05)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Try free with",
        "top": 9349,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FF3621",
    "alpha": 1,
    "cssValue": "oklch(0.65 0.237 30.335)",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 3490,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#166534",
    "alpha": 1,
    "cssValue": "rgb(22, 101, 52)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Streaming",
        "top": 2916,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#C74634",
    "alpha": 1,
    "cssValue": "oklch(0.571 0.168 30.766)",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 3489,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#00684A",
    "alpha": 1,
    "cssValue": "oklch(0.458 0.096 165.087)",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 3488,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#DEDDDC",
    "alpha": 1,
    "cssValue": "rgb(222, 221, 220)",
    "count": 20,
    "contexts": [
      {
        "tag": "th",
        "text": "Change",
        "top": 1425,
        "property": "border"
      },
      {
        "tag": "td",
        "text": "started rebalancing Kafka cluster prod-events",
        "top": 1459,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "oklch(0.178 0 0)",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 3489,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#141414",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(20, 20, 20, 0.05)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10319,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#628400",
    "alpha": 1,
    "cssValue": "oklch(0.565 0.145 125.454)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4809,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#231C15",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(36, 29, 24, 0.14)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "app.artie.com",
        "top": 663,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#241D19",
    "alpha": 0.2784313725490196,
    "cssValue": "color(srgb 0.141176 0.113725 0.0941176 / 0.28)",
    "count": 16,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 54,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#8ED1B1",
    "alpha": 1,
    "cssValue": "rgb(142, 209, 177)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 5793,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#2D2824",
    "alpha": 1,
    "cssValue": "rgb(45, 40, 36)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "New",
        "top": 786,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#1D4FD6",
    "alpha": 1,
    "cssValue": "rgb(29, 79, 214)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Backfilling",
        "top": 2976,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#241B1B",
    "alpha": 0.10980392156862745,
    "cssValue": "rgba(36, 29, 24, 0.11)",
    "count": 65,
    "contexts": [
      {
        "tag": "span",
        "text": "SR",
        "top": 1473,
        "property": "border"
      },
      {
        "tag": "kbd",
        "text": "⌘",
        "top": 713,
        "property": "border"
      },
      {
        "tag": "th",
        "text": "Table",
        "top": 2876,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#141414",
    "alpha": 1,
    "cssValue": "rgb(20, 20, 20)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 59,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#DCFCE7",
    "alpha": 1,
    "cssValue": "rgb(220, 252, 231)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Running",
        "top": 2854,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#221D19",
    "alpha": 0.20392156862745098,
    "cssValue": "rgba(36, 29, 24, 0.204)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Search for anything...⌘K",
        "top": 709,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#8C4FFF",
    "alpha": 1,
    "cssValue": "oklch(0.596 0.245 293.439)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4663,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#261A1A",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(36, 29, 24, 0.08)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 762,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#00ADD4",
    "alpha": 1,
    "cssValue": "oklch(0.693 0.128 221.561)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4812,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#E7E2DE",
    "alpha": 1,
    "cssValue": "rgb(231, 226, 222)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "SR",
        "top": 1491,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#003545",
    "alpha": 1,
    "cssValue": "oklch(0.306 0.058 224.764)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4593,
        "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 spacing between sections (often 100px+), with structured internal padding within cards and columns.
- Corner style: Rounded corners for UI elements and buttons, contrasting with the hard edges of text blocks. Geometric shapes mix circles and rectangles.
- Radius: Buttons and UI cards feature moderate border radii (likely 4px-8px), while geometric illustrations use full circles and pill shapes.
- Borders: Subtle 1px solid borders in light grays or low-opacity darks define cards and input fields without adding heavy visual weight.
- Buttons: Primary buttons are filled with a dark green and have rounded corners. Secondary buttons use a white background with a subtle border.
- Content width: Content is constrained to a central max-width (likely around 1200px), with some background elements breaking out.
- Density: Loose density. High reliance on whitespace to separate concepts and keep the interface feeling light and uncluttered.
- Evidence: Visual inspection of the layout structure, button treatments, card borders, and spacing between text blocks and illustrative elements.

## Sections

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

1. **Navbar — Artie Navbar** (Home)
   A thin promo strip above a clean menu with one filled button gives visitors a clear primary action without clutter.
   Capture: 1440×103px; page bounds 0–103px of 10375px; source section ID: `25940fa7-1eed-449e-82a3-ab9946356c4e`; image: https://media.designdetails.io/library/e75e0b56aca5a3a0458fe615a65d72a2fa610018cc3a807bbcebba21be48cc98/25940fa7-1eed-449e-82a3-ab9946356c4e.webp
   SECTION.md v3.2: `25940fa7-1eed-449e-82a3-ab9946356c4e` (deterministic evidence; editorial review pending)
2. **Hero — Headline hero with product dashboard** (Home)
   A large serif headline, two buttons and a real product screenshot show what the product does immediately.
   Capture: 1440×1436px; page bounds 103–1539px of 10375px; source section ID: `049ab7d1-9045-4347-99b7-86370731f43b`; image: https://media.designdetails.io/library/6ded3d2c70b666d28e550cd1ad7f5b3864a551722bb357dedc1d742fffe8c301/049ab7d1-9045-4347-99b7-86370731f43b.webp
   SECTION.md v3.2: `049ab7d1-9045-4347-99b7-86370731f43b` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Bordered grid of customer logos** (Home)
   Evenly sized monochrome logos in a ruled grid look tidy and give quick social proof without distracting colour.
   Capture: 1440×401px; page bounds 1539–1940px of 10375px; source section ID: `30b1e780-480e-41ea-8283-3b62c5c44cd0`; image: https://media.designdetails.io/library/50ca8be7861e9b47ed5f558fb564296b5ce16546e8ade9e58b2dafbbc463d6c6/30b1e780-480e-41ea-8283-3b62c5c44cd0.webp
   SECTION.md v3.2: `30b1e780-480e-41ea-8283-3b62c5c44cd0` (deterministic evidence; editorial review pending)
4. **Other — Large statement with inline shapes** (Home)
   Oversized type with brand-colored shapes in the text states the core promise memorably and breaks up the page rhythm.
   Capture: 1440×768px; page bounds 1940–2708px of 10375px; source section ID: `f8d51dd5-6ce3-47f2-b87d-3e867faa066d`; image: https://media.designdetails.io/library/b023d81b42915718424f7ed05ad7045755620d1babf7ba69a20d41c70e8cd873/f8d51dd5-6ce3-47f2-b87d-3e867faa066d.webp
   SECTION.md v3.2: `f8d51dd5-6ce3-47f2-b87d-3e867faa066d` (deterministic evidence; editorial review pending)
5. **Features — Two product cards with previews** (Home)
   Tinted preview panels above short descriptions let visitors tell the two products apart and see each one in action.
   Capture: 1440×592px; page bounds 2708–3300px of 10375px; source section ID: `4f69aa6f-305b-4547-834c-c8352831d7a3`; image: https://media.designdetails.io/library/a6d0d3f5ff09284738ff4413c5d9e1fb09abe034ad39ffa445306b35c31bc3e3/4f69aa6f-305b-4547-834c-c8352831d7a3.webp
   SECTION.md v3.2: `4f69aa6f-305b-4547-834c-c8352831d7a3` (deterministic evidence; editorial review pending)
6. **Features — Three numbered promises under pipeline visual** (Home)
   A faded grid of streaming cards sets the scene while numbered columns state each guarantee in short, scannable text.
   Capture: 1440×1134px; page bounds 3300–4434px of 10375px; source section ID: `ff29fb04-53fd-44c8-ba54-333e23ed10fe`; image: https://media.designdetails.io/library/54c51c2724d1a75b22e055857b446343a69d95dce1c387d2edb9c3092af57f7d/ff29fb04-53fd-44c8-ba54-333e23ed10fe.webp
   SECTION.md v3.2: `ff29fb04-53fd-44c8-ba54-333e23ed10fe` (deterministic evidence; editorial review pending)
7. **Features — Connector illustration beside integration copy** (Home)
   A diagram of source icons flowing to a destination makes integrations tangible, while a single link leads to the full list.
   Capture: 1440×603px; page bounds 4434–5037px of 10375px; source section ID: `c05077b6-9ca1-45d4-a112-10ad8660c2be`; image: https://media.designdetails.io/library/a0c113bb6c3760f46aede1680753acb966a395fbd881fba80facad0f9fd4ff5c/c05077b6-9ca1-45d4-a112-10ad8660c2be.webp
   SECTION.md v3.2: `c05077b6-9ca1-45d4-a112-10ad8660c2be` (deterministic evidence; editorial review pending)
8. **Process — Three numbered setup steps with visuals** (Home)
   Large numerals, ruled rows and small illustrations make the setup feel short and easy to follow.
   Capture: 1440×997px; page bounds 5037–6034px of 10375px; source section ID: `218edf60-9185-45f9-950c-4382d8e21822`; image: https://media.designdetails.io/library/b0762b5593afa731793c6a804a35e2dd25efc4ce304ee955b0442c2e49809591/218edf60-9185-45f9-950c-4382d8e21822.webp
   SECTION.md v3.2: `218edf60-9185-45f9-950c-4382d8e21822` (deterministic evidence; editorial review pending)
9. **Testimonials — Customer use cases in mosaic grid** (Home)
   Logos, outcome headlines and tags showing what each customer switched from make the stories concrete and credible.
   Capture: 1440×1125px; page bounds 6034–7159px of 10375px; source section ID: `1d30b897-c208-4bf0-b437-466df1d49ec7`; image: https://media.designdetails.io/library/f8b57e2a3d14d3b641439507daf335a37e49730272ed3120e772b231b36949a2/1d30b897-c208-4bf0-b437-466df1d49ec7.webp
   SECTION.md v3.2: `1d30b897-c208-4bf0-b437-466df1d49ec7` (deterministic evidence; editorial review pending)
10. **Features — Ruled list of production capabilities** (Home)
   Row labels on the left and short linked details on the right let technical buyers scan operational features fast.
   Capture: 1440×733px; page bounds 7159–7892px of 10375px; source section ID: `82468255-e477-4d2a-ad61-f2eb68da5077`; image: https://media.designdetails.io/library/032f5e2a293117b811d8d00248f0b5c46f5fd60099e484a8d3d8cc5c5617714b/82468255-e477-4d2a-ad61-f2eb68da5077.webp
   SECTION.md v3.2: `82468255-e477-4d2a-ad61-f2eb68da5077` (deterministic evidence; editorial review pending)
11. **Features — Stacked blocks showing growing complexity** (Home)
   Block stacks that grow taller from left to right show a path from simple syncs to advanced setups.
   Capture: 1440×654px; page bounds 7892–8546px of 10375px; source section ID: `a64174d9-a0d9-4bc7-8d39-292a9509aded`; image: https://media.designdetails.io/library/cd962b582932d79a2170f41c57157c251edff8b2065e5813df3ce568147bcd54/a64174d9-a0d9-4bc7-8d39-292a9509aded.webp
   SECTION.md v3.2: `a64174d9-a0d9-4bc7-8d39-292a9509aded` (deterministic evidence; editorial review pending)
12. **Other — Security statement with data flow diagram** (Home)
   A simple diagram marking where nothing is stored backs up the claim and reassures security-minded visitors.
   Capture: 1440×484px; page bounds 8546–9030px of 10375px; source section ID: `1e5a2bbe-9075-4efb-a539-295f3ffd1b09`; image: https://media.designdetails.io/library/51dc109a59d7360f9fe28208354a9e06e355652997955b695af96de2f2a96628/1e5a2bbe-9075-4efb-a539-295f3ffd1b09.webp
   SECTION.md v3.2: `1e5a2bbe-9075-4efb-a539-295f3ffd1b09` (deterministic evidence; editorial review pending)
13. **CTA — Green banner with sign-up buttons** (Home)
   A saturated brand-green block with geometric shapes and two clear buttons gives a strong closing action.
   Capture: 1440×423px; page bounds 9030–9453px of 10375px; source section ID: `5dd8ee73-3081-47c0-b0af-6a7b1089e5c5`; image: https://media.designdetails.io/library/66b9ace28e7ae0a575a51ab3f739ec9ca0c5ffdd083e914e49c0556165303818/5dd8ee73-3081-47c0-b0af-6a7b1089e5c5.webp
   SECTION.md v3.2: `5dd8ee73-3081-47c0-b0af-6a7b1089e5c5` (deterministic evidence; editorial review pending)
14. **Footer — Link columns with outlined wordmark** (Home)
   Grouped link columns keep navigation orderly, while the huge blueprint-style wordmark ends the page with personality.
   Capture: 1440×922px; page bounds 9453–10375px of 10375px; source section ID: `fef95f60-4354-4ccf-8ae2-e7624cd138f2`; image: https://media.designdetails.io/library/955c026fe3d63cc1a255d84ae1d267f929f4ad367a7b9a795394c5679ff840ef/fef95f60-4354-4ccf-8ae2-e7624cd138f2.webp
   SECTION.md v3.2: `fef95f60-4354-4ccf-8ae2-e7624cd138f2` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/1a20421131458beac8624dfb5f17689dba25eeb92ff6a05a0df3af45ebd039b5/desktop_full-6bd0017f-2026-11-06T09-25-27-576Z.webp
- Mobile screenshot: https://media.designdetails.io/library/53003d8e84b395032c67e561b055d38eb1761ad2929af825ba33474ac89b4805/mobile_full-6bd0017f-2026-11-06T09-26-04-705Z.webp
- Open Graph image: https://media.designdetails.io/library/4cd07a705b17f325541b23e67db0cd211b8e751099e261bda4914913c9538c9b/og_image-6bd0017f-2026-11-06T09-25-36-513Z.webp
- Full-page video: https://media.designdetails.io/library/7fd6d9e21f67b057ab3721add6b30d4a26162339d60baa3cca4d615d17e2aa32/motion-1793958482445.mp4
- Video poster: https://media.designdetails.io/library/ffe41e40bae8a517f567f06dccd5289d092863cc61beab9cb5618164ef28c923/motion-poster-1793958482445.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
- Logo Strip
- Floating Product Card
- Feature Card
- Primary Button
- Outline Button
- Step By Step Layout
- Abstract Data Visualization

## Quality rubric

Overall: 58.15/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Artie's site is a well-built, professional execution of the current SaaS marketing template: a serif/sans type pairing anchors clear hierarchy, a restrained neutral palette with a single green accent keeps focus on product content, and motion is distributed thoughtfully across sections rather than front-loaded into a single hero moment. Content integration is a particular strength—dashboard mockups, data-flow diagrams, and named customer migrations are used to make abstract data-infrastructure claims tangible. However, the dominant visual signature—gradient-filled geometric shapes drifting over a light gray canvas—is now a near-ubiquitous convention among funded data and dev-tool startups, and the page's section sequence (hero, logo strip, numbered steps, feature grid, security table, footer wordmark) offers little structural surprise. The result is a competent, trustworthy execution within a familiar idiom rather than a site with several hard-to-substitute ideas of its own.

- Typography (15%): 66 — A consistent two-family system pairs a serif display face (arizonaMix) for headings with a clean sans (saans) for body copy and a mono (saansMono) for data labels, producing clear hierarchy from 56px hero down to 13px chart labels. Negative letter-spacing on large sizes and an oversized 96px thin-serif treatment used as illustrative type show some craft, but the serif/sans/mono pairing itself is now a very common SaaS convention rather than a distinctive voice.
- Color (10%): 65 — The palette is tightly controlled: warm near-black text (#241D18), light gray canvas (#F5F5F5), white cards, and a single dark green action color (#047454), with pastel gradients reserved for illustrative geometric shapes. This restraint keeps the product UI legible while gradients add warmth, but the palette mirrors a widely adopted 'neutral canvas + one accent + pastel gradient blobs' formula seen across many current SaaS sites.
- Layout (20%): 61 — The page follows a conventional but well-executed SaaS marketing structure: hero, logo strip, feature cards, numbered onboarding steps, integration grid, customer stories, security/platform table, and footer with oversized wordmark. Spacing is generous and consistent, and grids (connector icons, customer logos, feature cards) are evenly structured, but the overall sequence and card-grid vocabulary is highly templated and offers few structural surprises.
- Motion (20%): 63 — Motion is present across the full scroll, including ambient hero shape drift, scroll-revealed gradient highlights behind headline words, floating background UI cards, a data-flow line animation tied to content meaning, staggered build-up of geometric columns, and a horizontally translating footer wordmark. This is a reasonably broad and purposeful motion vocabulary, though all are common scroll-triggered/parallax techniques and no evidence establishes animation smoothness, easing quality, or restraint under varied scroll speeds.
- Originality (25%): 41 — The dominant visual language—gradient-filled geometric circles/pills/rectangles floating over a light neutral canvas, paired with a serif/sans type combo—is a highly recognizable contemporary SaaS aesthetic used across many funded data/dev-tool startups. The ambient floating-UI-card motif is a modestly fresh way to represent abstract data activity, but overall the site does not introduce hard-to-substitute ideas; it executes a familiar trend competently rather than establishing a distinct identity.
- Content (10%): 67 — Visual elements are purposefully tied to the product story: UI mockups show real dashboard states (pipelines, rows processed, replication status), icon-to-icon connecting lines visualize data flow between sources and destinations, and customer case cards pair logos with specific before/after migration claims. This strengthens the narrative substantially beyond decorative stock imagery.

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 live product dashboard with a rising data line chart sits right under the headline, showing real throughput numbers instead of abstract claims. Soft gradient blocks and circles in green and lilac add warmth to a technical subject, while short numbered steps and paired small screenshots break the long page into easy, scannable chapters.

## 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.