Lemon Squeezy

Palette

Typography

Headings

Circular Pro Book

Body

Inter

Free swap

Circular Pro is licensed (Lineto). Use Plus Jakarta Sans at weight 400 or DM Sans at 400; Figtree is also close. Inter is free.

H1 is 80px Circular Pro Book, weight 400, line-height 1.0, letter-spacing -0.04em, white on violet, wrapped over four lines. Section headings run ~48px in the same face at 400 with ~1.15 line-height and -0.02 to -0.03em tracking. Item headings (feature list, grid titles) are 26px Circular at 400, line-height 1.22, -0.02em. The 'Why Lemon Squeezy' statement is a ~40px Circular paragraph set as a heading. Eyebrows are 14px Inter uppercase with ~0.14em tracking, coloured per section (#7047eb violet, #d50b3e crimson, #0075ad blue) or white at reduced opacity on the hero; feature grid uses index labels like 'E/1'. Body is 18px Inter at 1.7 line-height in #6c6c89, with key phrases switched to #121217 rather than bolded heavily. Never heavier than 400–500 for headings; the softness comes from the light weight and tight tracking.

Measured h1: 80px / 400 / -0.04em · body 18px

Signature moves

• Split every visual band into two adjacent tints of one hue (saturated left, pastel right) and let product mockups float and crop across both halves.
• Write body copy in muted slate (#6c6c89) and flip only the key benefit phrases to near-black (#121217) so the eye skims the important words without bold weights.
• Set huge headlines in a geometric sans at regular weight (400) with -0.04em tracking and 1.0 line-height for a soft, friendly authority instead of heavy bold.
• Colour-code each section's tiny uppercase eyebrow (violet, crimson, blue) to match its section's hue family, with indexed labels like 'E/1' or '01'.
• Show the real dashboard on a tilted, perspective iPad bleeding off the hero's right edge rather than a flat screenshot.
• Use plain white fully-rounded pill buttons with an arrow on saturated colour as the only CTA style.

Layout

Content width 1152px centred, left-aligned throughout. Sections are generous (120–160px vertical padding) and alternate white, #f7f7f8, and full-bleed colour. Recurring pattern: intro rows split into a 50/50 grid with a large heading on the left and a muted paragraph on the right, followed by a full-bleed visual band split into two equal halves, each a different tint of the same hue (#f53d6b/#fbb1c4, #00acff/#ade4ff) with mockups bleeding off the edges. Feature grids are 3 columns × 2 rows with no cards, just eyebrow, heading and text on the grey surface. The first feature section pairs a numbered accordion list (left, divider-ruled) with a pastel pink (#feebfc) panel holding a flow diagram that bleeds to the right edge.

Components

Announcement bar

Full-width golden yellow strip (~#ffc233) with centred dark text and a white pill 'Read more' button — the lemon brand colour used sparingly once at the top.

Navigation

Sits directly on the violet hero, no bar or border. Logo left, centred text links in white at ~70% opacity with small chevrons for dropdowns, 'Sign in' as plain text and 'Get started →' as a white pill (40px radius) with dark text on the right.

Buttons

Primary CTA is a white fully rounded pill (radius 40px) with #121217 text and a thin arrow glyph, ~56px tall in the hero. No borders, no shadow, no gradients. Inside product mockups, buttons are violet (#7047eb-ish) with 6px radius.

Hero

Solid #5423e7 field, left-column 80px headline + muted lavender subcopy + white pill CTA; right side a tilted, perspective-rendered iPad showing the real dashboard, cropped off the right edge with a soft violet drop shadow. A logo strip of white customer wordmarks sits at the bottom of the violet with a small uppercase label.

Numbered feature accordion

Rows separated by 1px light-grey rules, each with a tiny violet index ('02') and a 26px Circular title, open item reveals muted body with dark highlighted phrases and a right-side arrow.

Flow diagram card stack

White cards with subtle drop shadow on pastel pink, connected by thin magenta arrows; middle card has a cream header band and green-check list items; amounts shown in green (+$49.00).

Feature grid

Cardless 3-column grid on #f7f7f8: coloured micro-eyebrow 'E/1', two-line 32px heading, muted body with darker inline emphasis.

Mockup bands

Two-tone full-bleed split panels with floating white UI cards (checkout forms, storefront, email, lead magnet) that overlap, crop at panel edges, and carry soft diffuse shadows.

Product UI

The product appears as real, high-fidelity screenshots: a perspective-tilted iPad of the analytics dashboard, plus floating fragments — checkout forms, a creator storefront on desktop and phone, a marketing email, and a lead-capture modal. The UI itself is white and airy: a left sidebar with small grey icon+label nav items and nested sub-items, metric cards with large numbers ($22,499.44), small green delta pills (↑ 16%), thin violet line charts with faint fills, and hairline grey dividers instead of heavy cards. Forms use light-grey 1px bordered inputs with ~6px radius, segmented tab toggles (Pay by Card / Pay with PayPal), and a full-width violet primary button. Density is moderate, typography small Inter, colour reserved for violet actions and green success states, with round avatars adding a human touch.