# Integration logo grid

Schema: Design Details SECTION.md v3.2
Website: PayPath
Source: https://paypath.ai/
Source section IDs: gap-4c41a96c-3438-4006
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The left-text, right-grid split gives the headline room while the logo field carries the proof of integrations.
- Logos are desaturated to grey on a deep green-black canvas, so the single bright green tile becomes an instant focal point.
- The grid fades toward its edges, adding depth without clutter, and the serif headline contrasts cleanly with the small CTA label.

What a screenshot can't show:
- The recording shows only a static state with one logo highlighted in green, so no timing or transition is known.
- No font sizes, tracking, line height or section padding were measured, so those values must be chosen by eye.

Borrow: Mute a whole field of similar items and give just one a saturated accent to create a focal point and hint at interactivity.
Leave alone: Don't copy PayPath's dark green canvas, lime highlight tile or display serif; use your own palette and a free serif alternative like a Fraunces-style face.

## Classification

- Type: logo-cloud
- Layout: Left-aligned text and CTA, right-aligned dense grid of logos.
- Styles: minimal
- Confidence: 95%

## Purpose and structure

A dark section displaying a dense grid of small integration logos, with one highlighted in green.

Visual signature: A dark section with a constellation of small grey tech logos on the right, punctuated by a single bright green square.

## Components

- text block
- CTA button
- logo grid

## Typography

- Display: Season Mix Regular — 72px 420
- Heading: Season Mix Regular — 64px 420
- Body: Geist — 16px 400
- Mono: JetBrains Mono — 11px 500

## Functional palette

- Canvas: canvas #0E1711
- Text: text #FCFAEE
- Primary-Action: primary action #A2F08C
- Surface: surface #F5F4F4

## Motion evidence

- 22.0–25.0s — The page displays a grid of logos under the text 'Works with your existing stack.' One logo is highlighted in a green box. (85% confidence)

## Section quality

Overall: 58.41/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Uses the site's established display serif for the headline with tight tracking against a dark field; clean two-line wrap and clear scale contrast with mono-ish CTA label, but nothing in this crop extends beyond standard hero-style heading treatment. Next tier: No distinctive type behavior (scale pairing, mixed case, kinetic treatment) unique to this section beyond reused global heading style.
- Composition: 62 — Clear left-text/right-grid split with a logo field that fades toward the edges, creating depth without clutter; the single green highlight gives the grid a focal anchor. Grid itself is loosely scattered rather than rigorously aligned, and the balance leans heavily right leaving the left side sparse. Next tier: Grid alignment is irregular/loose rather than precisely gridded, and the layout doesn't introduce a structural idea beyond text-left, logos-right convention.
- Motion: inconclusive — Gemini only notes a static state with one highlighted logo; no timestamped change, transition, or animation behavior is described. Next tier: Need explicit before/after motion evidence (e.g., highlight cycling, logos fading in) with timestamps to assess.
- Content: 55 — Logos are legible brand marks integrated into a dark field with consistent desaturation except the highlighted one, giving functional meaning (integration partners) but using a very common logo-cloud convention. Next tier: Content treatment doesn't go beyond standard desaturated logo wall; no narrative grouping, categorization, or interactive layer evident.
- Originality: 56 — The single green-highlighted logo against a muted grid is a small distinguishing touch, but the overall pattern-dark background, scattered logo cloud, CTA pill-is a widely used SaaS convention. Next tier: Needs a more unexpected structural or interactive twist beyond one color-flagged tile to feel non-generic.
- Adaptability: 60 — Text block, CTA, and logo grid are clearly separable components with an evident skin (dark canvas, green accent) that could be swapped for another logo set or palette with moderate effort. Next tier: No explicit grid system or logo-count logic is specified, so exact replication of spacing/scatter pattern requires guesswork.

Strengths:
- Clear focal hierarchy created by the single green-highlighted logo amid a muted grid
- Legible left-aligned headline and CTA paired against a dense but restrained logo field
- Consistent dark palette ties the section visually to the rest of the site

Weaknesses:
- Logo grid alignment is loose/scattered rather than deliberately gridded
- Convention follows a very common SaaS logo-cloud pattern without a structural twist
- No visible motion evidence to assess dynamic behavior
- Left side of composition feels sparse relative to the dense right side

Why it does not reach the next tier: The section executes a familiar logo-cloud pattern competently with one nice accent (green highlight) but lacks a distinctive structural idea, precise grid discipline, or demonstrated motion that would push it into memorable or wow territory.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the two-column layout and the desaturate-all-but-one highlight technique; swap logo assets and accent color per brand, but tighten grid alignment for a more deliberate look if going for a higher-tier result.

What transfers:
- Left text/CTA plus right logo-grid layout
- Single accent-color highlight mechanic on one grid tile
- Dark canvas with desaturated logo treatment

Dependencies:
- Specific integration logo assets
- Exact logo count and scatter arrangement
- Brand color token for highlight accent

## 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 with specific before/after changes were supplied, so motion is unscored.
- Exact grid spacing and alignment rules are not deterministically specified, limiting precision of adaptability assessment.

## 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: grid
- Layout: Left-aligned text and CTA, right-aligned dense grid of logos.
- Styles: minimal
- Components: text block, CTA button, logo grid
- Purpose: A dark section displaying a dense grid of small integration logos, with one highlighted in green.
- Visual signature: A dark section with a constellation of small grey tech logos on the right, punctuated by a single bright green square.
- Place on the page: 3 of 12, after Feature collection (`paypath-ai:C01`), before Feature collection (`paypath-ai:C02`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

### 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": "72px",
      "family": "Season Mix Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "420",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Largest 'Season Mix' text at 72px for the main hero headline.",
      "sampleId": "font-4",
      "confidence": 1,
      "lineHeight": "72px",
      "letterSpacing": "-2.2px"
    },
    {
      "role": "heading",
      "size": "64px",
      "family": "Season Mix Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "420",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 'Season Mix' at 64px for major section headings.",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "73.6px",
      "letterSpacing": "-1.9px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-12: computed CSS at 1440×1000; AI role: 'Geist' at 16px used for readable descriptive text and FAQ questions.",
      "sampleId": "font-12",
      "confidence": 0.9,
      "lineHeight": "24px",
      "letterSpacing": "-0.5px"
    },
    {
      "role": "mono",
      "size": "11px",
      "family": "JetBrains Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: 'JetBrains Mono' at 11px uppercase used for small labels and UI details.",
      "sampleId": "font-10",
      "confidence": 0.9,
      "lineHeight": "15.4px",
      "letterSpacing": "0.3px"
    }
  ]
}
```

### 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": [],
  "functionalPalette": [
    {
      "hex": "#0E1711",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(14, 23, 17); AI role: Deep dark green/black (#0E1711) used as the primary background for the page.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FCFAEE",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-6: computed rgb(252, 250, 238); AI role: Off-white (#FCFAEE) used for primary headings and prominent text.",
      "sampleId": "color-6",
      "confidence": 0.95
    },
    {
      "hex": "#A2F08C",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-13: computed rgb(162, 240, 140); AI role: Bright neon green (#A2F08C) used for primary buttons, highlights, and active states.",
      "sampleId": "color-13",
      "confidence": 0.95
    },
    {
      "hex": "#F5F4F4",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-2: computed rgb(245, 244, 244); AI role: Light gray (#F5F4F4) used as an alternating background for the FAQ/Security section.",
      "sampleId": "color-2",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons and badges are fully rounded (pill shapes); floating UI panels feature medium border radii (e.g., 12px-16px).",
  "density": "Overall low density to emphasize the premium, cinematic feel, but high density within the specific 'product UI' mockups.",
  "evidence": "Observed from the full-page layout, distinct UI card shapes, button styling in the nav and hero, and structural alignment.",
  "borderStyle": "Subtle borders primarily used on the light background section (FAQ dividers) and very subtle, semi-transparent borders on floating dark UI cards to define edges.",
  "buttonStyle": "Pill-shaped, solid fill (neon green or white) with contrasting text, or ghost buttons with subtle borders.",
  "cornerStyle": "Combination of sharp edges on large images and distinct, varied rounding on UI components (some slightly rounded, some heavily pill-shaped).",
  "contentWidth": "Wide, fluid layouts for backgrounds with centered, constrained text blocks and asymmetrical grids extending near the edges.",
  "spacingRhythm": "Generous spacing with large vertical gaps between major sections to allow background effects to breathe; tighter, structured padding within UI components."
}
```

### Reconstruction specification

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

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

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

### Observed motion

1. **observed sequence** — The page displays a grid of logos under the text 'Works with your existing stack.' One logo is highlighted in a green box. (22s–25s; 85% 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: unknownpx 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: Left text/CTA plus right logo-grid layout; Single accent-color highlight mechanic on one grid tile; Dark canvas with desaturated logo treatment
- Dependencies: Specific integration logo assets; Exact logo count and scatter arrangement; Brand color token for highlight accent
- Guidance: Reuse the two-column layout and the desaturate-all-but-one highlight technique; swap logo assets and accent color per brand, but tighten grid alignment for a more deliberate look if going for a higher-tier result.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original logo-cloud section inspired by the design evidence titled “Integration logo grid”.

Purpose: A dark section displaying a dense grid of small integration logos, with one highlighted in green.

Structure: grid. Source layout label: Left-aligned text and CTA, right-aligned dense grid of logos.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

Visual signature to preserve at the pattern level: A dark section with a constellation of small grey tech logos on the right, punctuated by a single bright green square.

Components: text block, CTA button, logo grid.

Style direction: minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"72px","family":"Season Mix Regular","source":"computed","traits":"Regular","weight":"420","evidence":"font-4: computed CSS at 1440×1000; AI role: Largest 'Season Mix' text at 72px for the main hero headline.","sampleId":"font-4","confidence":1,"lineHeight":"72px","letterSpacing":"-2.2px"} {"role":"heading","size":"64px","family":"Season Mix Regular","source":"computed","traits":"Regular","weight":"420","evidence":"font-3: computed CSS at 1440×1000; AI role: 'Season Mix' at 64px for major section headings.","sampleId":"font-3","confidence":0.95,"lineHeight":"73.6px","letterSpacing":"-1.9px"} {"role":"body","size":"16px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: 'Geist' at 16px used for readable descriptive text and FAQ questions.","sampleId":"font-12","confidence":0.9,"lineHeight":"24px","letterSpacing":"-0.5px"} {"role":"mono","size":"11px","family":"JetBrains Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-10: computed CSS at 1440×1000; AI role: 'JetBrains Mono' at 11px uppercase used for small labels and UI details.","sampleId":"font-10","confidence":0.9,"lineHeight":"15.4px","letterSpacing":"0.3px"}

Color evidence: {"hex":"#0E1711","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(14, 23, 17); AI role: Deep dark green/black (#0E1711) used as the primary background for the page.","sampleId":"color-1","confidence":0.95} {"hex":"#FCFAEE","name":"text","role":"text","source":"computed","evidence":"color-6: computed rgb(252, 250, 238); AI role: Off-white (#FCFAEE) used for primary headings and prominent text.","sampleId":"color-6","confidence":0.95} {"hex":"#A2F08C","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(162, 240, 140); AI role: Bright neon green (#A2F08C) used for primary buttons, highlights, and active states.","sampleId":"color-13","confidence":0.95} {"hex":"#F5F4F4","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(245, 244, 244); AI role: Light gray (#F5F4F4) used as an alternating background for the FAQ/Security section.","sampleId":"color-2","confidence":0.9}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: observed sequence: The page displays a grid of logos under the text 'Works with your existing stack.' One logo is highlighted in a green box. (85% confidence)

Transfer these principles: Left text/CTA plus right logo-grid layout; Single accent-color highlight mechanic on one grid tile; Dark canvas with desaturated logo treatment.

Dependencies: Specific integration logo assets; Exact logo count and scatter arrangement; Brand color token for highlight accent.

Adaptation guidance: Reuse the two-column layout and the desaturate-all-but-one highlight technique; swap logo assets and accent color per brand, but tighten grid alignment for a more deliberate look if going for a higher-tier result.

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