HelpKit — Split Registration with Customer Proof

---
version: alpha
name: HelpKit — Split Registration with Customer Proof
colors:
  primary: '#7E3AF2'
  purple: '#7E3AF2'
  canvas: '#FFFFFF'
  ink: '#161E2E'
  muted: '#6B7280'
  pale: '#F8FAFC'
  sample-heading: '#1F2937'
  sample-supporting: '#1F2937'
  form-canvas: '#EAEEF6'
typography:
  heading:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 24px
    fontWeight: 500
    lineHeight: 32px
  supporting:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
---

## Overview
A logged-out registration screen pairing a pale blue-gray email/password form with a dark purple collage of product screens and source customer endorsements. Inspected on 2026-10-05. This is a complete desktop page capture, not an isolated component crop.

## Colors
Use the observed palette tokens for the corresponding text and surfaces; photographs, artwork and gradients are not reduced to invented solid-color tokens. Blue, violet and pink form the source accent gradient. Keep neutral text readable against the relevant light or dark band; pale controls and white panels must remain distinguishable.

## Typography
The listed font families are computed CSS stacks, not a guarantee that every named fallback is installed. The selected heading sample is Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 24px, weight 500, line-height 32px. A supporting paragraph sample uses 14px with 20px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
Desktop divides into equal form and promotional halves. The form is centered in the left half with generous side margins; the supporting heading uses 24px/32px. At 390px the form becomes a full-width stack with 24px side margins and the promotional panel follows below it rather than disappearing. The opening mobile capture shows the entire form and the start of that panel. Primary image dimensions are 1440 × 1000px at a 1440px viewport. The mobile evidence is 390 × 844px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
Thin input outlines and light shadows lift white controls from the pale canvas. The right-hand artwork uses layered tilted screenshots and violet glow for depth.

## Shapes
Compact rounded input rectangles, a wide purple submission button, an outlined Google alternative and a thin password-strength track are visible.

## Components
Email placeholder, empty password control, legal links, Sign Up button, Google registration alternative and a Login cross-link. The sample email is the website's placeholder, not entered user data. No typing, validation, provider authentication or account creation was tested.

## Do’s and Don’ts
Retain visible field labels and keep legal copy adjacent to the primary action. Do not present the placeholder as a real account, confuse this registration state with login, or claim validation behavior from the static screenshot. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.