Skip to content
DesignMunkDesignMunk Submit a site

Checkout Page

checkoutpage.com
One platform for everything you sell
Ecommerce Fintech Next.js Tailwind Homepage Inter
Share Visit site
checkoutpage.com DESKTOP · 1440
Checkout Page

AI Breakdown

Design export

# Design brief: the Checkout Page design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07082645/checkoutpage-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07082645/checkoutpage-com-featured.webp
- On DesignMunk: https://designmunk.com/checkout-page/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Checkout Page: Checkout Cards Showcase Beneath a Monochrome Hero

## Overview

Checkout Page's UI is pragmatic and sales-focused: monochrome typography on a bright surface with warm, understated accents. The audience is founders, creators, and teams who need trustworthy payments with minimal setup. The feel is serious but friendly — spacious sections, big type, and a consistent 16px radius language. Use color sparingly; contrast and hierarchy come from weight, size, spacing, and surface shifts rather than bright hues.

## Colors

- **primary (#000000):** Core ink for body text, labels, and high-contrast UI.
- **secondary (#7c7c7c):** Secondary text, helper copy, and muted icons.
- **tertiary (#111827):** Deep action and emphasis ink for headings within dark variants.
- **neutral (#ffffff):** Page canvas and default backgrounds.
- **border (#e8e0cd):** Warm divider lines and card outlines for gentle separation.
- **brand-noghrei-silver (#bdbdbd):** Subtle UI chrome and disabled states.
- **surface (#ffffff):** Content surfaces; equal to neutral.
- **on-surface (#000000):** Default text on surfaces; equal to primary.

## Typography

Inter is the single family across headings and body. It is freely available from Google Fonts and can be loaded directly. Substitutes with similar x-height and rhythm include Roboto, Ubuntu, or Cantarell.
- Headline LG (Inter 60px/1, 600, -0.03em): Hero headlines and key section intros.
- Headline MD (Inter 44px/1.09, 500, -0.022em): Major section headings.
- Headline SM (Inter 33px/1.21, 500) and XS (24px/1.21, 500): Subheads and card titles.
- Body MD (Inter 18px/1.63, 400): Paragraphs, FAQs, and captions. Keep generous line height to preserve the spacious feel.

## Layout

Spacing scales in distinct jumps: 6, 14, 24, 48, and 96px. Use 48–96px for section padding, 24px for internal gutters and card spacing, and 14px for dense UI stacks like form fields. Build responsive grids from the 24px rhythm: 1-up on mobile, 2–3-up on desktop, with 24px gaps. Keep generous negative space around hero and marquee elements to preserve the clean, product-forward tone.

## Elevation & Depth

Depth is restrained. Use sm shadow (rgba(11,18,32,0.1) 0 12px 32px) for floating cards and md shadow for interactive emphasis. Large shadows are absent; rely on the warm border (#e8e0cd) and the card surface (#faf6ec) for hierarchy. Avoid heavy blurs or colored glows — contrast comes from tone and spacing.

## Shapes

A single radius sets the voice: 16px (rounded.sm). Apply it to buttons, cards, inputs, and modals for consistency. Links remain square (button-link radius 0) to read as textual actions. Radii communicate interactivity and friendliness without whimsy — don't mix with sharper or pill shapes.

## Components

Buttons and cards are the core building blocks.
- Button Primary: Background #171717, text #ffffff, 16px radius, 6px x 16px padding, 80px fixed height. Use for primary CTAs.
- Button Secondary: Background #ffffff, text #000000, 16px radius, same sizing. Use where the action is important but not the primary path.
- Button Link: Text #4b5563, radius 0. For low-emphasis inline actions.
- Card: Background #faf6ec, text #17130b, 16px radius, 20px padding. Pair with border #e8e0cd or sm shadow for lift.

### Hero with Dual CTAs
- H1 uses Inter 60px/1, 600, -0.03em. Two buttons (primary and secondary) sit side by side with 24px gap and 48–96px vertical breathing room.

### Logo Marquee
- A single row of grayscale logos on the neutral surface. Use 24px gaps and the border color for faint separators if needed.

### Use-case Panels
- Three-up grid of cards (background #faf6ec, border #e8e0cd, radius 16px, padding 20px). Titles in Inter 24px/1.21, body at 18px/1.63.

### Delivery Methods Grid
- Four cards for Embedded, Pop-up, Hosted, and Link. Maintain 24px gaps, sm shadow, and consistent 16px radii.

### Comparison Split
- Two-column layout: left neutral surface with minimal chrome, right highlighted flow using the Card spec. 48px column gap; bullets in 18px body.

### AI Chat Panel
- Chat-like card using Card tokens; messages stack at 14px spacing. Buttons use primary/secondary styles.

### API Code Block
- Monochrome surface with on-surface text #000000 and 24px padding. Pair with md shadow to lift above the section.

### Pricing Band with Two CTAs
- Headline SM for section title, three bullet points in Body MD, and the standard primary + secondary buttons. Section padding 96px.

## Do's and Don'ts

- Do set hero headlines in Inter 60px/1, 600 with -0.03em tracking to match the page voice.
- Do keep buttons at 80px height with 16px radii; mix primary (#171717) and secondary (#ffffff) for clear paths.
- Do use the warm card surface #faf6ec with border #e8e0cd for product and pricing examples; reserve pure white for the page canvas.
- Don't introduce new accent colors; emphasis should come from weight, size, and spacing.
- Don't use large or colored shadows; stick to sm or md and lean on borders for separation.
- Don't round anything beyond 16px or mix in pill buttons; the system is not pill-shaped.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e8e0cd
- Accent/CTA: #171717

1) Build a hero section
- Canvas #ffffff with 96px top/bottom padding.
- H1: Inter 60px, weight 600, line-height 1, letter-spacing -0.03em, color #000000.
- Body: Inter 18px/1.63, color #7c7c7c, max-width 680px.
- Primary button: 80px height, padding 6px 16px, radius 16px, bg #171717, text #ffffff.
- Secondary button: 80px height, padding 6px 16px, radius 16px, bg #ffffff, text #000000.
- Gap between buttons: 24px.

2) Create a 3-up use-case grid
- Grid gaps 24px; section padding 48px.
- Each card: bg #faf6ec, text #17130b, border 1px solid #e8e0cd, radius 16px, padding 20px, shadow rgba(11,18,32,0.1) 0 12px 32px.
- Title: Inter 24px/1.21, 500; body: Inter 18px/1.63, 400.

3) Make a comparison split
- Two columns with 48px gap on #ffffff.
- Left column: neutral panel with thin border #e8e0cd; right column uses Card spec (#faf6ec, radius 16px, padding 20px, sm shadow).
- Section heading: Inter 33px/1.21, 500.

4) Build a delivery methods grid (4 items)
- Same card spec as above; include a small code or UI snippet inside each.
- Headings: Inter 24px/1.21; captions: Inter 18px/1.63.
- Place a primary button (#171717/#ffffff, 80px height) below the grid.

5) Add a pricing CTA band
- Background #ffffff, 96px vertical padding.
- Title: Inter 33px/1.21, 500; bullets: Inter 18px/1.63.
- Primary and secondary buttons as defined; 24px gap.

## Similar Brands

- Stripe: similarly spare type-led design; Stripe diverges with vibrant gradients while Checkout Page stays monochrome with warm cream cards.
- Gumroad: minimal interface and creator focus; Gumroad uses brighter accent colors, where Checkout Page relies on black and warm neutrals.
- Lemon Squeezy: ecommerce infrastructure with bold CTAs; more playful color than Checkout Page's restrained palette.
- SamCart: conversion-focused layouts and comparison sections; SamCart employs more color and heavier marketing chrome.
- Paddle: infrastructure narrative with API emphasis; Paddle leans corporate blue, while Checkout Page opts for black-and-white with beige surfaces.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #7c7c7c;
  --color-tertiary: #111827;
  --color-neutral: #ffffff;
  --color-border: #e8e0cd;
  --color-brand-noghrei-silver: #bdbdbd;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 60px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 44px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.09;
  --text-headline-md-tracking: -0.022em;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.63;
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 16px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: #171717;
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 6px 16px;
  --button-primary-height: 80px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 6px 16px;
  --button-secondary-height: 80px;
  --button-link-text-color: #4b5563;
  --button-link-rounded: 0px;
  --card-background-color: #faf6ec;
  --card-text-color: #17130b;
  --card-rounded: var(--radius-sm);
  --card-padding: 20px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #7c7c7c;
  --color-tertiary: #111827;
  --color-neutral: #ffffff;
  --color-border: #e8e0cd;
  --color-brand-noghrei-silver: #bdbdbd;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Inter";
  --font-headline-md: "Inter";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 60px;
  --text-headline-md: 44px;
  --text-headline-sm: 33px;
  --text-headline-xs: 24px;
  --text-body-md: 18px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.022em;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 16px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.067,
                    0.094,
                    0.153
                ],
                "hex": "#111827"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.91,
                    0.878,
                    0.804
                ],
                "hex": "#e8e0cd"
            }
        },
        "brand-noghrei-silver": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.741,
                    0.741,
                    0.741
                ],
                "hex": "#bdbdbd"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 44,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.022,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Checkout Page**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Ecommerce →
sundayparis.com
Sunday Paris Creative
Sunday Paris
oka.com
OKA Ecommerce
OKA
primalpastures.com
Primal Pastures Ecommerce
Primal Pastures
wattspet.com
Watts Pet Ecommerce
Watts Pet