Gumroad — bold transaction pricing and merchant-of-record page

---
version: alpha
name: Gumroad — bold transaction pricing and merchant-of-record page
colors:
  surface: '#ffffff'
  ink: '#000000'
  hero: '#ffc900'
  direct-panel: '#90a8ed'
  marketplace-panel: '#23a094'
  cta: '#ff90e8'
typography:
  display:
    fontFamily: ABC Favorit
    fontSize: 96px
    fontWeight: 500
    lineHeight: 86.4px
  interface:
    fontFamily: ABC Favorit
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
components:
  surface:
    backgroundColor: '{colors.surface}'
  hero:
    backgroundColor: '{colors.hero}'
  direct-panel:
    backgroundColor: '{colors.direct-panel}'
  marketplace-panel:
    backgroundColor: '{colors.marketplace-panel}'
  cta:
    backgroundColor: '{colors.cta}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

A bold transaction-pricing page using a yellow illustrated hero, lavender and teal fee panels, merchant-of-record explanation, a spacious FAQ and pink selling CTA.

Source: https://gumroad.com/pricing. Captured 2026-10-11T06:09:04.584939+00:00. This is an observational design reference, not an official brand specification.

## Colors

surface: #ffffff; ink: #000000; hero: #ffc900; direct-panel: #90a8ed; marketplace-panel: #23a094; cta: #ff90e8. Tokens describe observed interface surfaces and text, not every pixel in artwork. Translucent values retain source alpha; perceived colors vary with their backing surface.

## Typography

Primary sample: “Simple, transparent pricing” uses "ABC Favorit", 96px/86.4px, weight 500, tracking -0.4px. The corresponding mobile heading is 48px/48px.

The interface token samples “Per transaction for all sales through your profile or direct links to your customers.” at 24px/32px, weight 400, using "ABC Favorit". These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Center oversized black typography in a saturated yellow hero with outlined coin illustrations. Put the two fee models in equal-width lavender and teal bands immediately below. Follow with a large tax-management heading, an illustrated currency panel beside black explanatory copy, then a wide FAQ and pink closing action.

The native desktop screenshot is 1440 × 5885px, prepared at a 1440px viewport. Mobile evidence was gathered at a 390 × 844px viewport.

At 390px, the headline reduces from 96px to 48px and the fee panels stack. The first panel occupies the full width below the hero; descriptive text scales from 24px to 20px. Only the opening mobile viewport and measured style changes are audited.

## Elevation & Depth

Flat color blocks and crisp black borders create hierarchy. The black explanatory panel reverses copy to white and keeps the currency illustration separate.

## Shapes

Large rectangular bands, outlined elliptical coins, thin FAQ dividers and a compact rectangular closing button. Avoid rounding every content band into a card.

## Components

FAQ questions are closed in the captured image; hidden DOM answers are not proof of tested expansion. The complete desktop image uses native nested-scroller tiles with the 80px sticky navigation included once. Prices and tax wording are observed source content, not legal advice or independently audited claims.

## Do's and Don'ts

Do label each fee model with its context. Do not present a login redirect as pricing, infer taxes from illustrations, or treat dated source rates as permanent. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.