Lemon Squeezy — business-intent signup entry screen

---
version: alpha
name: Lemon Squeezy — business-intent signup entry screen
colors:
  ink: '#121217'
  surface: '#FFFFFF'
  accent: '#5423E7'
  soft: '#F7F7F8'
  primary: '#000000'
  action: '#7047EB'
typography:
  primary:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 500
    lineHeight: 32px
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
  control:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 28px
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 8px
spacing:
  sampled-control-block: 10px
---

## Overview

The first-party signup entry screen: a business-name, website and country form paired with a colorful explanatory panel about choosing a merchant-of-record setup.

Source: https://auth.lemonsqueezy.com/signup/business-intent. Captured 2026-10-07T06:03:58.712008+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed roles: ink: #121217; surface: #FFFFFF; accent: #5423E7; soft: #F7F7F8; primary: #000000; action: #7047EB. 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 Inter at 24px / 32px, weight 500, with a measured desktop width of 496.00px. Its corresponding mobile sample is 24px / 32px 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

Split desktop evenly into white form space and a saturated purple artwork column. Center the small lemon mark, business-intent heading and short explanation above business name, website URL and country controls. Make Continue a wide purple action, followed by a quiet Sign in link. The art column holds a white explanation card on overlapping pink, blue and green forms.

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

Responsive evidence: At 390px the artwork and explanation card disappear; the form is centered in a single white column with 32px side margins and a 326px heading width. The title stays 24px/32px. The visible country defaults to United States; the dropdown was not opened.

## Elevation & Depth

Inputs have light outlines and modest rounding; the first field has a purple initial focus outline. The white side card sits over large flat colored shapes with a pink lower edge. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 8px and padding 10px 16px. 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 actual Register link redirects to auth.lemonsqueezy.com/signup/business-intent. This is the branded registration entry step, not a generic identity-provider page or a completed account form. No business data was entered and Continue was not clicked, so later signup steps are uninspected.

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