---
version: alpha
name: Simple Analytics — split-screen magic-link sign-up
colors:
  surface: '#FCFCFC'
  ink: '#2A373A'
  accent: '#FF4F64'
  soft: '#E7F4F4'
  primary: '#2A373A'
typography:
  primary:
    fontFamily: SpaceGrotesk
    fontSize: 30px
    fontWeight: 700
    lineHeight: 36px
  body:
    fontFamily: SpaceGrotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
  control:
    fontFamily: SpaceGrotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 8px
---

## Overview

A two-column registration screen with a pale-blue benefits and testimonial rail, compact progress dots, an email field and a coral magic-link/password segmented selector.

Source: https://www.simpleanalytics.com/signup. Captured 2026-10-08T06:04:35.922701+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed palette roles: surface: #FCFCFC; ink: #2A373A; accent: #FF4F64; soft: #E7F4F4; primary: #2A373A. These values come from computed source styles or inspected flat screenshot surfaces. Keep accent colors tied to their documented roles rather than tinting every text element.

## Typography

The primary sampled text uses SpaceGrotesk at 30px / 36px, weight 700, with a desktop width of 560.00px. The matching mobile sample uses 24px / 32px across 325.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Split the desktop screen evenly. The left rail contains brand, benefits, social-proof row and an attributed quotation; the right rail vertically centers a minimal first-step form. Show a two-step marker above the form title, then email, login-method choice, unchecked policy acceptance and a small outlined Next action. Avoid wrapping the form in another heavy card.

Full desktop page at 1440px width, document height 1000px. Mobile evidence is a 390×844px opening viewport unless otherwise stated.

Responsive evidence: At 390px the benefits/testimonial rail disappears, leaving the logo above the first-step form. The form heading decreases from 30px to 24px. The email input, segmented method choice, unchecked terms and Next control remain visible in the opening; no second-step layout was inspected.

## Elevation & Depth

A pale-blue half-screen provides the grouping on desktop. The form itself stays flat on an almost-white surface; thin blue-gray outlines and coral selected states carry hierarchy. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 8px corner radius and 8px 12px padding. These values belong to that control, not every surface. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

The default selected method is Magic link; Password is visible but was not activated. The terms checkbox remains unchecked and no email or other data was entered. No validation, next-step transition or magic-link email was triggered. Social evidence is reproduced only as original source content.

## Do's and Don'ts

- Do preserve the documented hierarchy, content order, and observed responsive changes.
- Do keep source labels and attribution with their associated controls, diagrams and quotations.
- Do treat prices, metrics and marketing claims as dated source content rather than verified outcomes.
- Don't invent interaction states, validation results, successful submissions or additional breakpoints.
- Don't copy low-contrast or undersized text blindly; improve readability when adapting the pattern.