# Lemon Squeezy — Design Reference
> ultraviolet storefront with lemon zest

**Source:** https://www.lemonsqueezy.com  
**Theme:** light  
**Category:** Fintech  
**Mood:** light, colourful, friendly, bold, airy, playful  
**Captured:** 2026-09-14

## Overview

A cheerful, confident fintech marketing site. Every page opens on a flat block of electric violet with huge, soft white headlines and white pill buttons. Below the hero it switches to plain white and cool grey sections broken up by full-width bands of saturated colour (coral, sky blue, mint green, candy pink). Each band holds tilted product mockups. A lemon-yellow announcement bar and a yellow logo add warmth, so it reads as friendly and consumer-grade even though it sells tax compliance.

The type contrast carries it. Circular Pro Book, always weight 400, runs from 80px down to 26px with tight negative tracking (-0.04em on the display size). Body copy is Inter at 18px with a roomy 1.7 line height. The palette is built around #5423e7 violet and #ffc233 lemon, with pastel tints (#feecfb, #f0faff, #f4f1fd, #fff2ee) for supporting bands. Controls are pills. Mockup cards and image panels use 8px and 40–48px radii. Sections get 120–160px of vertical padding and there is almost no shadow, so depth comes from the colour blocks and the angled device renders.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Squeezy Violet | `#5423e7` | `--color-brand` | Main brand surface: announcement-free top of every page, the sticky nav, hero blocks, blog and case-study heroes. Always sits under white type. |
| Soft Violet | `#7047eb` | `--color-brand-interactive` | Interactive violet on light backgrounds: filled buttons inside mockups, inline links, focus borders. |
| Lemon | `#ffc233` | `--color-ls-color-yellow` | Announcement bar background, logo mark, uppercase eyebrow labels on violet (e.g. 'LEMON DROPS', 'FEATURED'). |
| Lavender Haze | `#c6b6f7` | `--color-violet-200` | Muted violet for decorative fills, hero subcopy tint and illustration shapes on the violet surface. |
| Ink | `#121217` | `--color-text` | Primary text on white and pastel sections; label colour of white pill buttons. |
| Slate Grey | `#6c6c89` | `--color-gray-500` | Secondary body copy, feature descriptions, bullet points, captions. |
| Hairline | `#d1d1db` | `--color-border-color` | Input borders, dividers, accordion separators. |
| Paper White | `#ffffff` | `--color-bg` | Page background, white pill buttons on violet, headline colour on violet. |
| Cloud Grey | `#f7f7f8` | `--color-grey-50` | Alternating section background (e.g. 'Create the perfect buying experience' intro bands) and quiet card fills. |
| Bubblegum Tint | `#feecfb` | `--color-pink-50` | Large pastel section band and backdrop behind product showcases. |
| Coral Punch | `#f53d6b` | `--color-coral` | Saturated full-bleed showcase band behind checkout mockups; also the danger colour. |
| Sky | `#00acff` | `--color-sky` | Saturated showcase band (email-marketing mockups), paired with #ade4ff and #38beff tints. |
| Mint | `#2dca72` | `--color-green` | Saturated showcase band (analytics mockups) and success indicators, paired with #b2eecc / #dff8ea. |

### Semantic roles

| Role | Value |
|---|---|
| background | `#ffffff` |
| surface | `#f7f7f8` |
| surface raised | `#ffffff` |
| border | `#d1d1db` |
| text | `#121217` |
| text muted | `#6c6c89` |
| primary | `#5423e7` |
| primary text | `#ffffff` |
| accent | `#ffc233` |
| success | `#2dca72` |
| warning | `#ffc233` |
| danger | `#f53d6b` |

## Tokens — Typography

- **Display:** Circular Pro Book (400) — fallbacks: Figtree, Plus Jakarta Sans, DM Sans, sans-serif. Used for every heading from 80px to 22px, and for prices and stat numerals. Only ever weight 400. Tracking is -0.04em at 80px, -0.03em at 40–56px and -0.02em at 22–38px. Line height is 1.0 on the display size and 1.13–1.25 below it.
- **Body:** Inter (400, 500) — fallbacks: system-ui, -apple-system, Segoe UI, sans-serif. Paragraphs, nav, buttons and UI labels. Body copy is 18px/1.7. Bold runs inside paragraphs use <strong> at weight 500, never 700. Nav links and small UI text are 15–16px.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| Display | 80px | 1 | 400 | -3.2px | display |
| H1 / Section title | 56px | 1.14 | 400 | -1.68px | display |
| H2 statement | 48px | 1.25 | 400 | -1.44px | display |
| H3 large | 38px | 1.21 | 400 | -0.768px | display |
| H3 feature | 26px | 1.22 | 400 | -0.52px | display |
| H4 / Price | 22px | 1.5 | 400 | -0.44px | display |
| Body / Lead | 18px | 1.7 | 400 | normal | body |
| Button label | 18px | 1.4 | 500 | -0.18px | body |
| Small / UI | 16px | 1.6 | 400 | normal | body |

## Tokens — Spacing & Layout

- **Base unit:** 8px
- **Density:** spacious
- **Container max width:** 1233px
- **Section gap:** 160px
- **Card padding:** 40px
- **Scale:** 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 120px, 160px

## Tokens — Radius

| Element | Value |
|---|---|
| Pill buttons, email input, announcement 'Read more' chip | 8000px |
| Large showcase panels and image containers | 40px |
| Hero device panels / oversized feature blocks | 48px |
| Medium feature cards | 32px |
| Mockup UI cards, small tiles, dropdown panels | 8px |
| Mobile menu panel | 20px |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| Floating card | `rgba(17, 17, 46, 0.06) 0px 2px 4px 0px, rgba(17, 17, 46, 0.09) 0px 8px 13px 0px` | Used only on small white UI cards floating over pastel bands (e.g. the 'Merchant of Record' checklist and payout tiles). Everything else is flat. |

## Components

### Primary pill button (on violet) (button)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#121217` |
| border | `none` |
| radius | `8000px` |
| padding | `16px 48px` |
| font size | `18px` |
| font weight | `500` |
| shadow | `none` |
| hover | `background #ffffffe6 (--button-primary-light), arrow nudges right ~2px` |

Always has a trailing → arrow. The nav version is smaller: 16px text, 10px 20px padding.

### Violet pill button (on light) (button)

| Property | Value |
|---|---|
| background | `#7047eb` |
| color | `#ffffff` |
| border | `none` |
| radius | `8000px` |
| padding | `12px 32px` |
| font size | `16px` |
| font weight | `500` |
| shadow | `none` |
| hover | `background #5423e7` |

Used in product mockups and on white sections, so buttons stay on-brand without violet hero blocks around them.

### Ghost text link / Sign in (link)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `rgba(255,255,255,0.8)` |
| border | `none` |
| radius | `0` |
| padding | `8px 0` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `color #ffffff` |

Secondary actions are plain text, not outlined buttons. On light backgrounds, inline links use #7047eb.

### Email capture input (input)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#ffffff` |
| border | `2px solid #d1d1db` |
| radius | `8000px` |
| padding | `16px 24px` |
| font size | `18px` |
| font weight | `400` |
| shadow | `none` |
| hover | `border-color #ffffff; focus border #ffc233` |

57px tall pill that sits on violet newsletter blocks. Placeholder: 'Enter your email address...'

### Sticky nav + announcement bar (nav)

| Property | Value |
|---|---|
| background | `#5423e7` |
| color | `rgba(255,255,255,0.8)` |
| border | `none` |
| radius | `0` |
| padding | `0 40px; height 88px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `link color #ffffff` |

Above the nav is a 68px #ffc233 bar with centred #121217 text and a small white 'Read more' pill. The logo sits left, links are centred (Platform ▾, Resources ▾, Pricing, Wedges, Help), and Sign in plus a white pill are on the right. Blog pages add a sub-nav row between 1px rgba(255,255,255,0.15) rules.

### Colour-band product showcase (card)

| Property | Value |
|---|---|
| background | `#f53d6b / #00acff / #2dca72 / #feecfb` |
| color | `#121217` |
| border | `none` |
| radius | `0 (full-bleed) or 40px` |
| padding | `80px 40px` |
| font size | `18px` |
| font weight | `400` |
| shadow | `none` |
| hover | `none` |

A full-width saturated band, often split with a lighter tint of the same hue (#fbb1c4, #ade4ff, #b2eecc). It holds tilted phone, tablet or laptop mockups and white UI cards.

### Numbered feature cell (card)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#121217` |
| border | `none` |
| radius | `0` |
| padding | `0 0 48px` |
| font size | `26px title / 16px body` |
| font weight | `400` |
| shadow | `none` |
| hover | `none` |

Three-column grid. Each cell has a tiny coloured index ('0.1') tinted to match the section band, a 26px Circular title over two lines, then #6c6c89 copy with <strong> runs at 500 in #121217.

### Eyebrow label (badge)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#ffc233` |
| border | `none` |
| radius | `0` |
| padding | `0` |
| font size | `14px` |
| font weight | `500` |
| shadow | `none` |
| hover | `none` |

Uppercase, about 0.12em tracking. Lemon on violet heroes; the section hue or #6c6c89 on white.

## Layout

Content sits in a centred container of about 1233px with 40px gutters. Heroes use a two-column split: a left-aligned 80px headline, subcopy and one pill CTA on the left, and a large tilted device render on the right that bleeds past the viewport edge. Blog and case-study heroes put a full-bleed photo in the left half and the text in the right half, both on violet. Section intros are two columns, with a 56px headline on the left and a short grey paragraph on the right. Feature content runs in 3-column grids of numbered cells with about 48px row gaps. Sections alternate between white, #f7f7f8, pastel tints and full-bleed saturated bands, each with 120–160px of vertical padding.

## Imagery

The main imagery is high-fidelity product UI in perspective: angled iPads, MacBooks and iPhones showing clean white dashboards with violet charts, set on saturated colour fields with soft drop shadows under the devices. Iridescent pastel gradient blobs appear inside product thumbnails. The blog uses bright, sun-lit flat-lay photos (lemons on sky blue) with hard shadows. Customer logos are monochrome white on violet. Fruit and zest motifs appear only in the logo and the category names ('Juice Bar', 'Lemon Drops').

## Motion

Motion is restrained Webflow-style interaction. Nav dropdowns and the mobile menu fade and slide down about 8px. Buttons change background on hover and the arrow nudges. The accordion list expands with a height ease. Device mockups sit still or fade up gently on scroll, around 300–400ms ease-out. There is no parallax spectacle.

## Responsive

On phones, the logo shrinks to the yellow lemon mark alone. The nav keeps a white 'Get started' pill (about 18px, 12px 28px padding) next to a thin hamburger icon. The announcement bar stays full width in yellow but drops its Read more chip. Opening the menu shows a violet drop-down panel beneath the header, not a full-screen takeover. The panel has a 1px translucent white border and rounded bottom corners. It lists Platform ▾, Resources ▾, Pricing, Wedges, Help and Sign in as left-aligned 20px links in rgba(255,255,255,0.7), with about 40px between rows. The hero stacks into a single column. The headline drops to about 48px with the same tight tracking, the subcopy keeps its lavender-white tint, and the CTA pill stays auto-width rather than full-width. The device mockup moves below the CTA and crops off the right and bottom edges. Gutters shrink to about 24px and section padding to about 80px. Three-column feature grids collapse to one column.

## Do

- Open every page with a flat #5423e7 block that runs from the nav into the hero, with white Circular Pro Book headlines at weight 400 and tight negative tracking.
- Make primary CTAs pills (radius 8000px) with a trailing → arrow: white with #121217 text on violet, #7047eb with white text on light sections.
- Break up long pages with full-bleed saturated bands (#f53d6b, #00acff, #2dca72) or pastel tints (#feecfb, #f0faff, #fff2ee) that hold tilted device mockups.
- Keep body copy in Inter at 18px/1.7 in #6c6c89, and pick out key phrases with <strong> at weight 500 in #121217.
- Use #ffc233 lemon sparingly: announcement bar, logo, uppercase eyebrow labels on violet.
- Give sections generous 120–160px vertical padding, and pair a 56px headline with a short grey paragraph in a two-column intro.

## Don't

- Don't set headings bold. The friendly tone depends on Circular Book at 400.
- Don't use gradients on the violet surfaces or buttons. Colour blocks are flat.
- Don't add shadows to buttons, sections or large panels. Keep the single soft shadow for small floating UI cards.
- Don't use square or slightly rounded buttons. Actions are always full pills.
- Don't use outlined secondary buttons. Secondary actions are plain text links.
- Don't use lemon yellow for body text or big fills beyond the announcement bar, and don't mix more than one saturated band hue in one section.

## Agent prompt

> Build a friendly, colourful fintech marketing site in the Lemon Squeezy style. Start with a 68px #ffc233 announcement bar (centred #121217 Inter 16px text and a small white pill 'Read more'). Below it, an 88px sticky nav on #5423e7 with rgba(255,255,255,0.8) 16px links, a text 'Sign in' and a white pill 'Get started →'. The hero is also flat #5423e7: a left-aligned 80px Circular Pro Book (fallback Figtree) headline at weight 400, line-height 1 and letter-spacing -3.2px in white, lavender-white 18px/1.7 Inter subcopy, and one white pill CTA (radius 8000px, padding 16px 48px, #121217 18px/500 label with arrow). Put a large tilted device mockup on the right that bleeds off the edge. The rest of the page is white #ffffff and #f7f7f8 sections with 120–160px vertical padding in a 1233px container. Section intros put a 56px/1.14 headline (-1.68px) on the left and a #6c6c89 paragraph on the right. Use 3-column grids of numbered feature cells (26px Circular titles, 16–18px grey copy with <strong> runs at 500 in #121217). Add full-bleed saturated bands in #f53d6b, #00acff and #2dca72 (with tints #fbb1c4, #ade4ff, #b2eecc) or pastels #feecfb, #f0faff, #f4f1fd holding angled phone and laptop screenshots and white 8px-radius UI cards with shadow rgba(17,17,46,0.06) 0 2px 4px, rgba(17,17,46,0.09) 0 8px 13px. Large panels use 40–48px radii. On light backgrounds, buttons and links are #7047eb. Borders and inputs use #d1d1db (email input is a 2px pill with 16px 24px padding). Eyebrows are uppercase, letter-spaced, 14px lemon on violet. Everything stays flat and airy with no gradients or bold headings.

## CSS custom properties

```css
/* Lemon Squeezy — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-brand: #5423e7; /* Main brand surface: announcement-free top of every page, the sticky nav, hero blocks, blog and case-study heroes. Always sits under white type. */
  --color-brand-interactive: #7047eb; /* Interactive violet on light backgrounds: filled buttons inside mockups, inline links, focus borders. */
  --color-ls-color-yellow: #ffc233; /* Announcement bar background, logo mark, uppercase eyebrow labels on violet (e.g. 'LEMON DROPS', 'FEATURED'). */
  --color-violet-200: #c6b6f7; /* Muted violet for decorative fills, hero subcopy tint and illustration shapes on the violet surface. */
  --color-text: #121217; /* Primary text on white and pastel sections; label colour of white pill buttons. */
  --color-gray-500: #6c6c89; /* Secondary body copy, feature descriptions, bullet points, captions. */
  --color-border-color: #d1d1db; /* Input borders, dividers, accordion separators. */
  --color-bg: #ffffff; /* Page background, white pill buttons on violet, headline colour on violet. */
  --color-grey-50: #f7f7f8; /* Alternating section background (e.g. 'Create the perfect buying experience' intro bands) and quiet card fills. */
  --color-pink-50: #feecfb; /* Large pastel section band and backdrop behind product showcases. */
  --color-coral: #f53d6b; /* Saturated full-bleed showcase band behind checkout mockups; also the danger colour. */
  --color-sky: #00acff; /* Saturated showcase band (email-marketing mockups), paired with #ade4ff and #38beff tints. */
  --color-green: #2dca72; /* Saturated showcase band (analytics mockups) and success indicators, paired with #b2eecc / #dff8ea. */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f7f7f8;
  --surface-raised: #ffffff;
  --border: #d1d1db;
  --text: #121217;
  --text-muted: #6c6c89;
  --primary: #5423e7;
  --primary-text: #ffffff;
  --accent: #ffc233;
  --success: #2dca72;
  --warning: #ffc233;
  --danger: #f53d6b;

  /* Typography */
  --font-display: 'Circular Pro Book', Figtree, 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  --font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-display: 80px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -3.2px;
  --text-display--font-weight: 400;
  --text-h1-section-title: 56px;
  --text-h1-section-title--line-height: 1.14;
  --text-h1-section-title--letter-spacing: -1.68px;
  --text-h1-section-title--font-weight: 400;
  --text-h2-statement: 48px;
  --text-h2-statement--line-height: 1.25;
  --text-h2-statement--letter-spacing: -1.44px;
  --text-h2-statement--font-weight: 400;
  --text-h3-large: 38px;
  --text-h3-large--line-height: 1.21;
  --text-h3-large--letter-spacing: -0.768px;
  --text-h3-large--font-weight: 400;
  --text-h3-feature: 26px;
  --text-h3-feature--line-height: 1.22;
  --text-h3-feature--letter-spacing: -0.52px;
  --text-h3-feature--font-weight: 400;
  --text-h4-price: 22px;
  --text-h4-price--line-height: 1.5;
  --text-h4-price--letter-spacing: -0.44px;
  --text-h4-price--font-weight: 400;
  --text-body-lead: 18px;
  --text-body-lead--line-height: 1.7;
  --text-body-lead--letter-spacing: normal;
  --text-body-lead--font-weight: 400;
  --text-button-label: 18px;
  --text-button-label--line-height: 1.4;
  --text-button-label--letter-spacing: -0.18px;
  --text-button-label--font-weight: 500;
  --text-small-ui: 16px;
  --text-small-ui--line-height: 1.6;
  --text-small-ui--letter-spacing: normal;
  --text-small-ui--font-weight: 400;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 120px;
  --space-12: 160px;
  --container: 1233px;
  --section-gap: 160px;

  /* Radius */
  --radius-pill-buttons-email-input-announcement-read-more-chip: 8000px;
  --radius-large-showcase-panels-and-image-containers: 40px;
  --radius-hero-device-panels-oversized-feature-blocks: 48px;
  --radius-medium-feature-cards: 32px;
  --radius-mockup-ui-cards-small-tiles-dropdown-panels: 8px;
  --radius-mobile-menu-panel: 20px;

  /* Shadows */
  --shadow-floating-card: rgba(17, 17, 46, 0.06) 0px 2px 4px 0px, rgba(17, 17, 46, 0.09) 0px 8px 13px 0px;
}
```

## Tailwind v4 theme

```css
/* Lemon Squeezy — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-brand: #5423e7;
  --color-brand-interactive: #7047eb;
  --color-ls-color-yellow: #ffc233;
  --color-violet-200: #c6b6f7;
  --color-text: #121217;
  --color-gray-500: #6c6c89;
  --color-border-color: #d1d1db;
  --color-bg: #ffffff;
  --color-grey-50: #f7f7f8;
  --color-pink-50: #feecfb;
  --color-coral: #f53d6b;
  --color-sky: #00acff;
  --color-green: #2dca72;
  --color-background: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-raised: #ffffff;
  --color-border: #d1d1db;
  --color-text: #121217;
  --color-text-muted: #6c6c89;
  --color-primary: #5423e7;
  --color-primary-text: #ffffff;
  --color-accent: #ffc233;
  --color-success: #2dca72;
  --color-warning: #ffc233;
  --color-danger: #f53d6b;
  --font-display: 'Circular Pro Book', Figtree, 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  --font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-display: 80px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -3.2px;
  --text-display--font-weight: 400;
  --text-h1-section-title: 56px;
  --text-h1-section-title--line-height: 1.14;
  --text-h1-section-title--letter-spacing: -1.68px;
  --text-h1-section-title--font-weight: 400;
  --text-h2-statement: 48px;
  --text-h2-statement--line-height: 1.25;
  --text-h2-statement--letter-spacing: -1.44px;
  --text-h2-statement--font-weight: 400;
  --text-h3-large: 38px;
  --text-h3-large--line-height: 1.21;
  --text-h3-large--letter-spacing: -0.768px;
  --text-h3-large--font-weight: 400;
  --text-h3-feature: 26px;
  --text-h3-feature--line-height: 1.22;
  --text-h3-feature--letter-spacing: -0.52px;
  --text-h3-feature--font-weight: 400;
  --text-h4-price: 22px;
  --text-h4-price--line-height: 1.5;
  --text-h4-price--letter-spacing: -0.44px;
  --text-h4-price--font-weight: 400;
  --text-body-lead: 18px;
  --text-body-lead--line-height: 1.7;
  --text-body-lead--letter-spacing: normal;
  --text-body-lead--font-weight: 400;
  --text-button-label: 18px;
  --text-button-label--line-height: 1.4;
  --text-button-label--letter-spacing: -0.18px;
  --text-button-label--font-weight: 500;
  --text-small-ui: 16px;
  --text-small-ui--line-height: 1.6;
  --text-small-ui--letter-spacing: normal;
  --text-small-ui--font-weight: 400;
  --radius-pill-buttons-email-input-announcement-read-more-chip: 8000px;
  --radius-large-showcase-panels-and-image-containers: 40px;
  --radius-hero-device-panels-oversized-feature-blocks: 48px;
  --radius-medium-feature-cards: 32px;
  --radius-mockup-ui-cards-small-tiles-dropdown-panels: 8px;
  --radius-mobile-menu-panel: 20px;
  --shadow-floating-card: rgba(17, 17, 46, 0.06) 0px 2px 4px 0px, rgba(17, 17, 46, 0.09) 0px 8px 13px 0px;
  --container-site: 1233px;
}
```