# Illustrated Article Grid

Schema: Design Details SECTION.md v3.2
Website: Different
Source: https://www.different.ai/
Source section IDs: 22917083-bb70-4b07-8dfc-9fb7e2c5cc19
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: editorial
- Layout: Three identical columns mapping to individual blog or article cards beneath a section header.
- Styles: editorial, illustrative
- Confidence: 95%

## Purpose and structure

A three-column grid of editorial articles, each featuring a stylized illustration thumbnail above a title, summary, and 'Read article' link.

Visual signature: Classic editorial blog grid unified by custom illustrative artwork in the thumbnails.

## Components

- section header
- view all link
- article thumbnails
- article titles
- article excerpts
- text links

## Typography

- Display: Feature Display — 90px 300
- Heading: Feature Display — 30px 400
- Body: PP Neue Montreal Text — 20px 400
- Mono: PP Fraktion Mono — 15px 500

## Functional palette

- Canvas: canvas #FFFFFF
- Text: text #000000
- Primary-Action: primary action #121212
- Border: border #DEDEDE
- Surface: surface #FFE28B
- Muted-Text: muted text #4A4A4A

## Motion evidence

- 15.0–18.0s — The page scrolls down to a section titled 'Field notes from our', displaying a grid of articles or blog posts. (95% confidence)

## Section quality

Overall: 63.06/100 (Good)
Scored coverage: 85%

- Typography: 62 — Clean editorial hierarchy using display serif header, consistent body text (PP Neue Montreal), and metadata in muted gray with clear size/weight differentiation between title, excerpt, and date. Functional but conventional blog-card typographic treatment. Next tier: Lacks distinctive type pairing or expressive scale contrast beyond standard editorial card convention to push into strong/memorable territory.
- Composition: 65 — Well-balanced three-column grid with consistent proportions, generous whitespace, and a strong alignment grid between thumbnail, metadata, title, excerpt, and link. The uniform aspect-ratio illustrations give visual rhythm. Next tier: Grid is a very standard three-up blog layout with no unusual framing, overlap, or asymmetry that would elevate it into distinguished territory.
- Motion: inconclusive — Gemini's motion_moments only describe scrolling into view; no specific timestamped hover, reveal, or transition behavior is given. Next tier: Need timestamped evidence of distinct motion (e.g., hover states, staggered reveals) to assess this axis.
- Content: 60 — Content (illustration, title, excerpt, metadata, link) is well-integrated and legible, each article reads clearly as a unit with sufficient information density without clutter. Next tier: Content integration is competent but formulaic; no unique layering of text over image or interactive content reveal to surpass typical blog card patterns.
- Originality: 68 — The custom illustrated thumbnails (treehouses, mountains, futuristic city) differentiate this from generic stock-photo blog grids, giving a distinct brand voice through commissioned art. Next tier: Grid structure and card composition remain conventional; originality rests solely on illustration style rather than structural or interaction innovation.
- Adaptability: 60 — Structure (header, view-all link, three-card grid with image/metadata/title/excerpt/link) is clearly modular and could be reskinned with different imagery or copy with moderate effort. Next tier: Reliance on custom illustration set as the primary differentiator ties visual identity closely to bespoke assets, limiting generic separability of skin from structure.

Strengths:
- Custom illustrated artwork gives each article a distinct visual identity beyond typical stock photography
- Clear, consistent three-column grid with reliable spacing and alignment
- Calm, legible typographic hierarchy between date, title, and excerpt

Weaknesses:
- Grid layout and card structure are a standard blog/article pattern with no structural innovation
- Motion behavior cannot be verified from available evidence
- Content integration doesn't push beyond conventional thumbnail-title-excerpt-link formula

Why it does not reach the next tier: The section performs editorial grid conventions competently and distinguishes itself through bespoke illustration, but lacks structural or interactive novelty, unusual composition, or motion craft to elevate beyond a well-executed standard pattern.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the grid skeleton and card hierarchy with swapped imagery and copy; typography and color tokens can be restyled without altering layout logic.

What transfers:
- Three-column card grid with image-title-excerpt-link structure
- Section header with 'view all' link pattern
- Metadata line above title for date/read-time

Dependencies:
- Custom illustration assets for thumbnails
- Specific typefaces (Feature Display, PP Neue Montreal Text, PP Fraktion Mono)

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No timestamped motion evidence beyond generic scroll-into-view
- Gemini vocabulary proposals were empty, limiting cross-reference
- Cannot verify hover or transition states from provided data

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: editorial
- Source type: editorial
- Structure: Three identical columns mapping to individual blog or article cards beneath a section header.
- Layout: Three identical columns mapping to individual blog or article cards beneath a section header.
- Styles: editorial, illustrative
- Components: section header, view all link, article thumbnails, article titles, article excerpts, text links
- Purpose: A three-column grid of editorial articles, each featuring a stylized illustration thumbnail above a title, summary, and 'Read article' link.
- Visual signature: Classic editorial blog grid unified by custom illustrative artwork in the thumbnails.

### Crop and composition

- Crop: 1440×622px; aspect ratio 2.315:1
- Page bounds: 5260–5882px of 6910px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "card/subheading",
      "family": "PP Neue Montreal",
      "stack": "\"PP Neue Montreal\", sans-serif",
      "size": "22px",
      "weight": "500",
      "lineHeight": "24.2px",
      "letterSpacing": "-0.2px",
      "sample": "Introducing Different: $48M to change how B2B marketing gets done",
      "element": "h3",
      "occurrences": 3,
      "sourceId": "font-2"
    },
    {
      "role": "body/supporting copy",
      "family": "PP Neue Montreal Text",
      "stack": "\"PP Neue Montreal Text\", sans-serif",
      "size": "16px",
      "weight": "400",
      "lineHeight": "20px",
      "letterSpacing": "-0.6px",
      "sample": "Read all field notes →",
      "element": "a",
      "occurrences": 4,
      "sourceId": "font-10"
    },
    {
      "role": "UI/supporting text",
      "family": "PP Neue Montreal",
      "stack": "\"PP Neue Montreal\", sans-serif",
      "size": "14px",
      "weight": "500",
      "lineHeight": "17.5px",
      "letterSpacing": "-0.1px",
      "sample": "20 Oct 2026 · 5 min read",
      "element": "div",
      "occurrences": 6,
      "sourceId": "font-21"
    },
    {
      "role": "card/subheading",
      "family": "Feature Display",
      "stack": "\"Feature Display\", sans-serif",
      "size": "20px",
      "weight": "400",
      "lineHeight": "20px",
      "letterSpacing": "-0.6px",
      "sample": "→",
      "element": "span",
      "occurrences": 1,
      "sourceId": "font-38"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "90px",
      "family": "Feature Display",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-18: computed CSS at 1440×1000; AI role: Feature Display at 90px used for the main hero heading ('Every marketer is').",
      "sampleId": "font-18",
      "confidence": 1,
      "lineHeight": "99px",
      "letterSpacing": "-0.9px"
    },
    {
      "role": "heading",
      "size": "30px",
      "family": "Feature Display",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Feature Display at 30px used for secondary section headings like 'Build your world, one journey at a time.'",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "33px",
      "letterSpacing": "-0.3px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "PP Neue Montreal Text",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: PP Neue Montreal Text at 20px used for primary body paragraphs, such as under the hero heading.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "25px",
      "letterSpacing": "-0.8px"
    },
    {
      "role": "mono",
      "size": "15px",
      "family": "PP Fraktion Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: PP Fraktion Mono at 15px used for small, uppercase labels like 'Explorer' and 'Crafter'.",
      "sampleId": "font-5",
      "confidence": 0.9,
      "lineHeight": "18.8px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#4A4A4A",
      "cssValue": "rgb(74, 74, 74)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 11,
      "sourceId": "color-12"
    },
    {
      "value": "#131313",
      "cssValue": "rgb(19, 19, 19)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 2,
      "sourceId": "color-26"
    },
    {
      "value": "#787878",
      "cssValue": "rgb(120, 120, 120)",
      "alpha": 1,
      "appliedAs": [
        "border"
      ],
      "occurrences": 3,
      "sourceId": "color-34"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "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.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "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.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#121212",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-13: computed rgb(18, 18, 18); AI role: Near-black (#121212) used as the background color for primary 'Book a demo' buttons.",
      "sampleId": "color-13",
      "confidence": 0.95
    },
    {
      "hex": "#DEDEDE",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-22: computed rgb(222, 222, 222); AI role: Light gray (#DEDEDE) used for borders around feature cards.",
      "sampleId": "color-22",
      "confidence": 0.9
    },
    {
      "hex": "#FFE28B",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(255, 226, 139); AI role: Soft yellow (#FFE28B) used as a distinct background color for specific testimonial cards.",
      "sampleId": "color-5",
      "confidence": 0.85
    },
    {
      "hex": "#4A4A4A",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-12: computed rgb(74, 74, 74); AI role: Dark gray (#4A4A4A) used for secondary or less prominent text, like article metadata.",
      "sampleId": "color-12",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Primary buttons: full pill (approx 999px). Cards: medium rounding (approx 12-16px).",
  "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).",
  "borderStyle": "Subtle, solid borders (e.g., #DEDEDE) used to delineate white cards against the white background. Outlined buttons use a thin solid border.",
  "buttonStyle": "Solid fill with contrasting text (black on white, or white on black) in a fully rounded pill shape. Minimal padding.",
  "cornerStyle": "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.",
  "contentWidth": "Content is generally centered and constrained to a standard max-width, maintaining readability across sections.",
  "spacingRhythm": "Sections are separated by large swaths of white space, creating a calm, deliberate reading pace. Internal card padding is generous."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1440×714px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 6, 8px.
- Representative content widths: 915, 913, 715, 511, 384, 288px.
- Layout containers: 3; cards/surfaces: 0; media elements: 3; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 5260,
      "bottom": 5882,
      "pageHeight": 6910
    }
  },
  "container": {
    "size": "1440×714px",
    "position": "x 0px, y 5170px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      915,
      913,
      715,
      511,
      384,
      288
    ]
  },
  "columns": [
    {
      "element": "a · 20 Oct 2026 · 5 min readIntroducing Different: $48M to change how B2B marketing gets doneDifferent i",
      "size": "384×429px",
      "position": "x 120px, y 5359px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · 20 Oct 2026 · 3 min readEvery buyer is different. Descope talks to them differently.With two markete",
      "size": "384×429px",
      "position": "x 528px, y 5359px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    },
    {
      "element": "a · 20 Oct 2026 · 3 min readMotif punches above its weightMotif’s three-person marketing team went from",
      "size": "384×429px",
      "position": "x 936px, y 5359px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · home-note_img is-forest",
    "size": "915×465px",
    "position": "x 23px, y 5359px",
    "aspectRatio": 2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7025562548f331a3c94fa_different-ai-treehouses-rope-bridges-forest.webp"
  },
  {
    "element": "img · home-note_img is-mountain",
    "size": "913×457px",
    "position": "x 569px, y 5119px",
    "aspectRatio": 2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad70254d81e4467155a9499_different-ai-hot-air-balloons-red-mountains.webp"
  },
  {
    "element": "img · home-note_img is-city",
    "size": "715×358px",
    "position": "x -211px, y 5342px",
    "aspectRatio": 2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7025318cb51661d09f6da_different-ai-team-high-rise-window-futuristic-city-p-1600.webp"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": {
    "id": "ld-579",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 5170,
      "width": 1440,
      "height": 714
    },
    "role": null,
    "label": "Field notes from our world.Read all field notes →20 Oct 2026 · 5 min readIntroducing Different: $48M",
    "border": "0px none rgb(0, 0, 0)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-625",
      "tag": "img",
      "rect": {
        "x": 23,
        "y": 5359,
        "width": 915,
        "height": 465
      },
      "role": null,
      "label": "home-note_img is-forest",
      "media": {
        "alt": "Illustration of treehouses linked by rope bridges in a green forest canopy",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7025562548f331a3c94fa_different-ai-treehouses-rope-bridges-forest.webp",
        "naturalWidth": 1440,
        "naturalHeight": 731
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-632",
      "tag": "img",
      "rect": {
        "x": 569,
        "y": 5119,
        "width": 913,
        "height": 457
      },
      "role": null,
      "label": "home-note_img is-mountain",
      "media": {
        "alt": "Illustration of hot-air balloons drifting over red mountains",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad70254d81e4467155a9499_different-ai-hot-air-balloons-red-mountains.webp",
        "naturalWidth": 1440,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-618",
      "tag": "img",
      "rect": {
        "x": -211,
        "y": 5342,
        "width": 715,
        "height": 358
      },
      "role": null,
      "label": "home-note_img is-city",
      "media": {
        "alt": "Illustration of two people at a high-rise window looking out over a green, futuristic city",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7025318cb51661d09f6da_different-ai-team-high-rise-window-futuristic-city-p-1600.webp",
        "naturalWidth": 1440,
        "naturalHeight": 720
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 5260,
    "bottom": 5882,
    "pageHeight": 6910
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-616",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 120,
        "y": 5359,
        "width": 384,
        "height": 429
      },
      "role": null,
      "label": "20 Oct 2026 · 5 min readIntroducing Different: $48M to change how B2B marketing gets doneDifferent i",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-623",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 528,
        "y": 5359,
        "width": 384,
        "height": 429
      },
      "role": null,
      "label": "20 Oct 2026 · 3 min readEvery buyer is different. Descope talks to them differently.With two markete",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-630",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 936,
        "y": 5359,
        "width": 384,
        "height": 429
      },
      "role": null,
      "label": "20 Oct 2026 · 3 min readMotif punches above its weightMotif’s three-person marketing team went from ",
      "columns": null,
      "display": "flex",
      "direction": "column"
    }
  ],
  "spacing": {
    "gapsPx": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      915,
      913,
      715,
      511,
      384,
      288
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 3,
    "animations": 0,
    "elementsInSection": 22
  },
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-22T06:21:51.117Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

1. **scroll** — The page scrolls down to a section titled 'Field notes from our', displaying a grid of articles or blog posts. (15s–18s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: low
- What transfers: Three-column card grid with image-title-excerpt-link structure; Section header with 'view all' link pattern; Metadata line above title for date/read-time
- Dependencies: Custom illustration assets for thumbnails; Specific typefaces (Feature Display, PP Neue Montreal Text, PP Fraktion Mono)
- Guidance: Reuse the grid skeleton and card hierarchy with swapped imagery and copy; typography and color tokens can be restyled without altering layout logic.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original editorial section inspired by the design evidence titled “Illustrated Article Grid”.

Purpose: A three-column grid of editorial articles, each featuring a stylized illustration thumbnail above a title, summary, and 'Read article' link.

Structure: Three identical columns mapping to individual blog or article cards beneath a section header.. Source layout label: Three identical columns mapping to individual blog or article cards beneath a section header.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Classic editorial blog grid unified by custom illustrative artwork in the thumbnails.

Components: section header, view all link, article thumbnails, article titles, article excerpts, text links.

Style direction: editorial, illustrative.

Observed crop: 1440×622px (2.315:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"90px","family":"Feature Display","source":"computed","traits":"Regular","weight":"300","evidence":"font-18: computed CSS at 1440×1000; AI role: Feature Display at 90px used for the main hero heading ('Every marketer is').","sampleId":"font-18","confidence":1,"lineHeight":"99px","letterSpacing":"-0.9px"} {"role":"heading","size":"30px","family":"Feature Display","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Feature Display at 30px used for secondary section headings like 'Build your world, one journey at a time.'","sampleId":"font-1","confidence":0.9,"lineHeight":"33px","letterSpacing":"-0.3px"} {"role":"body","size":"20px","family":"PP Neue Montreal Text","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: PP Neue Montreal Text at 20px used for primary body paragraphs, such as under the hero heading.","sampleId":"font-4","confidence":0.95,"lineHeight":"25px","letterSpacing":"-0.8px"} {"role":"mono","size":"15px","family":"PP Fraktion Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-5: computed CSS at 1440×1000; AI role: PP Fraktion Mono at 15px used for small, uppercase labels like 'Explorer' and 'Crafter'.","sampleId":"font-5","confidence":0.9,"lineHeight":"18.8px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"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.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"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.","sampleId":"color-2","confidence":1} {"hex":"#121212","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(18, 18, 18); AI role: Near-black (#121212) used as the background color for primary 'Book a demo' buttons.","sampleId":"color-13","confidence":0.95} {"hex":"#DEDEDE","name":"border","role":"border","source":"computed","evidence":"color-22: computed rgb(222, 222, 222); AI role: Light gray (#DEDEDE) used for borders around feature cards.","sampleId":"color-22","confidence":0.9} {"hex":"#FFE28B","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(255, 226, 139); AI role: Soft yellow (#FFE28B) used as a distinct background color for specific testimonial cards.","sampleId":"color-5","confidence":0.85} {"hex":"#4A4A4A","name":"muted text","role":"muted-text","source":"computed","evidence":"color-12: computed rgb(74, 74, 74); AI role: Dark gray (#4A4A4A) used for secondary or less prominent text, like article metadata.","sampleId":"color-12","confidence":0.85}

Typography measured inside this section: {"id":"font-2","size":"22px","count":3,"family":"PP Neue Montreal","traits":"Regular","weight":"500","contexts":[{"tag":"h3","top":5612,"text":"Introducing Different: $48M to change how B2B marketing gets done","property":"font"},{"tag":"h3","top":5612,"text":"Every buyer is different. Descope talks to them differently.","property":"font"},{"tag":"h3","top":5612,"text":"Motif punches above its weight","property":"font"}],"fontStack":"\"PP Neue Montreal\", sans-serif","lineHeight":"24.2px","letterSpacing":"-0.2px"} {"id":"font-10","size":"16px","count":4,"family":"PP Neue Montreal Text","traits":"Regular","weight":"400","contexts":[{"tag":"a","top":5299,"text":"Read all field notes →","property":"font"},{"tag":"p","top":5660,"text":"Different is an AI marketing system that runs demand generation end-to-end for lean B2B marketing te","property":"font"},{"tag":"p","top":5660,"text":"With two marketers, Descope runs up to seven programs at once, writes for every persona and hands sa","property":"font"}],"fontStack":"\"PP Neue Montreal Text\", sans-serif","lineHeight":"20px","letterSpacing":"-0.6px"} {"id":"font-21","size":"14px","count":6,"family":"PP Neue Montreal","traits":"Regular","weight":"500","contexts":[{"tag":"div","top":5562,"text":"20 Oct 2026 · 5 min read","property":"font"},{"tag":"div","top":5769,"text":"Read article","property":"font"},{"tag":"div","top":5562,"text":"20 Oct 2026 · 3 min read","property":"font"}],"fontStack":"\"PP Neue Montreal\", sans-serif","lineHeight":"17.5px","letterSpacing":"-0.1px"} {"id":"font-38","size":"20px","count":1,"family":"Feature Display","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":5299,"text":"→","property":"font"}],"fontStack":"\"Feature Display\", sans-serif","lineHeight":"20px","letterSpacing":"-0.6px"}

Colors measured inside this section: {"id":"color-12","hex":"#4A4A4A","alpha":1,"count":11,"contexts":[{"tag":"p","top":1478,"text":"There are more channels to coordinate, more buyers to reach and less time to know if any of it is wo","property":"text"},{"tag":"div","top":5562,"text":"20 Oct 2026 · 5 min read","property":"text"}],"cssValue":"rgb(74, 74, 74)"} {"id":"color-26","hex":"#131313","alpha":1,"count":2,"contexts":[{"tag":"a","top":5299,"text":"Read all field notes →","property":"text"},{"tag":"span","top":5299,"text":"→","property":"text"}],"cssValue":"rgb(19, 19, 19)"} {"id":"color-34","hex":"#787878","alpha":1,"count":3,"contexts":[{"tag":"div","top":5769,"text":"Read article","property":"border"}],"cssValue":"rgb(120, 120, 120)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5170,"width":1440,"height":714},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,8],"representativeContentWidthsPx":[915,913,715,511,384,288]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":23,"y":5359,"width":915,"height":465},"aspectRatio":2,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":569,"y":5119,"width":913,"height":457},"aspectRatio":2,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":-211,"y":5342,"width":715,"height":358},"aspectRatio":2,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: The page scrolls down to a section titled 'Field notes from our', displaying a grid of articles or blog posts. (95% confidence)

Transfer these principles: Three-column card grid with image-title-excerpt-link structure; Section header with 'view all' link pattern; Metadata line above title for date/read-time.

Dependencies: Custom illustration assets for thumbnails; Specific typefaces (Feature Display, PP Neue Montreal Text, PP Fraktion Mono).

Adaptation guidance: Reuse the grid skeleton and card hierarchy with swapped imagery and copy; typography and color tokens can be restyled without altering layout logic.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.