What is Lemon Squeezy's primary brand color?

Lemon Squeezy's brand voltage is LS Purple, a saturated indigo-violet wired into the CSS as `--blue`, `--purple-600`, and `--ls-purple`. It carries the entire above-fold hero canvas — a full-bleed block of violet under the 80px white display headline and the white pill CTA — and reappears as link text and inline highlight below the fold. The hero is the single largest application of the color in the page; outside the hero it functions as a scarce accent rather than a continuous surface. Two secondary brand temperatures run alongside it: a sunshine yellow on the top announcement bar and inline badges, and a hot pink that fills the lower ecommerce-demo split panel. The system runs on three saturated voltages, with LS Purple carrying roughly two-thirds of the chromatic weight.

What typefaces does Lemon Squeezy use, and what should I use as substitutes?

The marketing site runs two typefaces with a strict role split. Circular Pro Book carries display only — the 80px hero h1 at weight 400 with -3.2px letter-spacing, the 56px section h2 at -1.68px tracking, the 38px feature h3 at -0.768px tracking, and a 26px h3 variant at -0.52px tracking. Every display tier uses weight 400; there is no bold display moment in the system. Inter handles every body and label role: 18px / weight 400 / 30.6px line-height for the workhorse paragraph, 18px / 500 for emphasized body, 16px / 400 for short captions, 14px / 500 / 2px letter-spacing / uppercase for the eyebrow labels above sections. Inter is open-source. Circular Pro is licensed by Lineto; the closest free substitute is Geist or DM Sans at weight 400 with the same negative letter-spacing values.

Why is there a yellow announcement bar at the top of the page?

The sunshine yellow strip flush at the top is the brand's single non-violet non-pink chromatic moment above the fold — it carries a short product announcement plus an inline white pill CTA labelled 'Read more'. The yellow is wired into the CSS as `--ls-color-yellow` and `--yellow-500`; both names point to the same hex, signaling that the color is part of the brand vocabulary rather than a utility tint. The bar is the only persistent above-fold surface that interrupts the violet hero canvas, and the inline pill geometry mirrors the larger hero pill — a quiet typographic rhyme that lets the announcement read as part of the brand chrome rather than as a third-party banner.

What corner-radius scale does Lemon Squeezy use?

The radius scale is anchored on three values. 8px appears 25 times in the captured page on cards, the dashboard tablet UI, and the small feature-list chevrons; 40px appears 15 times on the larger card surfaces and the rounded pill CTAs; 48px appears 6 times on the very-large pill buttons in the hero. There are also small uses of 32px on mid-tier cards and 20px on a single chip. The system favors generous pill geometry on every primary action — the white CTA pill in the hero rounds at 40-48px rather than the 12-16px standard from dev-tools brands. The result is a softer touch target than the payments-category convention, reinforcing the approachable register the brand is selling.

Can I use this DESIGN.md to build my own payments or SaaS marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Lemon Squeezy's specific dialect: full-bleed violet hero canvas, white pill primary CTA, yellow announcement bar with inline pill, hot-pink ecommerce split panel, Circular-Pro-equivalent display at weight 400 with tight negative letter-spacing, Inter body at 18px / weight 400. The tokens resolve without invention. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your category allows for warmth is the multi-temperature voltage stack — most fintech and payments brands hold to a single muted accent; Lemon Squeezy runs three saturated colors and trusts the typography to keep the page from feeling chaotic.

Lemon Squeezy Design System

Lemon Squeezy's marketing-site design system as a DESIGN.md file — full-bleed LS Purple hero canvas, Circular Pro Book 80px display, Inter body, 17 color tokens, 11 typography tie…

About Lemon Squeezy DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source lemonsqueezy.com

Banking & Payments

Lemon Squeezy's marketing site does what almost no other payments platform attempts: it gives the brand voltage the entire above-fold hero canvas. The hero is a full-bleed slab of LS Purple (the indigo-violet wired into the CSS as both `--blue` and `--ls-purple`), carrying an 80px Circular Pro Book display headline in pure white — "Payments, tax & subscriptions for software companies" — with a white pill CTA centered beneath and a tilted product-dashboard tablet floating in the upper-right corner. Where Stripe leans on an indigo gradient mesh and Brex sits on austere navy with white-on-black type, Lemon Squeezy paints the page with the brand color directly and trusts a single sentence to do the work. The hero is bookended by a flush-top sunshine-yellow announcement bar and, below the fold, a hot-pink ecommerce split panel — the system runs on three saturated temperatures, not one.

The DESIGN.md file packages the marketing surface into a machine-readable spec for React and AI coding tools. Inside: 17 color tokens drawn from the 85 CSS custom properties Lemon Squeezy exposes on `:root`, organized into a brand-voltage tier (LS Purple plus the orchid plum, the orange-yellow, and the hot pink), a structural tier of near-black ink, muted gray, and pure white, and an accent family of color-100 / 200 / 500 / 700 ladders carrying the lemon-mascot palette. Eleven typography tokens split Circular Pro Book in four display tiers (80px hero, 56px section, 38px and 26px feature h3) from Inter in six body and label tiers, with a 14px / weight 500 / 2px-letter-spaced uppercase eyebrow as its own token. Twenty components cover the hero pill CTA, the announcement-bar inline pill, the white-pill secondary, the hairline-bordered feature list row, the pink ecommerce split panel, and the dashboard tablet card.

Feed this file to Claude, Cursor, or Copilot and the agent reproduces Lemon Squeezy's specific dialect: full-bleed violet canvas hero, white pill primary, yellow announcement strip, hot-pink demo panel below the fold, Circular Pro display at weight 400 (never bold), Inter body at 18px / weight 400. Reference the tokens directly in Tailwind config or as CSS variables — every hex, font name, radius, and spacing value is a quoted scalar you can paste straight in. The single move worth borrowing if you operate in a serious-money category is the willingness to lead with a warm, saturated brand color where the convention is austere navy or charcoal; the system's central wager is that payment infrastructure can read approachable without losing technical authority.

What makes it distinct

Purple voltage as canvasLS Purple fills the entire above-fold hero rather than appearing as a held-in-reserve CTA accent, inverting the payments-category convention
Two-typeface dialectCircular Pro Book at 26-80px for h1/h2/h3 display, Inter at 14-18px for body and uppercase 2px-tracked eyebrow labels
Sunshine yellow as announcement chromea single warm yellow bar sits flush at the top with an inline 'Read more' pill, giving the system its only non-violet brand voltage above the fold
Hot-pink split panel below the folda 50/50 Pink 700 plus Red 200 block carries the ecommerce-checkout demo, the second saturated chromatic moment in the page
Animal- and fruit-coded CSS variables85 :root custom properties include plum, orchid, blue-violet, fox-tone orange, and sea-sponge pink, the same vocabulary the brand applies to its lemon mascot family

Live at lemonsqueezy.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

lemonsqueezy.com

Explore Lemon Squeezy

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Lemon Squeezy design system FAQ

Common questions about Lemon Squeezy's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Lemon Squeezy — official site

Lemon Squeezy's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.