Ghost — White Signup Card over Publisher Collage

---
version: alpha
name: Ghost — White Signup Card over Publisher Collage
colors:
  paper: '#FFFFFF'
  field: '#F3F6F7'
  primary: '#15171A'
typography:
  heading:
    fontFamily: '"Inter var", sans-serif'
    fontSize: 36px
    fontWeight: 700
    lineHeight: 43.2px
  body:
    fontFamily: '"Inter var", sans-serif'
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
An initial signup screen placing a white rounded form over a dimmed collage of publication artwork and source testimonials; mobile removes the decorative background and prioritizes the fields. Inspected on 2026-09-30 at 1440px and 390px widths. This is a full-page or complete initial-screen reference, not an isolated component crop.

## Colors
The token values above are measured opaque CSS text, surface or action colors. Transparent roots inherit their surrounding surfaces and are not treated as measured white. Artwork and logo colors remain source-specific rather than universal tokens.

## Typography
The selected heading/label sample uses "Inter var", sans-serif, 36px / 43.2px, weight 700; the corresponding mobile sample is 15px. Supporting text sample is 13.5px / 24px. Preserve the hierarchy rather than assuming every paragraph uses the same size. Computed font stacks do not grant font licenses; choose licensed equivalents when adapting.

## Layout
At 1440px the centered form uses 500px-wide fields and a 36px heading; the publisher collage fills the background. At 390px the collage disappears, the heading becomes 24px, fields become 334px wide, and the form reads as a simple white page with 28px side gutters. Legal copy stays below the action, outside the dense field group. Measured outer document/component bounds: 1440 × 1000px desktop; 390 × 844px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
The white form separates strongly from a darkened illustrated background. Use the dim layer to keep the form dominant; avoid putting busy artwork behind labels.

## Shapes
Generously rounded outer card, 8px input/button corners, pale filled fields and a dark full-width action. Background testimonial and artwork cards use larger corner radii as visually observed.

## Components
Name, email and password fields; password-length help; Continue button; terms/privacy text; publisher artwork and quotes. The screenshot captures placeholders only, not entered personal data. Later site-setup, billing and validation steps were not opened or submitted.

## Do's and Don'ts
Do preserve the observed reading order, contrast, spacing and responsive emphasis. Do supply keyboard focus, meaningful labels and reduced-motion alternatives in an implementation. Do not copy source testimonials, brand assets or performance claims as your own. Do not infer successful submission, hidden validation, hover or authentication behavior from resting screenshots.