Lemon Squeezy — Design System

Colors

Brand

lemon#FFC233Brand icon mark

purple-500#7047EBPrimary actions, CTAs

purple-600#5423E7Primary hover

pink-500#F75FDEGradient accents

plum#CF75FFGradient endpoint

Purple Scale

purple-50#F4F1FDHover fills

purple-100#E2DAFBActive bg

purple-200#C6B6F7Borders

purple-300#A991F3Muted icons

purple-500#7047EBPrimary

purple-600#5423E7Hover

purple-900#2B0E81Dark depth

Yellow / Lemon Scale

yellow-50#FFF9EBWarning bg

yellow-300#FFDA85Muted lemon

yellow-400#FFCE5CWarning state

yellow-500#FFC233Brand lemon

yellow-700#C28800Warning text

Surfaces — Light

bg#FFFFFFPage background

surface#F7F7F8Cards, panels

border#D1D1DBDividers

text-2#3F3F50Secondary text

text#121217Primary text

Surfaces — Dark

bg#121217Page background

surface#1C1C28Cards, panels

border#2D2D42Dividers

text-2#C8C8DASecondary text

text#F7F7F8Primary text

Semantic

success#1E874CActive subscriptions

info#0075ADTrialing, informational

warning#C28800Past due, attention

error#D50B3EFailed, cancelled

Typography

Circular XX — Display

h1 Payments, tax & subscriptions

40px700lh 1.1

h2 The all-in-one platform for your SaaS

28px700lh 1.2

h3 Create the perfect buying experience

20px600lh 1.35

Inter — Body / UI

body-lg Lemon Squeezy is the all-in-one platform for running your SaaS business.

16px400lh 1.6

body Manage subscriptions, global tax compliance, and failed payment recovery from a single dashboard.

14px400lh 1.5

label Revenue · Subscriptions · Tax Compliance

11px600uppercase

JetBrains Mono — Code

code ls orders list --store=my-store --status=active

13pxmono

Components

Buttons

Status Badges

Active Trialing Cancelled Paused New

Pro Plan $79/mo Past Due

Inputs

Code Snippet

// Create a checkout
const checkout = await lemonSqueezy
.createCheckout(
storeId: 'my-store',
variantId: 'pro-monthly'
)

Signature — Orders Dashboard

Orders

$1,847 MRR

6 Active Subscriptions

2 Trialing In Trial

#	Customer	Product	Amount	Status	Date

Guardrails

DO

Use purple (#7047EB) as the single primary action color for all CTAs

Use Circular XX for all headings, Inter for all body and UI text

Keep cards at #F7F7F8 in light mode — the subtle contrast from #FFF creates depth

Use the lemon yellow (#FFC233) only for the brand icon mark and decorative accents

Dark bg is #121217 — a near-black with purple-blue undertone matching the brand

DON'T

Don't use lemon yellow as a button or interactive element color — it's icon-only

Don't use Circular XX below 16px — use Inter for all small/label text

Don't use pure #000000 for text — always #121217 (warm dark with purple undertone)

Don't use green or blue as CTA colors — purple owns that role in this system

Don't stack pink + plum + yellow gradients in a single UI region — one accent at a time