HelpKit — Welcome-Back Login and Product Collage

---
version: alpha
name: HelpKit — Welcome-Back Login and Product Collage
colors:
  primary: '#7E3AF2'
  purple: '#7E3AF2'
  canvas: '#FFFFFF'
  ink: '#161E2E'
  muted: '#6B7280'
  pale: '#F8FAFC'
  sample-heading: '#1F2937'
  sample-supporting: '#9FA6B2'
  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: 12px
    fontWeight: 400
    lineHeight: 16px
---

## Overview
A pale blue-gray login form with a gradient title, password recovery and Google alternative beside a luminous purple-and-blue product illustration. 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 12px with 16px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
The desktop form occupies the left half and is vertically centered; a branded collage fills the right half. At 390px the form spans the screen with 24px horizontal margins and the supporting 24px heading stays centered. The right illustration is absent from the opening viewport; its full mobile positioning was not separately verified. 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
Subtle control shadows keep the form quiet while the product collage uses a broad blue-purple glow and layered screenshots.

## Shapes
White rounded fields, a full-width lavender primary button, an outlined Google button and a small circular Help launcher contrast with the dark image panel.

## Components
Email and password fields, Forgot your password link, Login action, Google sign-in and Sign up cross-link. Both fields remained empty; no validation, recovery email, OAuth flow or successful login was attempted.

## Do’s and Don’ts
Keep password recovery near the password field and distinguish the primary action from the provider alternative. Do not reuse registration-only legal language here or assert the account flow is accessible based on a visual check alone. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.