# Different — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.different.ai/
Captured: 2026-10-22
CSS measured: 2026-10-22T06:21:47.595Z at 1440×1000 — https://www.different.ai/
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: anthropic/claude-sonnet-5

## Design direction

Different is a B2B marketing AI platform utilizing a visually engaging, somewhat editorial and illustrative design style. The site features prominent use of 'Feature Display' for elegant, high-contrast headings, paired with 'PP Neue Montreal' for clean, readable body copy. The color palette relies heavily on stark black and white contrasts, punctuated by muted, sophisticated accent colors like soft yellows (#FFE28B), pale greens (#D5EF72), and light blues (#BFE0F4) within specific content cards. The design employs a tight typographic scale, varied corner radii (from sharp to heavily rounded), and distinct feature cards that display abstract UI patterns. The parallax hero illustration sets a 

## Classification

- Industry: marketing
- Site type: Blog
- Business model: Software
- Styles: editorial, illustrative, minimal, elegant-saas
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Feature Display — weight 300; size 90px; line-height 99px; tracking -0.9px; Regular (100% role confidence, computed values)
- Heading: Feature Display — weight 400; size 30px; line-height 33px; tracking -0.3px; Regular (90% role confidence, computed values)
- Body: PP Neue Montreal Text — weight 400; size 20px; line-height 25px; tracking -0.8px; Regular (95% role confidence, computed values)
- Mono: PP Fraktion Mono — weight 500; size 15px; line-height 18.8px; tracking normal; uppercase (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the primary background color for the majority of the page sections below the hero. (100% role confidence, computed values)
- Text — text #000000: color-2: computed rgb(0, 0, 0); AI role: Black (#000000) is used extensively for headings, body text, and some button texts across the white canvas. (100% role confidence, computed values)
- Primary Action — primary action #121212: color-13: computed rgb(18, 18, 18); AI role: Near-black (#121212) used as the background color for primary 'Book a demo' buttons. (95% role confidence, computed values)
- Border — border #DEDEDE: color-22: computed rgb(222, 222, 222); AI role: Light gray (#DEDEDE) used for borders around feature cards. (90% role confidence, computed values)
- Surface — surface #FFE28B: color-5: computed rgb(255, 226, 139); AI role: Soft yellow (#FFE28B) used as a distinct background color for specific testimonial cards. (85% role confidence, computed values)
- Muted Text — muted text #4A4A4A: color-12: computed rgb(74, 74, 74); AI role: Dark gray (#4A4A4A) used for secondary or less prominent text, like article metadata. (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": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "400",
    "size": "30px",
    "lineHeight": "33px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Build your world, one journey at a time.",
        "top": 3646,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Run your world from one place.",
        "top": 3646,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Learn from your world. Make it better.",
        "top": 3646,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "22px",
    "lineHeight": "24.2px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Introducing Different: $48M to change how B2B marketing gets done",
        "top": 5612,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Every buyer is different. Descope talks to them differently.",
        "top": 5612,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Motif punches above its weight",
        "top": 5612,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "400",
    "size": "88px",
    "lineHeight": "84.5px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Ready to build your world, differently?",
        "top": 6055,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "p",
        "text": "Different is the AI marketing system that lets lean B2B teams create, orchestrate and optimize deman",
        "top": 595,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "There are more channels to coordinate, more buyers to reach and less time to know if any of it is wo",
        "top": 1478,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Marketers need one system that knows their strategy, executes reliably and gets better with every ca",
        "top": 1909,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "PP Fraktion Mono",
    "fontStack": "\"PP Fraktion Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "15px",
    "lineHeight": "18.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "Explorer",
        "top": 4411,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Crafter",
        "top": 4411,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Crafter",
        "top": 4411,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "17.5px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "CEO at Motif",
        "top": 4943,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Head of Marketing at Straiker",
        "top": 4943,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Head of Marketing at Straiker",
        "top": 4943,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "300",
    "size": "96px",
    "lineHeight": "105.6px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "See",
        "top": 4088,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "how",
        "top": 4088,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "lean",
        "top": 4088,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "44px",
    "lineHeight": "45.8px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Our campaigns get smarter every single day.",
        "top": 4618,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "We were paying to reach the wrong companies. Not anymore.",
        "top": 4595,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "We stopped managing tools and started marketing.",
        "top": 4618,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "26px",
    "lineHeight": "29.9px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "“Different makes our campaigns smarter every day. We can build and optimize across paid, AEO and lan",
        "top": 4535,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“With Different, I build and launch campaigns across every demand gen channel without leaving the pl",
        "top": 4535,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Different makes our campaigns smarter every day. We can build and optimize across paid, AEO and lan",
        "top": 4535,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Read all field notes →",
        "top": 5299,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Different is an AI marketing system that runs demand generation end-to-end for lean B2B marketing te",
        "top": 5660,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "With two marketers, Descope runs up to seven programs at once, writes for every persona and hands sa",
        "top": 5660,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "“Different analyzed our campaigns and uncovered LinkedIn spend going to companies outside our target",
        "top": 4532,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Different analyzed our campaigns and uncovered LinkedIn spend going to companies outside our target",
        "top": 4532,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Different analyzed our campaigns and uncovered LinkedIn spend going to companies outside our target",
        "top": 4532,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Different builds journeys across channels and creates content for each step. Each piece fits its sta",
        "top": 3724,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Different launches your email, ads and landing pages. Steps run on a schedule or when an account tak",
        "top": 3724,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Different suggests message, offer and budget updates while the campaign runs. What works carries int",
        "top": 3724,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Fraktion Mono",
    "fontStack": "\"PP Fraktion Mono\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "01 Create",
        "top": 3616,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "02 Orchestrate",
        "top": 3616,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "03 Optimize",
        "top": 3616,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "26.1px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "See how your team can run B2B demand gen campaigns across channels from one place.",
        "top": 6328,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "23.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Product",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Resources",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Company",
        "top": 33,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "300",
    "size": "80px",
    "lineHeight": "88px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "Building",
        "top": 1104,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "that",
        "top": 1104,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "world",
        "top": 1104,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "300",
    "size": "90px",
    "lineHeight": "99px",
    "letterSpacing": "-0.9px",
    "traits": "italic",
    "count": 10,
    "contexts": [
      {
        "tag": "em",
        "text": "world",
        "top": 439,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "d",
        "top": 1759,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "i",
        "top": 1759,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "300",
    "size": "90px",
    "lineHeight": "99px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Every",
        "top": 349,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "marketer",
        "top": 349,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "is",
        "top": 349,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "300",
    "size": "60px",
    "lineHeight": "66px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "AI",
        "top": 3136,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "that",
        "top": 3136,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "runs",
        "top": 3136,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "LinkedIn ad",
        "top": 3338,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Landing page",
        "top": 3359,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Email",
        "top": 3380,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "17.5px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "20 Oct 2026 · 5 min read",
        "top": 5562,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Read article",
        "top": 5769,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "20 Oct 2026 · 3 min read",
        "top": 5562,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "11px",
    "lineHeight": "14.3px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "LinkedIn ad",
        "top": 3353,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Landing page",
        "top": 3353,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Email",
        "top": 3353,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "18.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Book a demo",
        "top": 35,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Book a demo →",
        "top": 708,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Book a demo",
        "top": 2047,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "11px",
    "lineHeight": "14.3px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Running · 1,200 accounts",
        "top": 3339,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "210 accounts visited",
        "top": 3360,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "85 queued · Tue 9:00 AM",
        "top": 3381,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "11px",
    "lineHeight": "15.4px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Shift 20% to the Head of Compliance ad",
        "top": 3451,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Lead with cost savings for CFOs",
        "top": 3472,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Swap the demo for an ROI calculator in insurance",
        "top": 3494,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "PP Fraktion Mono",
    "fontStack": "\"PP Fraktion Mono\", sans-serif",
    "weight": "500",
    "size": "10px",
    "lineHeight": "13px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Journey · Mid-market expansion",
        "top": 3300,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Journey · Mid-market expansion",
        "top": 3300,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "LinkedIn ad · Variants",
        "top": 3297,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "13px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "8 variants",
        "top": 3379,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "8 pages",
        "top": 3379,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "1,200 ready",
        "top": 3379,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "PP Fraktion Mono",
    "fontStack": "\"PP Fraktion Mono\", sans-serif",
    "weight": "400",
    "size": "8.5px",
    "lineHeight": "15px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Budget",
        "top": 3451,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Message",
        "top": 3472,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Offer",
        "top": 3494,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "300",
    "size": "96px",
    "lineHeight": "105.6px",
    "letterSpacing": "-1.9px",
    "traits": "italic",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "big",
        "top": 4194,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "worlds",
        "top": 4194,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "←",
        "top": 5032,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "→",
        "top": 5032,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "13.3px",
    "lineHeight": "17.3px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Expand into new markets without new compliance risk.",
        "top": 3484,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Ledgerly visited twice this week.",
        "top": 3486,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "→",
        "top": 3353,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "→",
        "top": 3353,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "11.4px",
    "lineHeight": "14.8px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Email · Ledgerly · 1 of 1,200",
        "top": 3436,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Email · Ledgerly",
        "top": 3438,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "11.4px",
    "lineHeight": "14.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "✓ On brand",
        "top": 3431,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "✓ Approved",
        "top": 3433,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "10.5px",
    "lineHeight": "12.6px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Approve",
        "top": 3416,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Dismiss",
        "top": 3416,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "PP Neue Montreal",
    "fontStack": "\"PP Neue Montreal\", sans-serif",
    "weight": "500",
    "size": "10px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "DRAFT",
        "top": 3297,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "LIVE",
        "top": 3297,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "400",
    "size": "88px",
    "lineHeight": "84.5px",
    "letterSpacing": "-0.9px",
    "traits": "italic",
    "count": 1,
    "contexts": [
      {
        "tag": "em",
        "text": "differently",
        "top": 6209,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Feature Display",
    "fontStack": "\"Feature Display\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 5299,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026 Different Labs, Inc.",
        "top": 6841,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "PP Neue Montreal Text",
    "fontStack": "\"PP Neue Montreal Text\", sans-serif",
    "weight": "400",
    "size": "12.3px",
    "lineHeight": "17.2px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Email to their Head of Compliance queued for Tue 9:00 AM.",
        "top": 3511,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 83,
    "contexts": [
      {
        "tag": "body",
        "text": "/* Ensure all elements inherit the color from its parent */ body * { color: inherit; } a, .w-input, ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "Product",
        "top": 33,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 215,
    "contexts": [
      {
        "tag": "span",
        "text": "Building",
        "top": 1104,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "01 Create",
        "top": 3616,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Build your world, one journey at a time.",
        "top": 3646,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#191919",
    "alpha": 0.611764705882353,
    "cssValue": "rgba(25, 25, 25, 0.61)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F0F0F0",
    "alpha": 1,
    "cssValue": "rgb(240, 240, 240)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "AI that runs your demand gen, end to end.Journey · Mid-market expansionDRAFTLinkedIn ad8 variants→La",
        "top": 3046,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFE28B",
    "alpha": 1,
    "cssValue": "rgb(255, 226, 139)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Crafter“Our campaigns get smarter every single day.Amy HengHead of Marketing at Straiker",
        "top": 4386,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#D5EF72",
    "alpha": 1,
    "cssValue": "rgb(213, 239, 114)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Detective“We were paying to reach the wrong companies. Not anymore.Leah ClapperMarketing Lead at Rox",
        "top": 4386,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#BFE0F4",
    "alpha": 1,
    "cssValue": "rgb(191, 224, 244)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Architect“We stopped managing tools and started marketing.Alexis DoughertyHead of Marketing at Lensi",
        "top": 4386,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#191919",
    "alpha": 1,
    "cssValue": "rgb(25, 25, 25)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "ExplorerAmar HanspalCEO at Motif",
        "top": 4386,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(255, 255, 255, 0.08)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "ExplorerAmar HanspalCEO at Motif",
        "top": 4386,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#E8E4DC",
    "alpha": 1,
    "cssValue": "rgb(232, 228, 220)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5925,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#F6F6F6",
    "alpha": 1,
    "cssValue": "rgb(246, 246, 246)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Journey · Mid-market expansionDRAFTLinkedIn ad8 variants→Landing page8 pages2+ visits→Email1,200 rea",
        "top": 3256,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#4A4A4A",
    "alpha": 1,
    "cssValue": "rgb(74, 74, 74)",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "There are more channels to coordinate, more buyers to reach and less time to know if any of it is wo",
        "top": 1478,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "20 Oct 2026 · 5 min read",
        "top": 5562,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#121212",
    "alpha": 1,
    "cssValue": "rgb(18, 18, 18)",
    "count": 25,
    "contexts": [
      {
        "tag": "div",
        "text": "Book a demo →",
        "top": 708,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 2033,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "Approve",
        "top": 3416,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#121212",
    "alpha": 0.2196078431372549,
    "cssValue": "rgba(18, 18, 18, 0.22)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "ProductOverviewHow Different runs your demand genUse casesEvery demand gen play, in one placeResourc",
        "top": 0,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#303030",
    "alpha": 1,
    "cssValue": "rgb(48, 48, 48)",
    "count": 16,
    "contexts": [
      {
        "tag": "div",
        "text": "LinkedIn ad",
        "top": 3353,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#3B3B3B",
    "alpha": 1,
    "cssValue": "rgb(59, 59, 59)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "See how your team can run B2B demand gen campaigns across channels from one place.",
        "top": 6328,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#5E5E5E",
    "alpha": 1,
    "cssValue": "rgb(94, 94, 94)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "DRAFT",
        "top": 3297,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#E9E9E9",
    "alpha": 1,
    "cssValue": "rgb(233, 233, 233)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 68,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#000000",
    "alpha": 0.2784313725490196,
    "cssValue": "rgba(0, 0, 0, 0.28)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Announcing our $48M seed round",
        "top": 260,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#2F2F2F",
    "alpha": 1,
    "cssValue": "rgb(47, 47, 47)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2080,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#767676",
    "alpha": 1,
    "cssValue": "rgb(118, 118, 118)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Journey · Mid-market expansion",
        "top": 3300,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#DEDEDE",
    "alpha": 1,
    "cssValue": "rgb(222, 222, 222)",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "Journey · Mid-market expansionDRAFTLinkedIn ad8 variants→Landing page8 pages2+ visits→Email1,200 rea",
        "top": 3284,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#EAEAEA",
    "alpha": 1,
    "cssValue": "rgb(234, 234, 234)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Journey · Mid-market expansionDRAFT",
        "top": 3285,
        "property": "border"
      },
      {
        "tag": "section",
        "text": "Ready to build your world, differently?See how your team can run B2B demand gen campaigns across cha",
        "top": 5884,
        "property": "border"
      },
      {
        "tag": "footer",
        "text": "ProductResourcesCompanyLinkedInXContact UsPrivacyTermsYour Privacy Choices© 2026 Different Labs, Inc",
        "top": 6625,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#106221",
    "alpha": 1,
    "cssValue": "rgb(16, 98, 33)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "✓ On brand",
        "top": 3431,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#D8F0DD",
    "alpha": 1,
    "cssValue": "rgb(216, 240, 221)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "✓ On brand",
        "top": 3431,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#131313",
    "alpha": 1,
    "cssValue": "rgb(19, 19, 19)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Read all field notes →",
        "top": 5299,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "→",
        "top": 5299,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#4D2C99",
    "alpha": 1,
    "cssValue": "rgb(77, 44, 153)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3339,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "✦ SUGGESTEDApproveDismissBudgetShift 20% to the Head of Compliance adMessageLead with cost savings f",
        "top": 3402,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "✦ SUGGESTED",
        "top": 3424,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#151515",
    "alpha": 1,
    "cssValue": "rgb(21, 21, 21)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Book a demo",
        "top": 35,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#FFFFFF",
    "alpha": 0.45098039215686275,
    "cssValue": "rgba(255, 255, 255, 0.45)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Announcing our $48M seed round",
        "top": 260,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#EFEFEF",
    "alpha": 1,
    "cssValue": "rgb(239, 239, 239)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3339,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#ECECEC",
    "alpha": 1,
    "cssValue": "rgb(236, 236, 236)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "DRAFT",
        "top": 3297,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#D7D7D0",
    "alpha": 1,
    "cssValue": "rgb(215, 215, 208)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "←",
        "top": 5032,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#8C8C8C",
    "alpha": 1,
    "cssValue": "rgb(140, 140, 140)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "→",
        "top": 3353,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#787878",
    "alpha": 1,
    "cssValue": "rgb(120, 120, 120)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Read article",
        "top": 5769,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#262626",
    "alpha": 1,
    "cssValue": "rgb(38, 38, 38)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3400,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#BFBFBF",
    "alpha": 1,
    "cssValue": "rgb(191, 191, 191)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3363,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#34342F",
    "alpha": 1,
    "cssValue": "rgb(52, 52, 47)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5051,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#2F9E44",
    "alpha": 1,
    "cssValue": "rgb(47, 158, 68)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3343,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#DEDED8",
    "alpha": 1,
    "cssValue": "rgb(222, 222, 216)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5051,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#F0A020",
    "alpha": 1,
    "cssValue": "rgb(240, 160, 32)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3385,
        "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: Sections are separated by large swaths of white space, creating a calm, deliberate reading pace. Internal card padding is generous.
- Corner style: A mix of corner styles: primary buttons are fully pill-shaped, while feature and article cards have moderately rounded corners, and abstract UI elements within cards use varying smaller radii.
- Radius: Primary buttons: full pill (approx 999px). Cards: medium rounding (approx 12-16px).
- Borders: Subtle, solid borders (e.g., #DEDEDE) used to delineate white cards against the white background. Outlined buttons use a thin solid border.
- Buttons: Solid fill with contrasting text (black on white, or white on black) in a fully rounded pill shape. Minimal padding.
- Content width: Content is generally centered and constrained to a standard max-width, maintaining readability across sections.
- Density: Low to medium density. The editorial approach relies on ample negative space to emphasize typography and illustrations.
- Evidence: Visual inspection of button radii (pill shape), card boundaries (visible borders on white canvas), and typographic layout (wide margins, centered blocks).

## Sections

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

1. **Hero — Every Marketer Is Building a World** (Home)
   AI suggestion (98% confidence): Complete, substantial hero with immersive balloon artwork, announcement pill, clear value proposition, supporting copy, and primary/secondary actions.
   Capture: 1440×1002px; page bounds 0–1002px of 6910px; source section ID: `2c414fcb-c634-4993-9fce-498b032c4924`; image: https://media.designdetails.io/library/4886bc31d1dcd1f0356202b32884493dfa2e20a48651e13a802a5407798b5f07/2c414fcb-c634-4993-9fce-498b032c4924.webp
   SECTION.md v3.2: `2c414fcb-c634-4993-9fce-498b032c4924` (deterministic evidence; editorial review pending)
2. **Features — Building that world gets weighed down by tedious tasks and tools.** (Home)
   Reusable feature composition from Home, organized around “Building that world gets weighed down by tedious tasks and tools.”.
   Capture: 1440×690px; page bounds 1000–1690px of 6910px; source section ID: `ddb275ca-bf84-497f-a947-45c7f2c01059`; image: https://media.designdetails.io/library/c1375214b9d395d3176b598950781f195d36bc04eef43971b6c32a8beda1e478/section_crop-ddb275ca-2026-10-22T06-21-57-800Z.webp
   SECTION.md v3.2: `ddb275ca-bf84-497f-a947-45c7f2c01059` (deterministic evidence; editorial review pending)
3. **Features — There’s a different way.** (Home)
   Reusable feature composition from Home, organized around “There’s a different way.”.
   Capture: 1440×1128px; page bounds 1690–2818px of 6910px; source section ID: `9468471d-6edd-43cc-81fa-6c4f1b3b4f90`; image: https://media.designdetails.io/library/98426646d6c1670503b6925a4ea2af403959166476ba47fbab48b92869b6ce6b/section_crop-9468471d-2026-10-22T06-21-58-886Z.webp
   SECTION.md v3.2: `9468471d-6edd-43cc-81fa-6c4f1b3b4f90` (deterministic evidence; editorial review pending)
4. **Features — Different Features** (Home)
   Reusable feature composition from Home, organized around “Different Features”.
   Capture: 1440×228px; page bounds 2818–3046px of 6910px; source section ID: `5d3bcd05-5ddc-47fa-8926-2eaa5acc5ec5`; image: https://media.designdetails.io/library/5e18fa3608fcc2b560fe7abad96eaac94a3f8105a855a05333cfb9ab64d798d2/section_crop-5d3bcd05-2026-10-22T06-22-00-034Z.webp
   SECTION.md v3.2: `5d3bcd05-5ddc-47fa-8926-2eaa5acc5ec5` (deterministic evidence; editorial review pending)
5. **Footer — Different Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Different Footer”.
   Capture: 1440×285px; page bounds 6625–6910px of 6910px; source section ID: `7a3edcf2-0c59-4c63-a12e-5dae2093c0c7`; image: https://media.designdetails.io/library/bca486a4b5d054df17468dc33523e722de69cb12e32b4379d112002e25668431/section_crop-7a3edcf2-2026-10-22T06-22-05-160Z.webp
   SECTION.md v3.2: `7a3edcf2-0c59-4c63-a12e-5dae2093c0c7` (deterministic evidence; editorial review pending)
6. **CTA — There’s a Different Way** (Home)
   AI suggestion (90% confidence): Self-contained problem-to-solution conversion section with distinctive parachute continuation artwork, large editorial messaging, explanatory copy, and a centered demo CTA.
   Capture: 1440×1134px; page bounds 1005–2139px of 6910px; source section ID: `6df8d1ce-5d3e-419b-b853-5990c7d826a7`; image: https://media.designdetails.io/library/16be446b96e55b13abf310cff13258231d68c1704121dc55007783cc47d46810/6df8d1ce-5d3e-419b-b853-5990c7d826a7.webp
   SECTION.md v3.2: `6df8d1ce-5d3e-419b-b853-5990c7d826a7` (deterministic evidence; editorial review pending)
7. **Feature Grid — End-to-End Demand Gen Workflow** (Home)
   AI suggestion (99% confidence): Complete three-card feature grid with its own headline and clearly bounded background, presenting create, orchestrate, and optimize as one cohesive product workflow.
   Capture: 1440×951px; page bounds 3053–4004px of 6910px; source section ID: `33bdb953-516e-4384-addd-a00dd49aff2c`; image: https://media.designdetails.io/library/63b78b1d57f73f8c29ff58a6c703b55361a2f296daf719fbd91617db11398ad1/33bdb953-516e-4384-addd-a00dd49aff2c.webp
   SECTION.md v3.2: `33bdb953-516e-4384-addd-a00dd49aff2c` (deterministic evidence; editorial review pending)
8. **Testimonials — Lean Teams Building Big Worlds** (Home)
   AI suggestion (98% confidence): Complete customer-story carousel with a prominent heading, varied quote and video cards, attribution details, pagination, and navigation controls.
   Capture: 1440×1197px; page bounds 4007–5204px of 6910px; source section ID: `adca71b4-e896-40c9-90f7-06f5e1c799e4`; image: https://media.designdetails.io/library/0bc5bcb352a56c2c38c1a26748a9c282c0b317ac7d60460989adb03961d81771/adca71b4-e896-40c9-90f7-06f5e1c799e4.webp
   SECTION.md v3.2: `adca71b4-e896-40c9-90f7-06f5e1c799e4` (deterministic evidence; editorial review pending)
9. **Blog — Field Notes Article Grid** (Home)
   AI suggestion (98% confidence): Complete editorial section with a heading, archive link, and three fully visible illustrated article cards with metadata, summaries, and links.
   Capture: 1440×622px; page bounds 5260–5882px of 6910px; source section ID: `22917083-bb70-4b07-8dfc-9fb7e2c5cc19`; image: https://media.designdetails.io/library/2a754d1ea53e793f66ab92eb0541e3b3cdd1df13daa5f4aa5051b13cf81b82e1/22917083-bb70-4b07-8dfc-9fb7e2c5cc19.webp
   SECTION.md v3.2: `22917083-bb70-4b07-8dfc-9fb7e2c5cc19` (deterministic evidence; editorial review pending)
10. **CTA — Ready to Build Your World Differently** (Home)
   AI suggestion (99% confidence): Complete conversion section pairing a distinctive oversized message and two actions with a large illustrated forest-village visual.
   Capture: 1440×744px; page bounds 5884–6628px of 6910px; source section ID: `df850b3e-7725-4a79-b8a3-ab116cd7d814`; image: https://media.designdetails.io/library/7a3db7770ee0776e7e8ea8feef13cf8cf0da2f793f8566f9af13c4b3b2a7b324/df850b3e-7725-4a79-b8a3-ab116cd7d814.webp
   SECTION.md v3.2: `df850b3e-7725-4a79-b8a3-ab116cd7d814` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/4bc04ec69412d92bb892fe2fa1e28cf5839bcc15ff2bfef563475993d515959d/desktop_full-e8574c8c-2026-10-22T06-21-47-615Z.webp
- Mobile screenshot: https://media.designdetails.io/library/6db2ee45c4f51ffdba9f5c06ae02d4b10df1a853fc8d978dfc0df1068d07f80a/mobile_full-e8574c8c-2026-10-22T06-22-36-570Z.webp
- Open Graph image: https://media.designdetails.io/library/9a06ccba99d542c2a87104c15c82cd2bc2a89e51a1efe478f6741fc1b930e23d/og_image-e8574c8c-2026-10-22T06-21-55-555Z.webp
- Full-page video: https://media.designdetails.io/library/8a156b061e4d3df378b2624dbf35da2c9ba77a4b8e634e8bfc6ea6b868d48816/motion-1792650600823.mp4
- Video poster: https://media.designdetails.io/library/001c511672582ca524ae69526c643f755c078c6c891d8cece31a22a137d504f2/motion-poster-1792650600823.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 With Background Imagery
- Logo Strip
- Feature Collection
- Testimonial Card
- Editorial Card
- Footer
- Primary Button
- Outline Button
- Badge
- Abstract UI Card

## Quality rubric

Overall: 59.4/100 (Competent)
Evidence coverage: 100%
Judge tier: Good
Verdict: A well-crafted, editorial B2B marketing site with a genuinely distinctive illustrated narrative thread and a tasteful, purposeful color/typography system, but its page architecture and single-idiom scroll-parallax motion remain within the current AI-SaaS marketing convention rather than pushing into a landmark or fully originated system.

- Typography (15%): 62 — A deliberate three-family system (Feature Display serif for headlines with italic emphasis words, PP Neue Montreal/Text for body and UI labels, PP Fraktion Mono uppercase for tags) creates a clear editorial hierarchy with a wide, controlled scale (10px–96px) and tightened letter-spacing on display sizes. The italic swap on key words ('world', 'differently') is used consistently as a rhetorical device. However the serif-display-plus-sans-body-plus-mono-label combination is now a common pattern in funded-SaaS marketing sites, so while well executed it is not distinctive.
- Color (10%): 60 — The palette is disciplined—black/white base with grayscale UI chrome—punctuated by three pastel accents (soft yellow, pale green, pale blue) that are tied specifically to testimonial/persona cards, plus small semantic colors (green/purple/orange) inside the abstract product-UI mockups. This purposeful, restrained use of color as a coding device is a real strength, though the overall approach (neutral canvas + a few candy accents) is a familiar modern-SaaS convention.
- Layout (20%): 62 — The page follows a coherent editorial rhythm: full-bleed illustrated hero, large-type problem/solution statements, a logo strip, a three-card feature grid with abstract UI insets, a horizontally-scrolling testimonial rail with persona badges, a three-up article grid, and a closing CTA paired with illustration. Section-to-section pacing alternates type-only breaks with illustration-anchored breaks, and card/grid structures are reused with variation (feature cards vs. testimonial cards vs. article cards) rather than one repeated template.
- Motion (20%): 54 — Motion is anchored almost entirely in scroll-linked effects: a parallax hero illustration where balloon elements translate at different rates, a single scroll-triggered word-reveal ('down' sliding into place), and a horizontal card carousel where the active card scales up/opacity increases while the departing card scales down. These are competently observed effects but represent one motion idiom (scroll-tied transform) rather than a broader system touching hover states, button feedback, or transitions elsewhere on the page; no micro-interaction or state-change evidence is given beyond these three scroll moments.
- Originality (25%): 58 — The page structure (hero + logo strip + 3-feature grid + testimonial carousel + blog cards + CTA) is a standard B2B SaaS template, but the site distinguishes itself with a consistent hand-illustrated narrative motif (hot-air balloons building 'a world,' a city/forest/treehouse illustration sequence) that threads through the hero, mid-page break, and closing CTA, and with abstract hand-styled UI mockups (rather than literal screenshots) inside feature cards. This illustrated metaphor and persona-coded testimonial system (Explorer/Crafter/Architect/Detective) show a specific point of view, though the underlying page architecture and scroll-parallax treatment are common in the current AI-SaaS wave.
- Content (10%): 64 — Content and design are reasonably fused: the abstract UI mockups visually match the feature copy they illustrate (draft→live→optimize journey states), testimonial cards are color- and persona-coded to match the quote's tone, and the illustrated narrative (balloon→treehouse) echoes the copy's 'building a world' metaphor across sections rather than being a decorative afterthought.

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
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A painterly hot air balloon drifting over dark red mountains sets a storybook mood, while large serif headlines with italic accents carry the metaphor down the page. Short text blocks, roomy white space, and a colourful illustrated skyline between sections break up the pitch and make it easy to read in chunks.

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