Statamic — illustrated account registration

---
version: alpha
name: Statamic — illustrated account registration
colors:
  primary: rgb(124, 103, 203)
  text: oklch(0.21 0.034 264.665)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 36px
    fontWeight: 100
    lineHeight: 40px
  supporting:
    fontFamily: Lexend, Inter, system-ui
    fontSize: 14px
    fontWeight: 300
    lineHeight: 24.0001px
omitted:
- section: spacing
  reason: Measured capture geometry is recorded in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes rather than inventing a global
    radius scale.
- section: components
  reason: This reference uses composition guidance in prose, not an inferred component-token
    API.
---

## Overview

A registration screen pairing a vaporwave column-and-dolphin illustration with a white four-field form, serif title, purple outlined inputs and separate legal and newsletter checkboxes.

Captured from https://statamic.com/sign-up at 2026-10-13T06:04:33.753901+00:00. This reference contains the complete desktop page.

## Colors

Primary/accent: `rgb(124, 103, 203)`. Measured heading/form text: `oklch(0.21 0.034 264.665)`. White is an observed light surface. These are reference tokens, not a complete brand palette; artwork and secondary panels introduce additional colors.

## Typography

The principal measured family is `p22-mackinac-pro, serif`. Supporting sample uses `Lexend, Inter, system-ui`. Preserve the contrast between text roles rather than treating every sample as the body default.

- `h1` “Create a Statamic Account”: 36px, weight 100, line-height 40px, color `oklch(0.21 0.034 264.665)`.

Matching mobile text is 36px with 40px leading.

## Layout

Give the illustration a full-height left rail and place the form in a narrow right-side column. Put the account-scope explanation before Name, Email, Password and Confirm password. Keep the required agreement separate from the optional newsletter opt-in and finish with a full-width purple action.

Desktop region: 1440.00 × 1000.00px at a 1440px viewport. Mobile region/page: 390.00 × 1006.00px at a 390px viewport. The primary image is full-page; the standard mobile image covers the opening viewport, with additional audit views only where noted.

At 390px the art rail disappears, a centered purple wordmark replaces it, and the form uses almost the full viewport with 16px side gutters. The title wraps to two lines. The lower action is below the initial mobile viewport; no submission or validation was tested.

## Elevation & Depth

Keep the form on a plain white surface; the decorative rail and purple corner texture supply depth without wrapping fields in additional cards.

## Shapes

Inputs are shallow rounded rectangles with fine purple borders; the primary button is a low-radius block.

## Components

Give the illustration a full-height left rail and place the form in a narrow right-side column. Put the account-scope explanation before Name, Email, Password and Confirm password. Keep the required agreement separate from the optional newsletter opt-in and finish with a full-width purple action.

Account controls are shown in their logged-out idle state. No credentials, account creation, provider login, trial, form submission or purchase was attempted.

## Do's and Don'ts

- Do retain the measured hierarchy, alignment and responsive changes described above.
- Do keep labels, legal choices and navigation text readable when adapting the design.
- Do replace source-specific copy, prices and customer proof with your own verified content.
- Don't infer hidden validation, focus states, motion timing or accessibility conformance from this screenshot.
- Don't copy decorative detail at the expense of the content structure.