---
title: "Lemon Squeezy design system"
variant: extended
source: https://www.lemonsqueezy.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/lemonsqueezy-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lemon Squeezy · Design System

> A bright, confident home for software commerce

**Theme:** light · **Industry:** saas · **Source:** https://www.lemonsqueezy.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lemon Squeezy pairs a vivid purple hero with a clean, spacious layout to present its software commerce platform. Product interface imagery and soft-tinted feature panels bring variety to an otherwise restrained typographic system.

## North star

Concentrate vivid color in the hero and product panels, and let spacious neutral sections keep feature content clear and scannable.

## Overview

The page opens with a saturated purple hero that makes the oversized white headline and tilted product dashboard immediately legible. A narrow yellow announcement strip and compact navigation sit above it; rounded white calls to action provide high-contrast interaction points. Below, the canvas alternates between white and light gray feature bands, with occasional pale pink, blue, green, and purple panels supporting product imagery. Circular headings use a friendly geometric sans character, while Inter handles navigation, body copy, and fine labels. Large section headings are balanced by muted explanatory text and generous open space. Feature content shifts between two-column introductions, three-column text grids, and full-width interface showcases. The result feels vivid but organized: strong color is concentrated in the hero and image panels, while most reading surfaces remain quiet and neutral.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Muted Slate | `#6c6c89` | `--color-muted-slate` | neutral | Muted body copy, supporting descriptions, and secondary interface text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white section bands, and high-contrast button surfaces. |
| Soft Ink | `#121217` | `--color-soft-ink` | neutral | Primary headings, body text, navigation, and dark button labels. |
| Fine Silver | `#d1d1db` | `--color-fine-silver` | neutral | Subtle borders and hairline dividers between content items. |
| Cloud Gray | `#f7f7f8` | `--color-cloud-gray` | surface | Light gray section bands behind ecommerce, reporting, and feature content. |
| Lilac Mist | `#e7baff` | `--color-lilac-mist` | accent | Lavender CTA and soft accent surfaces, including developer-oriented content. |
| Blush Mist | `#feecfb` | `--color-blush-mist` | surface | Pale pink section and card surfaces behind product illustrations. |
| Electric Violet | `#5423e7` | `--color-electric-violet` | brand | Dominant hero backdrop and saturated brand band, including the trust strip. |
| Display Black | `#000000` | `--color-display-black` | surface | Dark sections and product interface mockups; not the main page canvas. |
| Raspberry Pop | `#f53d6b` | `--color-raspberry-pop` | accent | Bright pink product-showcase panel and illustrated ecommerce mockups. |
| Petal Pink | `#fbb1c4` | `--color-petal-pink` | accent | Soft pink product showcase backdrop and illustration surfaces. |
| Sky Signal | `#00acff` | `--color-sky-signal` | accent | Bright blue background appearing in marketing product illustrations. |
| Air Blue | `#ade4ff` | `--color-air-blue` | accent | Pale blue illustration panel paired with email and lead-magnet mockups. |
| Mint Signal | `#2dca72` | `--color-mint-signal` | accent | Green reporting showcase panel and interface illustration accents. |
| Mint Wash | `#b2eecc` | `--color-mint-wash` | accent | Pale green backdrop within reporting product imagery. |
| Orchid Glow | `#cf75ff` | `--color-orchid-glow` | accent | Purple developer illustration panel and small accent details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f8` (Cloud Gray) · `--color-surface-2` → `#feecfb` (Blush Mist) · `--color-surface-3` → `#000000` (Display Black) · `--color-surface-4` → `#fbb1c4` (Petal Pink) · `--color-text` → `#121217` (Soft Ink) · `--color-text-muted` → `#6c6c89` (Muted Slate) · `--color-border` → `#d1d1db` (Fine Silver) · `--color-accent` → `#e7baff` (Lilac Mist) · `--color-accent-2` → `#5423e7` (Electric Violet) · `--color-accent-3` → `#f53d6b` (Raspberry Pop) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121217` | `#ffffff` | 18.67:1 | AAA |
| `#121217` | `#f7f7f8` | 17.44:1 | AAA |
| `#121217` | `#feecfb` | 16.54:1 | AAA |
| `#121217` | `#000000` | 1.12:1 | fail |
| `#6c6c89` | `#ffffff` | 5.07:1 | AA |
| `#6c6c89` | `#f7f7f8` | 4.73:1 | AA |
| `#6c6c89` | `#feecfb` | 4.49:1 | AA-large |
| `#6c6c89` | `#000000` | 4.14:1 | AA-large |
| `#e7baff` | `#ffffff` | 1.63:1 | fail |
| `#e7baff` | `#f7f7f8` | 1.52:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500 | Body copy, navigation, labels, and button text. | Inter |
| Circularpro book | `--font-display` | webfont | 400 | Display and section headings. | Manrope |

- **Inter:** Mostly regular weight; medium weight for buttons and uppercase, tracked eyebrow labels.
- **Circularpro book:** Regular-weight, rounded geometric forms; headings use tight negative tracking and sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | -0.04em | — | Circularpro book | Oversized hero headline and prominent top-level display text. |
| h1 | 56px | 400 | 1.14 | -0.03em | — | Circularpro book | Primary page headline and major section introductions. |
| h2 | 48px | 400 | 1.25 | -0.03em | — | Circularpro book | Large feature-section headings and secondary statements. |
| h3 | 38.5px | 400 | 1.2 | -0.02em | — | Circularpro book | Feature titles and prominent content headings. |
| h4 | 36px | 400 | 1.22 | -0.02em | — | Circularpro book | Smaller feature headings within text grids. |
| body | 18px | 400 | 1.7 | 0 | — | Inter | Explanatory paragraphs and feature descriptions. |
| caption | 14px | 500 | 1.6 | 0.143em | uppercase | Inter | Uppercase eyebrow labels and small category markers. |
| nav | 15px | 400 | 1.6 | 0 | — | Inter | Header links, account navigation, and menu labels. |
| eyebrow | 14px | 500 | 1.6 | 0.143em | uppercase | Inter | Compact uppercase section labels such as Ecommerce and Reporting. |

OpenType features in use: `"ss04"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 6, 8, 9, 12, 16, 24, 30, 32, 40, 56, 80, 120, 160, 192 px.
- Section rhythm 40px · element gap 24px · card padding 24px · max content width 1152px.

Use a centered content frame with a measured maximum width of 1152px. The page moves from a full-bleed hero and trust band into spacious editorial introductions, alternating two-column feature splits and three-column feature grids. Align headings and text to the left; place interface imagery alongside or beneath relevant copy. The measured spacing system uses an 8px base with a comfortable density, broad section gaps, and consistent gaps between related elements. Preserve substantial whitespace around large showcase panels rather than compressing the long page into dense cards.

## Shape & elevation

- Radius: button `8px` · media `6px` · link `8px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.24s ease` on interactive elements.

The page is mostly flat: rely on solid section backgrounds, whitespace, and fine dividers rather than card shadows. Product mockups supply their own depth through device frames and interface layering. Buttons are pill-shaped in the screenshots, while measured component radii also include compact 8px controls; use rounded forms selectively, not as a universal card treatment.

## Imagery

Use product interface mockups as the primary visual evidence: dashboards, checkout flows, storefronts, email forms, and API documentation. Frame them as large interface compositions, often split across adjacent solid-color panels; the hero uses a tilted dashboard device cropped at the right edge. Supporting illustrations may use colorful mockup artwork, but treat their varied hues as imagery rather than expanding the core brand palette.

## Components

### Announcement bar

A slim yellow full-width strip above the hero, with centered update text and a small white rounded Read more control.

### Hero navigation

Logo at the left, compact Inter links across the center, and sign-in plus a white pill Get started action at the right.

### Hero CTA

White rounded button with dark Inter text and a directional arrow, set prominently beneath the hero copy.

### Eyebrow and feature heading

Small uppercase, tracked Inter label above a large regular-weight Circularpro book heading.

### Feature text grid

Three-column feature list with short numbered labels, dark headings, muted descriptions, and generous separation.

### Product showcase

Large paired color panels containing commerce, marketing, or reporting interface mockups; keep imagery visually dominant.

### Developer CTA

Lavender-toned rounded action near API content, contrasted against a mostly white developer section.

### Measured component styles

- **Primary button** (“Explore the API”): background #e7baff · text #ffffff · radius 40px · padding 0px · 500 16px Inter
- **Secondary button** (“Get started”): background #ffffff · text #121217 · radius 40px · padding 8px 20px · 500 15px Inter
- **Link** (“E/1 Accept online payments Don't worry a”): transparent background · text #121217 · radius 8px · padding 40px · 400 18px Inter
- **Card**: background #feebfc · text #121217 · radius 0px · padding 96px 0px 0px 0px · 400 18px Inter
- **Navigation item** (“Platform”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px Inter

## Do

- Use Electric Violet #5423e7 for the dominant hero field.
- Keep the hero headline large, white, and left-aligned.
- Set explanatory copy in Muted Slate #6c6c89.
- Alternate white and Cloud Gray #f7f7f8 reading sections.
- Use product mockups as large, contextual visual anchors.
- Keep section labels small, uppercase, and letter-spaced.

## Don't

- Do not turn every section into a bordered card.
- Do not use illustration colors as the default page background.
- Do not crowd the hero with extra content or controls.
- Do not center-align all feature headings and descriptions.
- Do not replace the spacious feature grids with dense dashboards.
- Do not use heavy shadows as the main source of hierarchy.

## Agent prompt

Build a new SaaS page in the Lemon Squeezy visual style. Start with a full-bleed Electric Violet #5423e7 hero, a compact announcement strip, clean navigation, a large white left-aligned headline, and a product interface mockup cropped to one side. Use Gallery White #ffffff and Cloud Gray #f7f7f8 for spacious reading sections, with Soft Ink #121217 headings and Muted Slate #6c6c89 supporting copy. Set display headings in a Circularpro-like rounded geometric sans and interface text in Inter. Alternate editorial two-column splits with three-column feature grids; use colorful panels such as Raspberry Pop #f53d6b or Sky Signal #00acff only around relevant product imagery. Keep buttons rounded, layouts open, dividers subtle, and hierarchy driven by scale, color, and whitespace rather than shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed purple hero; announcement strip above navigation; copy left, tilted dashboard image right. | Announcement link, Primary signup CTA, Top-level navigation | Violet background, Large white headline, White pill buttons, Cropped product mockup |
| 2 | logo-cloud | Purple full-width band with a short heading and a row of company marks. | Social proof, Brand recognition | Violet band, Small heading, Logo row |
| 3 | feature-split | White single-column introduction with a prominent left-aligned heading. | Platform overview, Progressive disclosure | White canvas, Large heading, Restrained text |
| 4 | feature-split | Two-column feature area: numbered list left, illustrative payment flow right. | Expandable feature list, Numbered steps | Fine dividers, Pale pink illustration panel, Muted text |
| 5 | feature-split | Light gray two-column introduction with heading left and explanatory copy right. | Category introduction, Feature summary | Cloud Gray band, Uppercase eyebrow, Large heading |
| 6 | product-showcase | Full-width paired panels displaying checkout and storefront mockups. | Product demonstration, Visual comparison | Raspberry and pink panels, Large interface mockups, Device framing |
| 7 | feature-grid | Three-column, two-row feature grid on a pale neutral surface. | Scannable feature list, Numbered items | Small labels, Left-aligned headings, Muted paragraphs |
| 8 | feature-split | Two-column introduction with an eyebrow, large heading, and supporting paragraph. | Category introduction, Feature summary | White background, Uppercase label, Asymmetric columns |
| 9 | product-showcase | Paired blue panels with email and lead-magnet interface mockups. | Product demonstration, Lead capture preview | Blue panel backgrounds, Floating mockups, Layered forms |
| 10 | feature-grid | Three-column, two-row text grid on white. | Scannable feature list, Numbered items | Compact labels, Dark headings, Muted body copy |
| 11 | feature-split | Cloud Gray introduction in two columns with heading left and explanatory text right. | Category introduction, Feature summary | Light gray band, Uppercase eyebrow, Large heading |
| 12 | product-showcase | Full-width split showcase with paired reporting dashboard mockups. | Product demonstration, Dashboard preview | Green-toned panels, Large device frames, Interface screenshots |
| 13 | feature-grid | Three-column, two-row feature grid on a Cloud Gray surface. | Scannable feature list, Numbered items | Left-aligned text, Small labels, Neutral section background |
| 14 | feature-split | White two-column introduction with a large heading and paragraph. | Audience-specific introduction, Developer positioning | Uppercase eyebrow, Large heading, Open white space |
| 15 | feature-split | Two-column feature block with a purple-backed dark interface image and copy. | API feature overview, Documentation CTA | Orchid panel, Dark interface mockup, Lavender action |
| 16 | feature-split | Two-column documentation feature with copy on one side and a dark docs mockup on the other. | Documentation discovery, Read-the-docs CTA | White copy panel, Dark interface image, Purple-tinted showcase |

## Source CSS custom properties (selected)

```css
--border-color: #d1d1db;
--button-primary-light: #ffffffe6;
--dark-mode-bg-lighter: #141414;
--ls-color-yellow: #ffc233;
--ls-color-yellow-lighter: #ffd266;
--bullet-point-color: #6c6c89;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lemonsqueezy-com