# DESIGN.md: Lemon Squeezy-style design system

Measured from https://www.lemonsqueezy.com/ on 2026-10-15 by PikSpec (https://www.pikspec.com). An independent measurement of the rendered page, not Lemon Squeezy's official design system, and not affiliated with Lemon Squeezy.

Use it to build your own product in this design language: put this file in your project root and tell your AI tool (Claude Code, Cursor, Codex, Lovable, v0) to follow DESIGN.md. Never use the original's name, logo, copy or images; licensed fonts are replaced with the closest free Google Fonts.

To capture any other page, or get a ready project for your tool: https://www.pikspec.com/build-with-ai

HOW IT SHOULD LOOK
Build it in the design language of lemonsqueezy.com, measured from the live site: it should feel designed by the same team as lemonsqueezy.com — the same temperament, colour, type and density — for a different product. Never use lemonsqueezy.com's name, logo, words or images.

Stack: use the one your project already has. Starting fresh: React + Vite + TypeScript + Tailwind CSS v4, with no UI kit (no shadcn/ui, MUI or Chakra) — their defaults would override this system. In a chat that shows one file (an artifact or canvas), build one HTML file instead, with the tokens below in its <style> block.
Use every value exactly as written. Do not round, rename, approximate or substitute a colour, size, radius, shadow or easing (fonts: see section 1). Anything not listed here does not exist in this system.

THE WEBSITE THIS SYSTEM COMES FROM
- Reference page: https://www.lemonsqueezy.com/ — "www.lemonsqueezy.com" (home page).
- Page frame: a top navigation bar.
- Content is grouped in cards (7 on the page). Keep cards for grouped content only, not for every section.
- It uses 142 images, 35 of them large. Large, real product imagery is part of the look — leave clearly labelled image slots at those sizes rather than stock photos or abstract 3D shapes.
- Interaction: 13 buttons on one page.
- The page runs about 22 screens long at 1440px wide.
- Density is low: few elements per screen, generous space around each one.

HOW IT LOOKS (WHAT MAKES IT LOOK LIKE ITSELF, BEYOND THE VALUES)
- Mostly neutral: 65% of the page is #FFFFFF and #F7F7F8 and other neutrals; #5423E7 (14.3%) fills whole sections.
- #F53D6B is an accent: 2.6% of the page, as small fills such as buttons and badges. Keep it to small areas.
- #FBB1C4 is an accent: 2.6% of the page, as small fills such as buttons and badges. Keep it to small areas.
- The largest type (80px Circularpro book) is regular weight, not bold (400), tracked to -0.04em.
- Open: text covers 9% of the page.
- Share of the painted page: #FFFFFF 40.5% (dominant, backgrounds); #F7F7F8 15.6% (supporting, backgrounds); #5423E7 14.3% (supporting, backgrounds); #121217 4.6% (supporting, text); #F53D6B 2.6% (accent, backgrounds); #FBB1C4 2.6% (accent, backgrounds); #00ACFF 2.3% (accent, backgrounds); #ADE4FF 2.3% (accent, backgrounds). Keep accents at these proportions; do not promote them to fills.
- Hairline dividers: 1px lines in #D1D1DB separate sections and rows (6 of them).
- Large images: Photographs, video or raster artwork cover about 42% of the page.
- Type as set (size, weight and tracking measured together; use these pairs): 80px weight 400 tracking -0.04em; 56px weight 400 tracking -0.03em; 48px weight 400 tracking -0.03em; 38.4px weight 400 tracking -0.02em; 36px weight 400 tracking -0.02em; 26px weight 400 tracking -0.02em.

1. DESIGN TOKENS — PASTE INTO YOUR GLOBAL CSS
Allowed colours, with how the original uses each. Use no other colour, including in hover states:
- #FFFFFF — 40.5% · backgrounds (var(--color-text))
- #F7F7F8 — 15.6% · backgrounds (var(--color-f7f7f8))
- #5423E7 — 14.3% · backgrounds (var(--color-background))
- #121217 — 4.6% · text (var(--color-text-muted))
- #F53D6B — 2.6% · backgrounds (var(--color-f53d6b))
- #FBB1C4 — 2.6% · backgrounds (var(--color-fbb1c4))
- #00ACFF — 2.3% · backgrounds (var(--color-00acff))
- #ADE4FF — 2.3% · backgrounds (var(--color-ade4ff))
- #2DCA72 — 2.2% · backgrounds (var(--color-2dca72))
- #B2EECC — 2.2% · backgrounds (var(--color-b2eecc))
- #D1D1DB — hairlines and grid lines (var(--color-border))
- #1E874C — Positive (var(--color-positive))
- #FFCDBD — Negative (var(--color-negative))
- #FFC233 — Warning (var(--color-warning))
Fonts — put these first in your global CSS (one import per font, so one that fails cannot stop the others):
```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400&display=swap");
```
Font: lemonsqueezy.com uses Circularpro book (display) — its own licensed face, not available to download. This kit uses Figtree for display, the closest free match, already in the tokens. If you own the original, add it with @font-face and it is used first; to use another font, change the --font-* variables.
Inter is on Google Fonts and loaded from there.
Keep every size, weight, line height and tracking exactly as listed whichever font renders.
```css
:root {
  --color-background: #5423E7; /* Background */
  --color-text: #FFFFFF; /* Text */
  --color-text-muted: #121217; /* Text muted */
  --color-border: #D1D1DB; /* Border */
  --color-action: #FFFFFF; /* Action */
  --color-on-action: #121217; /* On action */
  --color-positive: #1E874C; /* Positive */
  --color-negative: #FFCDBD; /* Negative */
  --color-warning: #FFC233; /* Warning */
  --color-f7f7f8: #F7F7F8; /* 15.6% of the page, as fills */
  --color-f53d6b: #F53D6B; /* 2.6% of the page, as fills */
  --color-fbb1c4: #FBB1C4; /* 2.6% of the page, as fills */
  --color-00acff: #00ACFF; /* 2.3% of the page, as fills */
  --color-ade4ff: #ADE4FF; /* 2.3% of the page, as fills */
  --color-2dca72: #2DCA72; /* 2.2% of the page, as fills */
  --color-b2eecc: #B2EECC; /* 2.2% of the page, as fills */
  --color-feebfc: #FEEBFC; /* 2.2% of the page, as fills */
  --color-ff7d52: #FF7D52; /* 1.6% of the page, as fills */
  --color-cf75ff: #CF75FF; /* 1.4% of the page, as fills */
  --font-body: "Inter", sans-serif; /* Inter */
  --font-display: "Circularpro book", "Figtree", sans-serif; /* Circularpro book on the site; Figtree renders */
  --type-display-1: 80px; /* Display 1, weight 400 */
  --type-display-1-leading: 80px;
  --type-display-1-tracking: -0.04em;
  --type-display-2: 56px; /* Display 2, weight 400 */
  --type-display-2-leading: 63.84px;
  --type-display-2-tracking: -0.03em;
  --type-display-3: 48px; /* Display 3, weight 400 */
  --type-display-3-leading: 60px;
  --type-display-3-tracking: -0.03em;
  --type-display-4: 38.4px; /* Display 4, weight 400 */
  --type-display-4-leading: 46.08px;
  --type-display-4-tracking: -0.02em;
  --type-display-5: 36px; /* Display 5, weight 400 */
  --type-display-5-leading: 43.92px;
  --type-display-5-tracking: -0.02em;
  --type-headline: 26px; /* Headline, weight 400 */
  --type-headline-leading: 31.72px;
  --type-headline-tracking: -0.02em;
  --type-title: 18px; /* Title, weight 400 */
  --type-title-leading: 30.6px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 25.6px;
  --type-body-medium: 15px; /* Body Medium, weight 400 */
  --type-body-medium-leading: 24px;
  --type-body-small: 14px; /* Body Small, weight 500 */
  --type-body-small-leading: 22.4px;
  --type-body-small-tracking: 0.143em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-25: 100px;
  --space-26: 104px;
  --space-30: 120px;
  --space-40: 160px;
  --space-48: 192px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --radius-40: 40px; /* component radius */
  --duration-1: 0.1s;
  --duration-2: 0.16s;
  --duration-3: 0.18s;
  --duration-4: 0.2s;
  --duration-5: 0.24s;
  --duration-6: 0.28s;
  --ease-1: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-2: linear;
}
```
Tailwind CSS v4 (the default for new projects): put this after `@import "tailwindcss";`. It removes Tailwind's own palette, so only these colours exist as utilities:
```css
@theme {
  --color-*: initial;
  --color-background: #5423E7;
  --color-text: #FFFFFF;
  --color-text-muted: #121217;
  --color-border: #D1D1DB;
  --color-action: #FFFFFF;
  --color-on-action: #121217;
  --color-positive: #1E874C;
  --color-negative: #FFCDBD;
  --color-warning: #FFC233;
  --color-f7f7f8: #F7F7F8;
  --color-f53d6b: #F53D6B;
  --color-fbb1c4: #FBB1C4;
  --color-00acff: #00ACFF;
  --color-ade4ff: #ADE4FF;
  --color-2dca72: #2DCA72;
  --color-b2eecc: #B2EECC;
  --color-feebfc: #FEEBFC;
  --color-ff7d52: #FF7D52;
  --color-cf75ff: #CF75FF;
  --font-body: "Inter", sans-serif;
  --font-display: "Circularpro book", "Figtree", sans-serif;
  --text-display-1: 80px;
  --text-display-1--line-height: 80px;
  --text-display-1--letter-spacing: -0.04em;
  --text-display-2: 56px;
  --text-display-2--line-height: 63.84px;
  --text-display-2--letter-spacing: -0.03em;
  --text-display-3: 48px;
  --text-display-3--line-height: 60px;
  --text-display-3--letter-spacing: -0.03em;
  --text-display-4: 38.4px;
  --text-display-4--line-height: 46.08px;
  --text-display-4--letter-spacing: -0.02em;
  --text-display-5: 36px;
  --text-display-5--line-height: 43.92px;
  --text-display-5--letter-spacing: -0.02em;
  --text-headline: 26px;
  --text-headline--line-height: 31.72px;
  --text-headline--letter-spacing: -0.02em;
  --text-title: 18px;
  --text-title--line-height: 30.6px;
  --text-body-large: 16px;
  --text-body-large--line-height: 25.6px;
  --text-body-medium: 15px;
  --text-body-medium--line-height: 24px;
  --text-body-small: 14px;
  --text-body-small--line-height: 22.4px;
  --text-body-small--letter-spacing: 0.143em;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --ease-1: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-2: linear;
}
```
Tailwind CSS v3 only: extend the theme with these instead, and use no other palette:
```js
// tailwind.config — theme.extend
{
  colors: { "background": "var(--color-background)", "text": "var(--color-text)", "text-muted": "var(--color-text-muted)", "border": "var(--color-border)", "action": "var(--color-action)", "on-action": "var(--color-on-action)", "positive": "var(--color-positive)", "negative": "var(--color-negative)", "warning": "var(--color-warning)" },
  fontFamily: { "body": ["var(--font-body)"], "display": ["var(--font-display)"] },
  borderRadius: { "md": "var(--radius-md)", "lg": "var(--radius-lg)", "2xl": "var(--radius-2xl)", "3xl": "var(--radius-3xl)" },
}
```

2. BASE STYLES
```css
html { background: var(--color-background); }
body { margin: 0; font-family: var(--font-body); font-size: var(--type-body-large); line-height: var(--type-body-large-leading); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
```

3. COMPONENTS — MATCH THESE EXACTLY
```css
.link-3 { /* Inline 3 */
  background: transparent;
  padding: 8px 0px 8px 0px;
  min-height: 42px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 400;
  line-height: 25.6px;
  /* recorded states: active, hover */
}
.button { /* Primary */
  background: var(--color-action);
  border-radius: var(--radius-40);
  min-height: 57px;
  color: var(--color-on-action);
  font-family: var(--font-body);
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 25.2px;
  /* recorded states: active, hover */
}
.button-2 { /* Secondary */
  background: var(--color-action);
  border-radius: var(--radius-3xl);
  padding: 12px 24px 12px 24px;
  min-height: 46px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 500;
  line-height: 22.4px;
  /* recorded states: active, hover */
}
.button-3 { /* Secondary 2 */
  background: var(--color-warning);
  min-height: 70px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-title);
  font-weight: 400;
  line-height: 28.8px;
  /* recorded states: active, hover */
}
.nav { /* Default */
  background: transparent;
  min-height: 88px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-body-medium);
  font-weight: 400;
  line-height: 24px;
}
.card { /* Default */
  background: var(--color-action);
  border-radius: var(--radius-40);
  padding: 16px 48px 16px 48px;
  min-height: 57px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 25.2px;
  /* recorded states: hover */
}
```
Where a component lists recorded states, write those states using only the colours above; the capture saw that the state exists, not its values. Never invent a state colour.

4. PAGE COMPOSITION
- Dark interface on #5423E7. Keep that ground; do not add a light mode.
- The opening screen carries a large image or video beside the heading. Leave a [content: hero image or video] slot there, at least half the screen wide; the opening is not text alone.
- Sections change ground between Background (#5423E7), #F7F7F8 and Text (#FFFFFF); use only those.
- #FFFFFF is the action colour. Fill the primary action with it and little else — at most one #FFFFFF-filled element per screen; other accents keep to the uses listed above.
- Type: Inter for body; Figtree (standing in for Circularpro book) for display. Hierarchy comes from size and weight, not colour or decoration.
- Everything sits on a 4px grid.
- Corner radii are 6px, 8px, 20px, 32px — nothing else.
- The system is flat: no drop shadows.
- Body text uses Inter at around 16px, weights 400, 500.
- Headings use Circularpro book; the largest heading is 80px.
- Primary buttons are #FFFFFF, 40px radius, weight 500.
- Cards use 40px corners.
- Corner radii in use: 8px, 40px, 48px, 20px, 64px.

HOW THE ORIGINAL PACES ITS PAGE (BORROW THE RHYTHM — THE OPENING, THE COLOURED BANDS, THE CARD GRIDS — NOT THE LIST; BUILD THE SECTIONS YOUR PRODUCT NEEDS)
1. Hero — 70px tall, centred 14px heading (weight 500), on #FFC233.
2. Hero — 678px tall, 2 equal columns, 80px gap, left-aligned 80px heading (weight 400), image behind the content, on #5423E7.
3. Split — 232px tall, split 4 / 8, 38px gap, left-aligned 14px heading (weight 400), image centred, on #5423E7.
4. Text — 680px tall, left-aligned 48px heading (weight 400) set mid-band.
5. Split — 972px tall, 2 equal columns, 60px gap, left-aligned 26px heading (weight 400), image on the right.
6. Split — 566px tall, 2 equal columns, 192px gap, left-aligned 56px heading (weight 400) set mid-band, on #F7F7F8.
7. Split — 1140px tall, 2 equal columns, image on the left.
8. Grid — 970px tall, 6 items in 3 columns with 0px gaps, left-aligned 38.4px heading (weight 400), on #F7F7F8.
9. Split — 997px tall, 2 equal columns, image on the left.
10. Grid — 970px tall, 6 items in 3 columns with 0px gaps, left-aligned 38.4px heading (weight 400), on #FFFFFF.
11. Split — 566px tall, 2 equal columns, 192px gap, left-aligned 56px heading (weight 400) set mid-band, on #F7F7F8.
12. Split — 959px tall, 2 equal columns, image on the left.
13. Grid — 970px tall, 6 items in 3 columns with 0px gaps, left-aligned 38.4px heading (weight 400), on #F7F7F8.
14. Split — 543px tall, 2 equal columns, 192px gap, left-aligned 56px heading (weight 400) set mid-band.
15. Split (×2) — 2 bands of 584px, 2 equal columns, left-aligned 36px heading (weight 400) set mid-band, image on the left.
16. Split — 574px tall, 2 equal columns, 192px gap, left-aligned 56px heading (weight 400) set mid-band.
17. Grid — 901px tall, 6 items in 3 columns with 0px gaps, left-aligned 18px heading (weight 400).
18. Split (×2) — 2 bands of 673px, 2 equal columns, left-aligned 36px heading (weight 400), image on the right.
19. Split — 635px tall, 2 equal columns, 192px gap, left-aligned 56px heading (weight 400) set mid-band.
20. Text — 560px tall, left-aligned 36px heading (weight 400) set mid-band, image on the left.
- Content sits in a 1152px container, 144px from the edge at 1440px wide.
- A 88px header stays fixed at the top.
- The hero is 70px (0.1 screens): centred 14px heading (weight 500), on #FFC233.
- Column splits on a 12-column grid: halves (12×), thirds (4×), 4/8; gaps of 60px.
- Headings align left (16 of 17 sections); centre only the occasional statement.
- Sections change background 11 times, between #FFC233, #5423E7, #F7F7F8: colour comes in full-width bands, not in boxes.
- A typical section is about 680px tall.

COPY SHAPE (MATCH THE LENGTH AND CASE; WRITE YOUR OWN WORDS)
- The main heading is 7 words long.
- Section headings are medium length: typically 7 words.
- Headings are in sentence case (only the first word capitalised).
- The page describes itself in about 34 words; keep your intro paragraph to about that length.

5. MOTION
Interactive elements change colour, background, border and opacity with the measured timing. Animate nothing else.
```css
a, button, [role="button"], input { transition: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), border-color var(--duration-1) var(--ease-1), opacity var(--duration-1) var(--ease-1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
```
No scroll-triggered fade-ins, parallax, typewriter text or bouncing elements.

6. RESPONSIVE
- The design was measured at 1440px wide. Lay it out for that width first, then let it reflow down to 360px.
- Content sits in a column at most 1152px wide, centred, with var(--space-4) (16px) side padding on small screens.
- The largest heading scales fluidly: font-size: clamp(48px, 5.6vw, 80px). Every other size stays fixed.
- Break on composition, not device names: a row of columns drops a column when any column would be narrower than 240px; side-by-side splits stack when either side would be narrower than 320px.
- Spacing steps never change between sizes; use smaller steps from the same list where space is tight.
- On touch screens, every link and button has a hit area of at least 44 × 44px without changing its drawn size.

7. ACCESSIBILITY
- Text pairs that pass for body copy: Text on Background (7.6:1), Action on Background (7.6:1), Negative on Background (5.3:1) and On action on Action (18.7:1).
- Use no other text-on-background pairing.
- One h1 per page, headings in order, landmarks (header, nav, main, footer), real buttons and links, a label on every field, alt text on every image, an aria-label on icon-only buttons.
- Every interactive element shows the :focus-visible outline above.

8. DO NOT (THESE ARE WHAT MAKE AI-BUILT SITES LOOK GENERIC)
- No drop shadows anywhere, including cards, buttons and images. (No box-shadow was measured on the page.)
- No gradients: not in backgrounds, text, buttons or borders. (No gradient was measured.)
- Only these colours: #FFFFFF, #F7F7F8, #5423E7, #121217, #F53D6B, #FBB1C4, #00ACFF, #ADE4FF, #2DCA72, #B2EECC, #D1D1DB, #1E874C, #FFCDBD, #FFC233. No new tints, no Tailwind defaults (slate, indigo, violet). (They are every colour that covers a measurable part of the page, and the colours its lines and drawings use.)
- #F53D6B only as small fills (buttons, badges) — never a section background or a large panel. (It covers 2.6% of the page.)
- #FBB1C4 only as small fills (buttons, badges) — never a section background or a large panel. (It covers 2.6% of the page.)
- Only the fonts in the tokens: Inter for body; Figtree for display. No other typeface, and no Inter, Roboto or system UI font unless it is one of these. (The page is set in Inter and Circularpro book; the tokens carry what stands in for them.)
- Headings and large text never heavier than weight 400. Do not make headlines bold to add emphasis. (Every size from 24px up is set at weight 400 or lighter.)
- Large headlines tracked tight (letter-spacing -0.04em), not at the browser default. (The 80px headline is set at -0.04em.)
- No icon above every feature, no emoji, no decorative blobs, sparkles or glows. (None of these is part of the captured design; they are a coding model's defaults.)
- Build the sections your product needs, not the original's list. Give each one this system's look: its kinds of section (hero, split, text, grid), its colours, type, shapes and spacing. (The style carries to any kind of site; the original's page was for a different product.)
- No glassmorphism, backdrop blur, glowing orbs, noise blobs or neon outlines.
- No row of three identical feature cards as the default section. Vary the layout from section to section: a split, a list, a single large statement, a table.
- No centred-everything hero with a pill badge, a gradient headline and two buttons. Lead with the most specific thing about the product.
- No filler copy: no "Unlock your potential", "Revolutionize", "Seamless", "Elevate", "Supercharge", "Next-gen" or lorem ipsum. Write plain, specific sentences a real company would publish.
- No made-up statistics, testimonials or customer logos. Leave a clearly marked [content: …] slot instead.
- No radius larger than the largest one listed.
- Do not use lemonsqueezy.com's name, logo, copy or images. This is its design system, not its content.

BEFORE YOU FINISH
- Search your code for every colour, font size, spacing value, radius, shadow and easing, and replace anything that is not a variable above.
- Check that no [content: …] slot has been filled with invented facts.
- Search your CSS for box-shadow and filter: drop-shadow. There should be none.
- Search your CSS for gradient(. There should be none.
- Every colour value in your CSS is one of the allowed colours. Nothing else, including in hover states.
- #F53D6B covers about 2.6% of the page or less, as on the original.
- #FBB1C4 covers about 2.6% of the page or less, as on the original.
- No text 24px or larger has a font-weight above 400.
- The largest headline uses letter-spacing -0.04em.
- Every section, including ones the original does not have, uses only this system's colours, type, shapes and spacing.
- Content sits in a 1152px container with 144px side margins at 1440px.
- There is no placeholder copy (lorem ipsum, "Feature one", "Your headline here"). Every word is real.
- Take a screenshot at 1440px and put it beside the original. List every difference in colour, weight, spacing, alignment and imagery, and fix each before finishing. Then check 390px wide: nothing scrolls sideways and no heading runs off the screen.