Gumroad — illustrated sign-in with passkey alternative

---
version: alpha
name: Gumroad — illustrated sign-in with passkey alternative
colors:
  surface: '#f4f4f0'
  ink: '#000000'
  google: '#5383ec'
  stripe: '#625bf6'
  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}'
  stripe:
    backgroundColor: '{colors.stripe}'
  input:
    backgroundColor: '{colors.input}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

A split-screen login layout combining colorful tiled artwork with Google, X and Stripe options, email/password fields, password recovery and an outlined passkey action.

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

## Colors

surface: #f4f4f0; ink: #000000; google: #5383ec; stripe: #625bf6; 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: “Log in” 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 “Google” 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

Keep the desktop artwork on the right and the broad pale login surface on the left. Place the short Log in heading above a rule, provider button stack and or divider. Align Forgot your password with the password label, then place solid Login and outlined passkey actions below.

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 disappears, leaving a one-column form with 32px gutters and 326px-wide controls. The 40px Log in heading remains. The full mobile document measures 889px; the opening 844px image covers the form controls without asserting a complete mobile-page audit.

## Elevation & Depth

Flat pale surface, thin field borders and a solid black primary action. Provider colors are localized rather than repeated throughout the layout.

## Shapes

Consistent 4px control radii, long full-width button rectangles, a horizontal rule pair around or and a simple password-visibility icon.

## Components

No input, Login, recovery, passkey or provider authorization was performed. This is distinct from the source sign-up screen, which has different headline and actions; it is not a generic identity-provider page.

## Do's and Don'ts

Do preserve a clear primary credential path and visible recovery affordance. Do not imply passkey support was successfully exercised merely because its button is visible. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.