# Customer logo row

Schema: Design Details SECTION.md v3.2
Website: Cogent
Source: https://www.cogent.com/
Source section IDs: gap-7f49e2ea-1743-2296
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A small centered caption sets the purpose before the logos, so visitors know it is a trust signal at a glance.
- Logos sit in one evenly spaced horizontal row with generous whitespace around them, which keeps the row calm and easy to scan.
- The white band, with full-color brand marks, stands apart from the dark site around it and makes the recognizable names pop.

What a screenshot can't show:
- The recording showed no motion, so there is no evidence of hover, scroll or marquee behavior.
- No font sizes, spacing or padding were measured, so exact sizing is unknown.

Borrow: Give proof points their own clean, contrasting band with a short caption and evenly spaced marks so recognition happens instantly.
Leave alone: Don't copy the mix of logo styles (script, serif, badge) or the white band against the black site; normalize logos to a consistent height or tone in your own design.

## Classification

- Type: logo-cloud
- Layout: Horizontal logo row
- Styles: minimal, corporate
- Confidence: 95%

## Purpose and structure

A simple horizontal row of customer logos on a white background.

Visual signature: A standard logo cloud featuring well-known brand logos in full color.

## Components

- logo-row
- section-heading

## Typography

- Display: Geist Pixel Circle — 55px 400
- Heading: Geist — 60px 400
- Body: Geist — 16px 400
- Mono: Geist Mono — 10px 500

## Functional palette

- Canvas: canvas #000000
- Text: text #FFFFFF
- Surface: surface #111112
- Muted-Text: muted text #768393

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 52 — A simple, small centered caption line in a plain sans-serif sits above the logos; adequate but generic hierarchy with no distinctive typographic treatment. Next tier: No scale contrast, weight variation, or typographic personality beyond a single muted caption line.
- Composition: 54 — Even horizontal spacing and centered alignment of logos against generous whitespace is clean but entirely conventional for this pattern. Next tier: Lacks any structural idea beyond evenly spaced row; no grouping, scale variation, or asymmetry to create visual interest.
- Motion: not_assessed — No motion_moments or timestamped evidence provided for this section. Next tier: Requires timestamped visible motion evidence to assess.
- Content: 50 — Logos vary significantly in rendering style (hand-drawn script, bold serif, Fortune 500 badge) which undercuts cohesion despite a legible caption establishing purpose. Next tier: Logo treatments are not unified in scale, weight, or color handling, weakening the row's cohesion as a designed system.
- Originality: 40 — This is the most generic possible execution of a logo cloud pattern with no distinguishing visual idea. Next tier: Needs a distinct compositional or interaction idea (motion, grouping, framing) to differentiate from the default template pattern.
- Adaptability: 58 — The row structure, caption, and logo placement are cleanly separable from the dark site skin since this section itself has a white background and simple logo marks. Next tier: No distinctive mechanism (e.g., scroll loop, hover states) exists to extract beyond basic static layout.

Strengths:
- Clear, legible caption establishing the section's trust-signal purpose
- Even, uncluttered spacing between logos avoids visual noise

Weaknesses:
- Logos differ widely in style, weight, and visual density, creating an inconsistent row
- No typographic or structural distinction beyond the default centered logo-row template
- No visible motion or interactive behavior to study
- Caption and logos occupy a disproportionately small portion of the crop with excessive empty space above

Why it does not reach the next tier: The section executes a completely standard logo-cloud pattern with no structural, typographic, or motion idea to elevate it past a baseline, functional trust-signal row.

## Adaptation guidance

- Effort: Low
- Guidance: Can be reproduced as a generic logo-cloud component; swap logo assets and caption text, keep centered alignment and whitespace padding.

What transfers:
- Centered caption + horizontal logo row layout
- Even spacing rhythm between logo marks

Dependencies:
- Specific customer logo assets
- Caption copy referencing audience segment

## 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 evidence supplied
- Only a static crop without scroll or interaction context
- Logo color/weight consistency can't be fully judged from crop alone

## 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: Horizontal logo row
- Styles: minimal, corporate
- Components: logo-row, section-heading
- Purpose: A simple horizontal row of customer logos on a white background.
- Visual signature: A standard logo cloud featuring well-known brand logos in full color.
- Place on the page: 4 of 16, after Product UI (`cogent-com:C02`), before Process (`cogent-com:C03`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- 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": "55px",
      "family": "Geist Pixel Circle",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Geist Pixel Circle 55px used for the main hero headline.",
      "sampleId": "font-6",
      "confidence": 1,
      "lineHeight": "60.5px",
      "letterSpacing": "-1.1px"
    },
    {
      "role": "heading",
      "size": "60px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Geist 60px used for standard section H2s.",
      "sampleId": "font-2",
      "confidence": 1,
      "lineHeight": "66px",
      "letterSpacing": "-1.8px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Geist 16px used for primary paragraph text and button labels.",
      "sampleId": "font-9",
      "confidence": 0.95,
      "lineHeight": "22.4px",
      "letterSpacing": "-0.3px"
    },
    {
      "role": "mono",
      "size": "10px",
      "family": "Geist Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: Geist Mono 10px used for technical labels, small caps, and UI elements.",
      "sampleId": "font-10",
      "confidence": 0.9,
      "lineHeight": "14px",
      "letterSpacing": "0.2px"
    }
  ]
}
```

### 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": "#000000",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: Solid black (#000000) used as the primary background for the entire page.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: Solid white (#FFFFFF) used for primary headings and body text.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#111112",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-8: computed rgb(17, 17, 18); AI role: #111112 used for elevated cards and distinct sections.",
      "sampleId": "color-8",
      "confidence": 0.9
    },
    {
      "hex": "#768393",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-13: computed rgb(118, 131, 147); AI role: Grey (#768393) used for secondary descriptions and subtitles.",
      "sampleId": "color-13",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border-radius (likely 8-12px) on buttons and input fields; slightly larger on feature cards.",
  "density": "Spacious. The design relies on large negative space to let the typography and glowing gradients breathe.",
  "evidence": "Observed via screenshot layouts, button shapes in the nav and hero, padding around text blocks, and the containment of elements across different viewport heights.",
  "borderStyle": "Subtle, low-opacity 1px solid borders used to define cards against the dark background without adding visual noise.",
  "buttonStyle": "Primary buttons are solid, high-contrast (white background, black text). Secondary buttons use translucent dark fills with subtle borders.",
  "cornerStyle": "Rounded corners on interactive elements and structural cards, contrasting with the pixelated typography.",
  "contentWidth": "Centered max-width container, likely around 1200px to 1440px for primary content areas.",
  "spacingRhythm": "Generous vertical spacing between major sections (often 120px+). Internal card padding is tight but structured."
}
```

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

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: 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: Centered caption + horizontal logo row layout; Even spacing rhythm between logo marks
- Dependencies: Specific customer logo assets; Caption copy referencing audience segment
- Guidance: Can be reproduced as a generic logo-cloud component; swap logo assets and caption text, keep centered alignment and whitespace padding.

### 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; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

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

Purpose: A simple horizontal row of customer logos on a white background.

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

Visual signature to preserve at the pattern level: A standard logo cloud featuring well-known brand logos in full color.

Components: logo-row, section-heading.

Style direction: minimal, corporate.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"55px","family":"Geist Pixel Circle","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Geist Pixel Circle 55px used for the main hero headline.","sampleId":"font-6","confidence":1,"lineHeight":"60.5px","letterSpacing":"-1.1px"} {"role":"heading","size":"60px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Geist 60px used for standard section H2s.","sampleId":"font-2","confidence":1,"lineHeight":"66px","letterSpacing":"-1.8px"} {"role":"body","size":"16px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Geist 16px used for primary paragraph text and button labels.","sampleId":"font-9","confidence":0.95,"lineHeight":"22.4px","letterSpacing":"-0.3px"} {"role":"mono","size":"10px","family":"Geist Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-10: computed CSS at 1440×1000; AI role: Geist Mono 10px used for technical labels, small caps, and UI elements.","sampleId":"font-10","confidence":0.9,"lineHeight":"14px","letterSpacing":"0.2px"}

Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Solid black (#000000) used as the primary background for the entire page.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: Solid white (#FFFFFF) used for primary headings and body text.","sampleId":"color-2","confidence":1} {"hex":"#111112","name":"surface","role":"surface","source":"computed","evidence":"color-8: computed rgb(17, 17, 18); AI role: #111112 used for elevated cards and distinct sections.","sampleId":"color-8","confidence":0.9} {"hex":"#768393","name":"muted text","role":"muted-text","source":"computed","evidence":"color-13: computed rgb(118, 131, 147); AI role: Grey (#768393) used for secondary descriptions and subtitles.","sampleId":"color-13","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.

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

Transfer these principles: Centered caption + horizontal logo row layout; Even spacing rhythm between logo marks.

Dependencies: Specific customer logo assets; Caption copy referencing audience segment.

Adaptation guidance: Can be reproduced as a generic logo-cloud component; swap logo assets and caption text, keep centered alignment and whitespace padding.

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