Paddle design system

What font does Paddle use?

Paddle’s website uses serrif Condensed for headings and Inter for body text. serrif Condensed is not on Google Fonts; the closest free match is Source Serif 4; Inter is free on Google Fonts.

Paddle colour palette

Paddle’s home page is light (#F9F8F7 background, #1C1A15 text) and uses #1C1A15 for its main actions. Its palette: #F9F8F7, #EBE7DF, #1C1A15, #FCFCFC, #FFD400, #0E1414.

• #F9F8F7
  68.6% · backgrounds
• #EBE7DF
  12.7% · backgrounds
• #1C1A15
  12.7% · backgrounds, text
• #FCFCFC
  3.1% · backgrounds
• #FFD400
  2.3% · backgrounds
• #0E1414
  0.2% · backgrounds, text
• #D6CBB6
  0.2% · backgrounds
• #E4E1D1
  0.1% · backgrounds
• #000000
  0.1% · backgrounds
• #E8E6E2
  0.1% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Paddle’s largest type is 64px at weight 400.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 64px, 128px.

Corner radii: 3px, 4px, 6.4px, 10px, 16px, 18px, pill. 2 shadow levels measured.

What makes Paddle look like Paddle

Almost entirely neutral: 98% of the page is painted in #F9F8F7 and #EBE7DF.

#FFD400 is an accent: 2.3% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (64px serrifCondensed) is regular weight, not bold (400), tracked to -0.01em.

Open: text covers 10% of the page. Sections sit about 88px apart.

Paddle DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Paddle’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Paddle’s product, so use your own name, words and images.

Download Paddle DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Paddle’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;700&display=swap");

:root {
  --color-background: #F9F8F7; /* Background */
  --color-surface: #EBE7DF; /* Surface */
  --color-text: #1C1A15; /* Text */
  --color-text-muted: #545454; /* Text muted */
  --color-border: #EBE7DF; /* Border */
  --color-action: #1C1A15; /* Action */
  --color-on-action: #FCFCFC; /* On action */
  --color-positive: #1CC691; /* Positive */
  --color-warning: #FFD400; /* Warning */
  --font-body: "Inter", sans-serif; /* Inter */
  --font-display: "serrifCondensed", "Source Serif 4", serif; /* serrifCondensed on the site; Source Serif 4 renders */
  --type-display-large: 64px; /* Display Large, weight 400 */
  --type-display-large-leading: 64px;
  --type-display-large-tracking: -0.01em;
  --type-display-medium: 48px; /* Display Medium, weight 400 */
  --type-display-medium-leading: 57.6px;
  --type-display-medium-tracking: -0.01em;
  --type-display-small: 40px; /* Display Small, weight 400 */
  --type-display-small-leading: 48px;
  --type-display-small-tracking: -0.01em;
  --type-headline: 24px; /* Headline, weight 400 */
  --type-headline-leading: 28.8px;
  --type-headline-tracking: -0.01em;
  --type-title: 20px; /* Title, weight 400 */
  --type-title-leading: 30px;
  --type-title-tracking: -0.02em;
  --type-body-large: 16px; /* Body Large, weight 500 */
  --type-body-large-leading: 24px;
  --type-body-large-tracking: -0.025em;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 21px;
  --type-body-small-tracking: -0.029em;
  --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-16: 64px;
  --space-32: 128px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6.4px;
  --radius-xl: 10px;
  --radius-2xl: 16px;
  --radius-3xl: 18px;
  --radius-full: 9999px;
  --radius-64: 64px; /* component radius */
}

How this was measured

PikSpec’s scanner read the paddle.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Paddle is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Paddle.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.