DESIGN.md — Lemon Squeezy

Overview

Lemon Squeezy brings playfulness to payments. A warm yellow brand color paired with deep purple accents creates an energetic, approachable identity that stands apart from typical fintech austerity. Rounded shapes and generous spacing reinforce the friendly tone.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#FFC233	Lemon yellow
color-bg	#1E1E2E	Dark background
color-accent	#7C3AED	Purple accent
color-text	#FFFFFF	Primary text
color-surface	#2D2D3F	Card surfaces

Typography

Role	Family	Size	Weight
Display	Inter	48px	800
Heading	Inter	32px	700
Body	Inter	16px	400
Label	Inter	14px	500

Components

Product Card

• Thumbnail image, name, price
• Buy button in yellow
• Variant selector (size, license)

Checkout Overlay

• Slide-in from right
• Product summary, quantity
• Payment form with card/PayPal
• SSL security badge

Revenue Dashboard

• Big number cards (MRR, customers, churn)
• Revenue trend line chart
• Recent orders table

Do's and Don'ts

Do

• Use yellow for purchase/positive actions
• Use purple for navigation and secondary elements
• Round corners generously (12px+ for cards)

Don't

• Don't use yellow for warning states — use orange
• Don't mix the dark theme with light surfaces
• Don't make checkout more than 2 steps