# Minimalist Logo Cloud

Schema: Design Details SECTION.md v3.2
Website: Different
Source: https://www.different.ai/
Source section IDs: 5d3bcd05-5ddc-47fa-8926-2eaa5acc5ec5
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: logo-cloud
- Layout: Single horizontal row of evenly spaced logos.
- Styles: minimal, corporate
- Confidence: 95%

## Purpose and structure

A simple row of customer or partner logos presented in monochrome against a light background.

Visual signature: Unobtrusive monochrome logo bar separating content sections.

## Components

- company logos

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

- No section-specific authored motion was established.

## Section quality

Overall: 51.54/100 (Competent)
Scored coverage: 65%

- Typography: not_assessed — Section contains only logo marks, no typographic treatment specific to this section beyond the logos themselves. Next tier: No typography is present in this section to assess.
- Composition: 55 — A clean, evenly spaced horizontal row of seven monochrome logos on white, with reasonable alignment and spacing variety by logo width. This is a standard, familiar logo-cloud layout with no distinguishing structural idea beyond basic centering and spacing. Next tier: Lacks any distinctive grid, framing, dividers, or spatial treatment that would elevate it beyond a default partner-logo row.
- Motion: not_assessed — No motion data supplied; the label referencing a '.logos_track' animation and aria-hidden duplicate suggests a marquee/loop may exist, but no timestamped visible motion evidence was provided. Next tier: Requires timestamped visible motion evidence to assess marquee or hover behavior.
- Content: 52 — Logos are real client/partner marks, cleanly reproduced at legible sizes, appropriately desaturated/monochrome-feeling in presentation, serving a straightforward trust-signal purpose. Next tier: Content is purely a logo list with no supporting copy, categorization, or context that would deepen integration with surrounding narrative.
- Originality: 40 — This is one of the most conventional, ubiquitous patterns in web design—a static row of partner logos on white. Nothing here departs from the default template. Next tier: Would need a distinctive interaction, layout conceit, or visual treatment (e.g. unusual grouping, reveal, or framing device) to move past a purely generic pattern.
- Adaptability: 58 — The structure (flex row, fixed logo slots, white background) is simple and cleanly separable from the specific logo assets; swapping logos or reflowing for responsive breakpoints is straightforward given the DOM evidence. Next tier: No responsive or interactive behavior was supplied to confirm adaptability beyond the static desktop arrangement.

Strengths:
- Logos are evenly sized and aligned on a consistent baseline, producing a tidy, uncluttered row
- Ample whitespace above and below keeps the strip from competing with neighboring sections

Weaknesses:
- Pattern is entirely generic with no distinguishing layout, framing, or interaction idea
- No supporting label, heading, or context text tying the logos to a claim or category
- Possible marquee animation (suggested by DOM class names) is not evidenced with timestamps, so any dynamism cannot be credited

Why it does not reach the next tier: The section executes the most standard logo-cloud pattern competently but adds no structural or visual idea—no dividers, grouping, framing, scale variation, or confirmed motion—that would differentiate it from thousands of identical partner-logo rows.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the evenly spaced flex-row structure and fixed vertical centering for logos of varying aspect ratio; swap in new client marks and adjust gap spacing to taste. Confirm whether a looping marquee exists before deciding to replicate it.

What transfers:
- Flex-row logo layout with generous whitespace
- Monochrome/light treatment of partner marks
- Fixed-height logo slots independent of logo aspect ratio

Dependencies:
- Specific partner logo assets and their individual aspect ratios
- Any marquee/loop animation implementation referenced by class names but not confirmed

## 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 motion timestamps supplied despite DOM hints of a possible marquee/track animation
- No typography present within this specific section crop to evaluate
- Cannot confirm responsive behavior at other breakpoints

## 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: logo-cloud
- Source type: logo-cloud
- Structure: horizontal sequence
- Layout: Single horizontal row of evenly spaced logos.
- Styles: minimal, corporate
- Components: company logos
- Purpose: A simple row of customer or partner logos presented in monochrome against a light background.
- Visual signature: Unobtrusive monochrome logo bar separating content sections.

### Crop and composition

- Crop: 1440×228px; aspect ratio 6.316:1
- Page bounds: 2818–3046px of 6910px
- Guidance: Preserve the sense of continuation with a visible next item, progress cue, or directional control.

### 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": [],
  "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": "#F0F0F0",
      "cssValue": "rgb(240, 240, 240)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-4"
    }
  ],
  "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×228px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Layout containers: 0; cards/surfaces: 0; media elements: 7; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 2818,
      "bottom": 3046,
      "pageHeight": 6910
    }
  },
  "container": {
    "size": "1440×228px",
    "position": "x 0px, y 2818px",
    "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": "rgb(255, 255, 255)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

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

#### Media treatment

```json
[
  {
    "element": "img · logos_mark is-armorcode",
    "size": "208×52px",
    "position": "x 1192px, y 2906px",
    "aspectRatio": 4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de100a176cda6365a63_logo-armorcode.webp"
  },
  {
    "element": "img · logos_mark is-pantomath",
    "size": "175×52px",
    "position": "x 978px, y 2906px",
    "aspectRatio": 3.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed72_logo-pantomath.webp"
  },
  {
    "element": "img · logos_mark is-lensing",
    "size": "239×28px",
    "position": "x 384px, y 2916px",
    "aspectRatio": 8.5,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de150dab9a224fd2073_logo-lensing.webp"
  },
  {
    "element": "img · logos_mark is-descope",
    "size": "148×35px",
    "position": "x 197px, y 2915px",
    "aspectRatio": 4.2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de150dab9a224fd205d_logo-descope.webp"
  },
  {
    "element": "img · logos_mark is-straiker",
    "size": "138×32px",
    "position": "x 801px, y 2916px",
    "aspectRatio": 4.3,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d772_logo-straiker.webp"
  },
  {
    "element": "img · logos_mark is-rox",
    "size": "101×30px",
    "position": "x 662px, y 2917px",
    "aspectRatio": 3.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed88_logo-rox.webp"
  },
  {
    "element": "img · logos_mark is-motif",
    "size": "119×24px",
    "position": "x 40px, y 2920px",
    "aspectRatio": 5,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d736_logo-motif.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-154",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 2818,
      "width": 1440,
      "height": 228
    },
    "role": null,
    "label": ".logos_track{animation:none!important;transform:none!important} .logos_track[aria-hidden=\"true\"]{dis",
    "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": "rgb(255, 255, 255)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-165",
      "tag": "img",
      "rect": {
        "x": 1192,
        "y": 2906,
        "width": 208,
        "height": 52
      },
      "role": null,
      "label": "logos_mark is-armorcode",
      "media": {
        "alt": "ArmorCode",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de100a176cda6365a63_logo-armorcode.webp",
        "naturalWidth": 725,
        "naturalHeight": 181
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-164",
      "tag": "img",
      "rect": {
        "x": 978,
        "y": 2906,
        "width": 175,
        "height": 52
      },
      "role": null,
      "label": "logos_mark is-pantomath",
      "media": {
        "alt": "Pantomath",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed72_logo-pantomath.webp",
        "naturalWidth": 1020,
        "naturalHeight": 303
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 3.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-161",
      "tag": "img",
      "rect": {
        "x": 384,
        "y": 2916,
        "width": 239,
        "height": 28
      },
      "role": null,
      "label": "logos_mark is-lensing",
      "media": {
        "alt": "Lensing",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de150dab9a224fd2073_logo-lensing.webp",
        "naturalWidth": 1440,
        "naturalHeight": 168
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 8.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-160",
      "tag": "img",
      "rect": {
        "x": 197,
        "y": 2915,
        "width": 148,
        "height": 35
      },
      "role": null,
      "label": "logos_mark is-descope",
      "media": {
        "alt": "Descope",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de150dab9a224fd205d_logo-descope.webp",
        "naturalWidth": 1440,
        "naturalHeight": 339
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 4.2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-163",
      "tag": "img",
      "rect": {
        "x": 801,
        "y": 2916,
        "width": 138,
        "height": 32
      },
      "role": null,
      "label": "logos_mark is-straiker",
      "media": {
        "alt": "Straiker",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d772_logo-straiker.webp",
        "naturalWidth": 1440,
        "naturalHeight": 333
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 4.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-162",
      "tag": "img",
      "rect": {
        "x": 662,
        "y": 2917,
        "width": 101,
        "height": 30
      },
      "role": null,
      "label": "logos_mark is-rox",
      "media": {
        "alt": "Rox",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed88_logo-rox.webp",
        "naturalWidth": 742,
        "naturalHeight": 221
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 3.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-159",
      "tag": "img",
      "rect": {
        "x": 40,
        "y": 2920,
        "width": 119,
        "height": 24
      },
      "role": null,
      "label": "logos_mark is-motif",
      "media": {
        "alt": "Motif",
        "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d736_logo-motif.webp",
        "naturalWidth": 1440,
        "naturalHeight": 291
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 5,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 2818,
    "bottom": 3046,
    "pageHeight": 6910
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": []
  },
  "coverage": {
    "cards": 0,
    "media": 7,
    "animations": 0,
    "elementsInSection": 8
  },
  "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

No timestamped authored motion is attached. Use only restrained baseline transitions.

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: Flex-row logo layout with generous whitespace; Monochrome/light treatment of partner marks; Fixed-height logo slots independent of logo aspect ratio
- Dependencies: Specific partner logo assets and their individual aspect ratios; Any marquee/loop animation implementation referenced by class names but not confirmed
- Guidance: Reuse the evenly spaced flex-row structure and fixed vertical centering for logos of varying aspect ratio; swap in new client marks and adjust gap spacing to taste. Confirm whether a looping marquee exists before deciding to replicate it.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original logo-cloud section inspired by the design evidence titled “Minimalist Logo Cloud”.

Purpose: A simple row of customer or partner logos presented in monochrome against a light background.

Structure: horizontal sequence. Source layout label: Single horizontal row of evenly spaced logos.. Preserve the sense of continuation with a visible next item, progress cue, or directional control.

Visual signature to preserve at the pattern level: Unobtrusive monochrome logo bar separating content sections.

Components: company logos.

Style direction: minimal, corporate.

Observed crop: 1440×228px (6.316: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}

No section-bounded typography samples were measured.

Colors measured inside this section: {"id":"color-4","hex":"#F0F0F0","alpha":1,"count":1,"contexts":[{"tag":"section","top":3046,"text":"AI that runs your demand gen, end to end.Journey · Mid-market expansionDRAFTLinkedIn ad8 variants→La","property":"background"}],"cssValue":"rgb(240, 240, 240)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2818,"width":1440,"height":228},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":1192,"y":2906,"width":208,"height":52},"aspectRatio":4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":978,"y":2906,"width":175,"height":52},"aspectRatio":3.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":384,"y":2916,"width":239,"height":28},"aspectRatio":8.5,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":197,"y":2915,"width":148,"height":35},"aspectRatio":4.2,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Flex-row logo layout with generous whitespace; Monochrome/light treatment of partner marks; Fixed-height logo slots independent of logo aspect ratio.

Dependencies: Specific partner logo assets and their individual aspect ratios; Any marquee/loop animation implementation referenced by class names but not confirmed.

Adaptation guidance: Reuse the evenly spaced flex-row structure and fixed vertical centering for logos of varying aspect ratio; swap in new client marks and adjust gap spacing to taste. Confirm whether a looping marquee exists before deciding to replicate it.

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