Gumroad — illustrated creator-commerce landing

---
version: alpha
name: Gumroad — illustrated creator-commerce landing
colors:
  surface: '#f4f4f0'
  ink: '#000000'
  pink: '#ff90e8'
  yellow: '#ffc900'
typography:
  display:
    fontFamily: ABC Favorit
    fontSize: 96px
    fontWeight: 400
    lineHeight: 96px
  interface:
    fontFamily: ABC Favorit
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
components:
  surface:
    backgroundColor: '{colors.surface}'
  pink:
    backgroundColor: '{colors.pink}'
  yellow:
    backgroundColor: '{colors.yellow}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

A playful creator-commerce landing with oversized black type, pink coin motifs, outlined illustrated cards, creator quotations, category rows and a dark newsletter footer.

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

## Colors

surface: #f4f4f0; ink: #000000; pink: #ff90e8; yellow: #ffc900. 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: “Go from 0 to $1” uses "ABC Favorit", 96px/96px, weight 400, tracking -0.4px. The corresponding mobile heading is 60px/60px.

The interface token samples “Video lessons. Monthly subscriptions. Whatever! Gumroad was created to help you experiment with all kinds of ideas and f” at 18px/28px, weight 400, using "ABC Favorit". These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Use a white navigation over a warm off-white canvas. Center the large first-dollar headline and pair a solid selling action with an outlined marketplace search. Continue through asymmetric illustrated feature cards, a yellow looping roadmap, an oversized source income figure, four testimonials and a category strip. Close with a simple action, panoramic illustration and black footer.

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

At 390px navigation becomes a wordmark and hamburger. The headline reduces from 96px to 60px and wraps to two lines. Selling and search controls stack, while coin illustrations remain partly off-edge as intentional decoration. The opening mobile viewport is audited; lower mobile layout is not inferred.

## Elevation & Depth

Flat fills and thin black illustration outlines dominate. White cards and crisp borders provide separation; avoid glossy SaaS gradients.

## Shapes

Use softly rounded feature cards, squared outlined inputs, black action rectangles and hand-drawn coin/character silhouettes. Decorative coins intentionally extend beyond the viewport.

## Components

The page uses a nested main scroller. The complete desktop reference is assembled from native viewport captures, excluding repeated 80px sticky navigation and final overlap using measured scroll positions. Source artwork and carousel strips show their captured states. Search, selling and newsletter forms were not submitted.

## Do's and Don'ts

Do treat source income counters and testimonials as dated source content, not verified earnings claims. Do not submit the footer newsletter or mislabel it as authentication. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.