# Listenlabs — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://listenlabs.ai/
Captured: 2026-10-14
CSS measured: 2026-10-14T16:23:43.219Z at 1440×1000 — https://listenlabs.ai/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Listen Labs presents a corporate, illustrative design with a strong typographic presence. The layout relies on generous whitespace and a tightly controlled, vibrant primary color palette against warm off-white canvases. Photography and illustrations have distinct, somewhat retro aesthetics, integrating smoothly into the geometric layout. The design emphasizes structured content delivery, evident in the sticky scrolling sections and interactive lists, maintaining a clean and professional appearance.

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: E-commerce, AI
- Styles: corporate, typographic, illustrative, minimal, retro-modern
- Platform: Framer
- Technology: Not identified

## Typography

- Display: Inter — weight 400; size 88px; line-height 88px; tracking -3.5px; Regular (100% role confidence, computed values)
- Heading: Inter — weight 400; size 48px; line-height 57.6px; tracking -1.9px; Regular (90% role confidence, computed values)
- Body: Inter — weight 400; size 14px; line-height 20px; tracking -0.3px; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #F9F4EB: color-1: computed rgb(249, 244, 235); AI role: Warm off-white (#F9F4EB) used extensively as the primary background color. (100% role confidence, computed values)
- Primary Action — primary action #0021CC: color-2: computed rgb(0, 33, 204); AI role: Vibrant blue (#0021CC) used for prominent CTAs, text highlights, and the footer background. (100% role confidence, computed values)
- Text — text #34407D: color-4: computed rgb(52, 64, 125); AI role: Dark slate blue (#34407D) used for primary body copy. (95% role confidence, computed values)
- Text — text #000000: color-3: computed rgb(0, 0, 0); AI role: Black (#000000) used in SVGs and specific text instances. (80% role confidence, computed values)
- Surface — surface #EEE8DD: color-5: computed rgb(238, 232, 221); AI role: Light beige (#EEE8DD) used for subtle background variations, like in the logo grid. (75% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "48px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "p",
        "text": "8",
        "top": 1094,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "3",
        "top": 1094,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "8",
        "top": 1094,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "p",
        "text": "42",
        "top": 1081,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "32",
        "top": 1081,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "42",
        "top": 1081,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "33.6px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "01",
        "top": 9044,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Market & Audience Understanding",
        "top": 9044,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "02",
        "top": 9118,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "57.6px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "150+",
        "top": 1444,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "300+",
        "top": 1444,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "100",
        "top": 1690,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "88px",
    "lineHeight": "88px",
    "letterSpacing": "-3.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Customer Understanding,Loud and Clear",
        "top": 264,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "14px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 250,
    "contexts": [
      {
        "tag": "p",
        "text": "Customer Preference",
        "top": 1072,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Concept 1",
        "top": 1092,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "80%",
        "top": 1092,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 67,
    "contexts": [
      {
        "tag": "p",
        "text": "Join us at an event",
        "top": 236,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“I feel like AI tools make everything a lot more efficient and direct, which is my favorite part. It",
        "top": 1074,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“I prefer the layout of option A over option B, the flow is much easier for me to read and I could s",
        "top": 1090,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 61,
    "contexts": [
      {
        "tag": "p",
        "text": "Use Case",
        "top": 12287,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pricing Tests",
        "top": 12320,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Consumer Journey Map",
        "top": 12344,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 25,
    "contexts": [
      {
        "tag": "p",
        "text": "What's your work email?",
        "top": 542,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Book a demo",
        "top": 542,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "From first question to insights that compound. Enterprise-grade controls throughout.",
        "top": 2080,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "What people think, why they think it, and what to do about it. From real, human interviews.",
        "top": 459,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Listen drafts objectives, questions, and probing context in seconds based on your goal. Or upload yo",
        "top": 3080,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Qualified from a global network of 50M+ participants, including hard to reach audiences. Or use your",
        "top": 4120,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "88px",
    "lineHeight": "105.6px",
    "letterSpacing": "-3.5px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "01",
        "top": 2928,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "02",
        "top": 3968,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "03",
        "top": 5008,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F9F4EB",
    "alpha": 1,
    "cssValue": "rgb(249, 244, 235)",
    "count": 163,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-5GWHWRPV\" height=\"0\" width=\"0\" style=\"d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "html body { background: var(--token-092c604a-9609-4cab-86fb-fff6e88552fd, rgb(249, 244, 235)); }Join",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Join us at an event",
        "top": 232,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#0021CC",
    "alpha": 1,
    "cssValue": "rgb(0, 33, 204)",
    "count": 286,
    "contexts": [
      {
        "tag": "p",
        "text": "Join us at an event",
        "top": 236,
        "property": "text"
      },
      {
        "tag": "h1",
        "text": "Customer Understanding,Loud and Clear",
        "top": 264,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Book a demo",
        "top": 529,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 38,
    "contexts": [
      {
        "tag": "svg",
        "text": "Customer Understanding,Loud and Clear",
        "top": 264,
        "property": "svg-fill"
      },
      {
        "tag": "foreignobject",
        "text": "Customer Understanding,Loud and Clear",
        "top": 264,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 547,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#34407D",
    "alpha": 1,
    "cssValue": "rgb(52, 64, 125)",
    "count": 167,
    "contexts": [
      {
        "tag": "span",
        "text": "What people think, why they think it, and what to do about it. From real, human interviews.",
        "top": 459,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Customer Preference",
        "top": 1072,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 12108,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#EEE8DD",
    "alpha": 1,
    "cssValue": "rgb(238, 232, 221)",
    "count": 20,
    "contexts": [
      {
        "tag": "a",
        "text": "Case Study150+Global, multilingual interviews",
        "top": 1292,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1292,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FBF9F4",
    "alpha": 1,
    "cssValue": "rgb(251, 249, 244)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 529,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#ADB8EB",
    "alpha": 1,
    "cssValue": "rgb(173, 184, 235)",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Use Case",
        "top": 12287,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "•",
        "top": 12982,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#4656A5",
    "alpha": 1,
    "cssValue": "rgb(70, 86, 165)",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Widest Say / Do Gaps",
        "top": 894,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#E2DCCF",
    "alpha": 1,
    "cssValue": "rgb(226, 220, 207)",
    "count": 48,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1108,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(0, 0, 0, 0.5)",
    "count": 4,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 8314,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#E5A119",
    "alpha": 1,
    "cssValue": "rgb(229, 161, 25)",
    "count": 16,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 930,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#D99E26",
    "alpha": 1,
    "cssValue": "rgb(217, 158, 38)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1108,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 8331,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#40BFAA",
    "alpha": 1,
    "cssValue": "rgb(64, 191, 170)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1134,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous spacing using large margins and padding to separate distinct sections, maintaining a clean, uncluttered layout.
- Corner style: Sharp, square corners on buttons, form fields, and structural blocks, contributing to a structured, solid feel.
- Radius: 0px on buttons, inputs, and image containers.
- Borders: Minimal borders; thin, solid lines used sparingly, for instance, in the navigation bar or form inputs.
- Buttons: Solid fill with sharp corners, primarily using the vibrant blue (color-2) with white text, without visible shadows or complex gradients.
- Content width: Content is generally centered and constrained within a readable max-width, while backgrounds often bleed to the edges of the viewport.
- Density: Low density; ample whitespace surrounds typographic and interactive elements, prioritizing readability and focus.
- Evidence: Observations from the DOM (e.g., input field and button in the hero) show sharp corners and solid colors without shadows. Spacing is visibly large between sections like the hero, logo strip, and feature scroll.

## Sections

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

1. **Hero — Customer Understanding, Loud and Clear** (Home)
   Opening hero composition from Home, organized around “Customer Understanding, Loud and Clear”.
   Capture: 1440×1000px; page bounds 0–1000px of 9191px; source section ID: `0418aebb-9bd5-4270-90b0-d7aa6cd63465`; image: https://media.designdetails.io/library/ca7437f0bfa93489d6486468fdb058deb0e829707c208516983863b861a7d84b/section_crop-0418aebb-2026-10-14T16-23-55-405Z.webp
   SECTION.md v3.2: `0418aebb-9bd5-4270-90b0-d7aa6cd63465` (deterministic evidence; editorial review pending)
2. **Footer — Listenlabs Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Listenlabs Footer”.
   Capture: 1440×1000px; page bounds 8191–9191px of 9191px; source section ID: `2007c2f1-b9ee-458d-ba88-93f14dd49a44`; image: https://media.designdetails.io/library/97577d86e7ce39a8c28f56e92b3bf69dae16a1d8a5efb2aff6b184b939bed52a/section_crop-2007c2f1-2026-10-14T16-23-56-641Z.webp
   SECTION.md v3.2: `2007c2f1-b9ee-458d-ba88-93f14dd49a44` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/436a1bb24840127fafc5a487a67ad19e0fbd31490b013666f101f8b786b13004/desktop_full-44b2cdac-2026-10-14T16-23-43-258Z.webp
- Mobile screenshot: https://media.designdetails.io/library/69ab5a75a5b451d132517a7125bcce8e5cb792c0a7445282a51c514185245dbd/mobile_full-44b2cdac-2026-10-14T16-24-42-159Z.webp
- Open Graph image: https://media.designdetails.io/library/5aae34c28178cf74a9613f07fcb7b02870102f7a389e4ef2f85a03f1b143d6c4/og_image-44b2cdac-2026-10-14T16-23-54-546Z.webp
- Full-page video: https://media.designdetails.io/library/efcfb9efb62d3a6799cde26a717f230f8da6e39a5349b79aab73c66ba421fe38/motion-1791996556885.mp4
- Video poster: https://media.designdetails.io/library/b29d3dd62e1d14e0773f40664bbf1e359efe7c55f945978088b19e70fa9472d5/motion-poster-1791996556885.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Input Field
- Primary Button
- Logo Strip
- Stat Block
- Product UI
- Testimonial Card
- Video Frame
- Contact Form
- Footer
- Sticky Feature Scroll
- Interactive Image List
- Hover Reveal Cards

## Quality rubric

Overall: 52.35/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Listen Labs is a cleanly executed, internally consistent B2B marketing site: a disciplined cream-and-blue palette, a repeated section-labeling device for orientation, and a sensible sticky-scroll feature walkthrough. But its component vocabulary—oversized footer logotype, logo/stat grid, numbered sticky-scroll steps, video testimonial cards—closely tracks established SaaS landing-page conventions, and its typography leans on a single font family differentiated only by size. The result is competent, professional execution without several hard-to-substitute ideas that would justify a higher tier.

- Typography (15%): 52 — The entire type system is built from a single family (Inter) across every role—display, heading, stat, body, caption—differentiated only by size and a uniform tight negative tracking (e.g., -3.5px at 88px down to -0.2px at 10px). The scale is consistent and legible, but there is no secondary or contrasting face, no textural variation, and the 'big tight-tracked sans headline' treatment is a widely used contemporary SaaS convention rather than a distinctive typographic idea.
- Color (10%): 60 — A controlled warm off-white canvas (#F9F4EB) paired with a single vibrant blue (#0021CC) for text, CTAs and the footer gives the site a clean, consistent identity, with a darker slate-blue (#34407D) for body copy. This is executed cleanly and without drift across 9000+px of page, but it is a conventional cream+blue B2B palette, and the only departures (amber #E5A119, teal #40BFAA) are confined to tiny isolated stat chips rather than built into the system.
- Layout (20%): 62 — The page shows a repeated structural device—small uppercase section labels flanking thin horizontal rules (e.g., 'How it Works', 'Case Studies', 'Use Cases', 'Research Partners') that recur at section boundaries across the whole 9000px+ page, giving consistent wayfinding. Component variety (logo/stat grid, sticky numbered feature scroll, use-case list with imagery, testimonial video grid, team photo grid, contact form over photography, oversized footer logotype) is broad and generally well-spaced with sharp, consistent corner/border treatment. However, most of these components are standard modern SaaS marketing-site fixtures rather than a bespoke grid language.
- Motion (20%): 56 — Observed motion consists of a sticky numbered feature scroll (fixed label, scrolling detail panel), a use-case list where background imagery changes and slides in as items activate, staggered fade/translate reveals for team photos, and a sticky footer wordmark reveal. These are coherent, multi-section scroll-driven patterns, but they are common scrollytelling tropes (sticky-step narration, staggered fade-ins, sticky logo reveal) without evidence of distinctive timing, custom easing, or interaction-triggered motion beyond scroll.
- Originality (25%): 37 — Nearly every signature move here—giant oversized wordmark anchoring the footer, numbered sticky-scroll feature walkthrough, client logo grid with embedded stat tiles, video-thumbnail testimonial cards, hover/color-blocked team grid, cream-canvas+single-blue palette—is a well-worn pattern across contemporary B2B SaaS marketing sites. The retro-collage photography in the 'Use cases' section is the one element with some distinct visual character, but it sits within an otherwise highly generic site-template structure, so the overall experience reads as competent genre execution rather than a differentiated point of view.
- Content (10%): 57 — Content is organized clearly—client logos, stat blocks, case-study quotes, use-case list, team bios, and a contact form are each matched to an appropriate component, and portrait photography in the hero loosely reinforces the 'listening to customers' theme. Pairing of case-study stats (100/150+/300+) with corresponding testimonial videos (Anthropic/Microsoft/sweetgreen) is a sensible integration. Still, most of these pairings (logo grid, stat chip, video testimonial) are template-level conventions rather than content shaped specifically for this brand's story.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A row of bold portrait photos on tinted backgrounds makes customer interviews feel personal rather than abstract, and large royal blue numerals like 150+ and 300+ sit in a cream grid of logos to build trust fast. Numbered sections and a huge closing wordmark pace the long page into clear, scannable chapters.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.