---
version: alpha
name: beehiiv — two-row integration marquee
colors:
  surface: '#060419'
  ink: '#ffffff'
  primary: '#2f39ba'
typography:
  primary:
    fontFamily: ClashGroteskFont
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
  body:
    fontFamily: SatoshiFont
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.ink}'
  body-copy:
    typography: '{typography.body}'
    textColor: '{colors.ink}'
  surface:
    backgroundColor: '{colors.surface}'
  accent:
    backgroundColor: '{colors.primary}'
---

## Overview

A dark integrations section pairs a bold heading and short copy with a right-aligned signup action and two colorful rows of outlined application-logo tiles.

Source: https://www.beehiiv.com/. Captured 2026-10-10T06:09:13.891943+00:00. This is an observational reference, not an official brand specification.

## Colors

surface: #060419; ink: #ffffff; primary: #2f39ba. Tokens describe the observed core surfaces and text, not every color within illustrations or embedded product screenshots. Computed parent styles can differ from painted child text; white action labels were checked visually.

## Typography

Primary visible text uses ClashGroteskFont, "ClashGroteskFont Fallback", sans-serif at 48px/48px, weight 700, tracking normal. The body sample uses SatoshiFont, "SatoshiFont Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" at 20px/28px, weight 500. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Align title and description at the left of a broad content container, with the action near the right edge. Place two dense horizontal logo rows below. Their ends fade and crop into the background rather than forming an arbitrary complete-logo count.

The isolated element is measured at 1440.00×609.00px within a 1440px desktop viewport. Mobile evidence captures the same complete element at 390px viewport width. The selector is `div:nth-of-type(2) > div > main > div > div:nth-of-type(2) > section:nth-of-type(5)`. Bounds were measured after a full-page warm-up render and checked again after the image used for cropping.

The section changes from 1440×609 to about 390×401. Heading becomes 36px and copy 18px; the action spans the available 350px width beneath the text. The source scales the logo strip to very small tiles on mobile rather than reflowing it into large cards.

## Elevation & Depth

Thin tile outlines and end fades create a low-contrast frame for colorful source marks. Keep the background flat and avoid adding card shadows.

## Shapes

Repeated small rounded squares provide rhythm below the large rectangular text area.

## Components

This is a static sample of the source marquee. Timing, direction, pauses and link behavior were not measured. Logos are evidence of the displayed UI, not an independent verification of integration capabilities.

## Do's and Don'ts

- Do preserve the grouping, hierarchy, spacing and responsive arrangement described above.
- Do use the screenshot and measured element evidence together; decorative dimensions not explicitly measured are estimates.
- Don't invent hover, error, loading or completion states from the static capture.
- Don't reuse source customer quotations, logos or numeric claims as endorsements for another product.