Lemon Squeezy — numbered commerce FAQ

---
version: alpha
name: Lemon Squeezy — numbered commerce FAQ
colors:
  surface: '#FFFFFF'
  primary: '#121217'
  accent: '#F75FDE'
  muted: '#6C6C89'
typography:
  primary:
    fontFamily: Circularpro book
    fontSize: 56px
    fontWeight: 400
    lineHeight: 63.84px
  body:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 30.6px
  control:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 30.6px
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 0px
spacing:
  sampled-control-block: 0px
---

## Overview

A long-form FAQ section pairing an editorial introduction with thirteen numbered collapsed questions, fine rules and pink plus controls.

Source: https://www.lemonsqueezy.com/pricing. Captured 2026-10-07T06:09:39.210207+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed roles: surface: #FFFFFF; primary: #121217; accent: #F75FDE; muted: #6C6C89. Values are measured source colors and inspected surfaces. Do not apply the accent indiscriminately to secondary copy or disabled controls.

## Typography

The primary sampled text uses "Circularpro book" at 56px / 63.84px, weight 400, with a measured desktop width of 488.00px. Its corresponding mobile sample is 32px / 36.48px across 326.00px. Body and control tokens above come from this reference's own computed styles; `normal` leading is omitted from YAML rather than guessed.

## Layout

Begin with a small pink All-in-one eyebrow and a two-column introduction: large dark headline on the left, muted supporting paragraph on the right. Below a wide gap, list thirteen ruled questions with small pink numbers, dark text and a pink plus at the far right. Keep the row rhythm generous and the numbered column narrow.

The selected root's measured raster is 1440×2092px on desktop and 390×2177px on mobile. The screenshot contains only `section.section-faq`.

Responsive evidence: At 390px the introductory headline and paragraph stack. Question numbers move above the text at the left while plus signs remain right-aligned. Longer questions wrap, making the section 2177px tall rather than the desktop 2092px. The complete mobile component is captured, not just a viewport slice.

## Elevation & Depth

White surfaces and hairline rules maintain a quiet presentation. Pink is reserved for numbering and affordances, not large filled cards. The final image excludes a transient viewport-only pink scroll effect observed during capture. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 0px and padding 0px. Those measurements belong to that sample, not every container. Preserve the visible geometry and spacing hierarchy; any additional spacing scale would be an implementation estimate.

## Components

All thirteen rows are closed. The capture triggers the original introduction reveal, then returns to the page top before a warm-up and final full-page crop to avoid transient viewport background artifacts. Expansion, focus states and animation timings were not tested.

## Do's and Don'ts

- Do preserve the documented content order, visual hierarchy and measured responsive changes.
- Do retain source field labels, attribution and clear differences between primary, secondary and disabled controls.
- Do treat visible prices, statistics and quotations as dated source content.
- Don't fabricate customer evidence, expanded states, errors or successful form submissions.
- Don't infer unobserved interactions, dark mode, additional breakpoints or exact motion timings.