Lemon Squeezy — split-layout sign-in screen

---
version: alpha
name: Lemon Squeezy — split-layout sign-in 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: 14px
    fontWeight: 400
    lineHeight: 24px
  control:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 24px
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: 12px
---

## Overview

A white login form with purple action and initial focus treatment, paired with a colorful testimonial card on the desktop right half.

Source: https://auth.lemonsqueezy.com/login. Captured 2026-10-07T06:04:01.440814+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

Center the lemon mark and login title above side-by-side Google and Twitter options. Add an OR divider, email and password fields, a full-width purple action, Remember me and a three-link recovery/signup/customer-dashboard row. Pair it with the geometric purple panel and a white attributed customer quote card.

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 testimonial artwork is hidden, the social buttons stack and the form occupies a 326px content column. The title retains its 24px/32px size. Bottom auxiliary links wrap onto multiple lines without truncation.

## Elevation & Depth

The purple focus outline and filled main action contrast with light gray input borders. Reserve geometric color fields and card depth for the desktop supporting region; the mobile form stays clean and white. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 8px and padding 12px 18px 12px 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 first email field is focused by the source, but fields remain empty. Remember me is unchecked. Social sign-in, recovery, customer dashboard and login submission were not exercised; the testimonial is source content, not independently validated proof.

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