Lemon Squeezy — vivid commerce platform landing page

---
version: alpha
name: Lemon Squeezy — vivid commerce platform landing page
colors:
  ink: '#121217'
  surface: '#FFFFFF'
  accent: '#5423E7'
  soft: '#F7F7F8'
  primary: '#FFFFFF'
  announcement: '#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 vivid purple commerce landing page with a yellow announcement strip, oversized product mockups, pastel product chapters and generous modular feature grids.

Source: https://www.lemonsqueezy.com/. Captured 2026-10-07T06:03:52.747168+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; announcement: #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 536.00px. Its corresponding mobile sample is 40px / 40px across 309.69px. 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 yellow announcement above purple navigation and a split hero containing oversized white type and a tilted dashboard tablet. Follow with a trust strip, platform explanation and a numbered feature tab area. Organize ecommerce, marketing and reporting into color-coded chapters with large screen imagery and three-column text grids. Add developer content, customer quotations, case studies, resources and a purple closing footer.

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

Responsive evidence: At 390px the wordmark reduces to its symbol, navigation becomes a hamburger with a Get started pill, and the hero headline reduces from 80px to 40px. The product tablet moves below the copy. Measured document width is 559px at a 390px viewport because of source artwork overflow; the visible text column is intact. Do not treat this as evidence of a fully overflow-free mobile implementation.

## Elevation & Depth

Large angled device renders provide dimensionality. Most text sections stay flat, using white, smoke, pink, blue and green fields; the purple opening and ending give the long page a consistent frame. 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

Product screenshots and marketing claims are source evidence, not validated analytics. Tabs, downloads, checkout links, email tools and payment actions were not exercised. This is a static design reference, not a captured transaction.

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