Lemon Squeezy — colorful transaction pricing page

---
version: alpha
name: Lemon Squeezy — colorful transaction pricing page
colors:
  ink: '#121217'
  surface: '#FFFFFF'
  accent: '#5423E7'
  soft: '#F7F7F8'
  primary: '#FFFFFF'
  mint: '#DFF8EA'
  pink: '#FDDDF8'
  yellow: '#FFC233'
typography:
  primary:
    fontFamily: Circularpro book
    fontSize: 80px
    fontWeight: 400
    lineHeight: 80px
  body:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 30.6px
  control:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28.8px
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 commerce pricing page combining a purple editorial hero, green transaction-fee panel, pink email-marketing panel, feature comparison and numbered FAQ.

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

## Colors

Observed roles: ink: #121217; surface: #FFFFFF; accent: #5423E7; soft: #F7F7F8; primary: #FFFFFF; mint: #DFF8EA; pink: #FDDDF8; yellow: #FFC233. 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 80px / 80px, weight 400, with a measured desktop width of 1024.00px. Its corresponding mobile sample is 51.2px / 51.2px 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

Use a generous centered white-on-purple pricing headline before the paired pastel pricing panels. Contrast the mint ecommerce offer with the pink marketing offer and use a darker supporting strip at each card bottom. Continue through the purple business-model explanation, testimonial ticker, a wide feature comparison, custom-pricing section, numbered FAQs, resources and closing purple footer.

This is a full-page desktop reference at 1440px width, with a source document height of 12414px. Mobile evidence is a 390×844px opening viewport, not a claim to have inspected every lower-page breakpoint.

Responsive evidence: At 390px the large centered hero heading measures 51.2px/51.2px rather than the desktop 80px/80px and wraps into a tall narrow block. The navigation compresses to symbol, menu and CTA. Only the mobile opening is visually established; do not invent the lower comparison-table breakpoint.

## Elevation & Depth

Strong flat color regions replace heavy shadow. Green check icons, pink accents and fine comparison rules make a lengthy page scannable, while product photography supplies occasional depth. 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

The ecommerce panel shows 5% + 50¢ and the marketing panel $0/m in the captured source state. Additional fee conditions remain source content; no live quote or transaction was tested. Reviewed missing-image candidates lie outside the visible ticker raster.

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