Gumroad — illustrated split-screen creator sign-up

---
version: alpha
name: Gumroad — illustrated split-screen creator sign-up
colors:
  surface: '#f4f4f0'
  ink: '#000000'
  google: '#5383ec'
  input: '#ffffff'
typography:
  display:
    fontFamily: ABC Favorit
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
  interface:
    fontFamily: ABC Favorit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
components:
  surface:
    backgroundColor: '{colors.surface}'
  google:
    backgroundColor: '{colors.google}'
  input:
    backgroundColor: '{colors.input}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

A creator sign-up screen with a large source social-proof headline, stacked Google/X options, email/password fields and a vivid tiled character illustration.

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

## Colors

surface: #f4f4f0; ink: #000000; google: #5383ec; input: #ffffff. 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: “Join over 317,965 creators who have earned over $1,236,262,072 on Gumroad selling digital products and memberships.” uses "ABC Favorit", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif, 40px/48px, weight 400, tracking normal. The corresponding mobile heading is 40px/48px.

The interface token samples “You agree to our Terms of Use and Privacy Policy.” at 16px/22px, weight 400, using "ABC Favorit", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Allocate about 60% of desktop width to a pale form surface and 40% to an edge-to-edge character grid. Put the wordmark and login link above a large multiline introduction. Separate the form with a horizontal rule, then stack provider actions, an or divider, labeled fields and the black create action.

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

At 390px the illustration and desktop wordmark disappear; the login link remains. The 40px headline keeps its size but wraps deeply, moving the form down the page. Provider buttons and fields become 326px wide with 32px gutters. The captured mobile viewport stops near the email field; lower controls are documented by measured DOM, not a full mobile screenshot.

## Elevation & Depth

Almost no elevation: a single black border divides the pale form side and the bright illustrated side. Brand-provider button colors distinguish alternate methods from the black primary action.

## Shapes

Slight 4px control radii, thin input borders and a tightly tiled illustration grid. Keep the or divider and field labels visually separate.

## Components

Initial empty registration form only. No credentials, provider authorization, password generation or Create account action was submitted. The source social-proof figures were captured as displayed, not verified or invented.

## Do's and Don'ts

Do keep sign-up and sign-in states distinct. Do not repeat source earnings totals as independently substantiated facts or trigger account creation during inspection. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.