beehiiv — two-column question accordion

---
version: alpha
name: beehiiv — two-column question accordion
colors:
  surface: '#060419'
  ink: '#ffffff'
  primary: '#ffffff'
typography:
  primary:
    fontFamily: ClashGroteskFont
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
  body:
    fontFamily: ClashGroteskFont
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
    textColor: '{colors.ink}'
  surface:
    backgroundColor: '{colors.surface}'
---

## Overview

A stark dark FAQ pairs a compact uppercase prompt on the left with eight roomy question rows, muted divider rules and subtle downward chevrons on the right.

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

## Colors

surface: #060419; ink: #ffffff. Primary text: #ffffff. 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 ClashGroteskFont, "ClashGroteskFont Fallback", sans-serif at 48px/48px, weight 700. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Use a narrow heading column and a substantially wider question column. Give every question a top divider and comfortable vertical breathing room, with its chevron aligned to the right independently of text wrapping. Keep all answers collapsed in this reference.

The isolated element is measured at 1440.00×816.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(6)`. Bounds were measured after a full-page warm-up render and checked again after the image used for cropping.

The 1440×816 desktop section becomes 390×1072. The 48px heading reduces to 36px and moves above the questions. Questions remain 20px/28px, wrapping to multiple lines inside the single column; side gutters are 20px.

## Elevation & Depth

There are no elevated containers. Thin muted rules distinguish rows against the same ink surface.

## Shapes

Straight dividers and minimal chevrons complement heavy display typography; avoid turning each item into a separate card.

## Components

Only the closed accordion state was inspected. Expansion, focus, keyboard operation and animation were not tested; do not infer those behaviors from the chevrons.

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