---
version: alpha
name: Statamic — illustrated account sign-in
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 two-field account sign-in screen with a vaporwave illustrated rail, delicate serif heading, purple field borders and a wide purple button.

Captured from https://statamic.com/sign-in at 2026-10-13T06:04:41.879581+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` “Sign in to Your Account”: 36px, weight 100, line-height 40px, color `oklch(0.21 0.034 264.665)`.

Matching mobile text is 36px with 40px leading.

## Layout

Center a compact sign-in column in the white right-hand area. Explain that this account manages licenses and addons, then present Email and Password. Align recovery and registration links on opposite sides below the submit action.

Desktop region: 1440.00 × 1000.00px at a 1440px viewport. Mobile region/page: 390.00 × 844.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 illustration is removed, the purple wordmark centers above a two-line heading, and the form stretches between 16px gutters. Recovery and registration remain a two-ended row. The idle fields and sign-in button are visible; authentication was not attempted.

## Elevation & Depth

The white form area is deliberately flat; color and detailed artwork belong to the side rail rather than field shadows.

## Shapes

Use thin purple borders, small input radii and a rectangular full-width action.

## Components

Center a compact sign-in column in the white right-hand area. Explain that this account manages licenses and addons, then present Email and Password. Align recovery and registration links on opposite sides below the submit 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.