Help Scout — split-screen registration and customer quote

---
version: alpha
name: Help Scout — split-screen registration and customer quote
colors:
  surface: '#faf8f7'
  ink: '#33302e'
  accent: '#0064f0'
  primary: '#33302e'
typography:
  primary:
    fontFamily: Scoutie Sans
    fontSize: 29.216px
    fontWeight: 700
    lineHeight: 29.216px
    letterSpacing: -0.58432px
  body:
    fontFamily: Scoutie Sans
    fontSize: 13.7392px
    fontWeight: 400
    lineHeight: 21.9827px
  control:
    fontFamily: Scoutie Sans
    fontSize: 15.7392px
    fontWeight: 600
    lineHeight: 42.4958px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 10px
---

## Overview

A first-step registration page pairing a clean labeled form and three-step progress indicator with a blue gradient testimonial panel.

Source: https://secure.helpscout.net/members/register/58/. Captured 2026-10-09T06:30:22.782306+00:00. This guide describes the observed page, not an official brand specification.

## Colors

Observed surface and computed-style palette: surface: #faf8f7; ink: #33302e; accent: #0064f0; primary: #33302e. Keep the documented accents distinct from neutral copy and form surfaces. Decorative artwork contains additional tones not represented by these core tokens.

## Typography

The primary sampled text uses "Scoutie Sans", Helvetica, Arial, sans-serif at 29.216px/29.216px, weight 700, with -0.58432px tracking. The body sample uses "Scoutie Sans", Helvetica, Arial, sans-serif at 13.7392px/21.9827px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 24.071px/24.071px.

## Layout

Use two equal desktop regions: a white form area on the left and a large rounded blue-to-coral gradient panel on the right. Put the logo, Step 1 of 3 label and segmented progress bar above the heading. Align first and last name side by side, then work email, password, a disabled initial action and secondary policy/sign-in links. The right panel contains an attributed customer quote on a translucent bordered inset.

The main screenshot records a 1440px-wide desktop page with a document height of 1000px. Mobile evidence is the opening 390×844px viewport, not a complete mobile-page audit.

At 390px the testimonial panel disappears and the form uses the full page width. First and last name fields stack, progress stays above the title, and the action spans the form. The names shown in fields are source placeholders, not entered information.

## Elevation & Depth

The registration form relies on thin input borders and whitespace; the testimonial region carries the rich gradient, subtle grid and translucent framed quote. Exact shadow blur and motion easing were not measured.

## Shapes

The sampled action has a computed corner radius of 10px and padding 0px 19.674px. Treat additional spacing or breakpoint choices as adaptation decisions, not measured source constants.

## Components

Only step one was observed. No values were entered, account created, password tested or trial started. The quote belongs to the source page and is not a newly verified endorsement. Optional cookies were all left disabled and confirmed through the source consent controls before capture.

## Do's and Don'ts

- Do preserve the documented hierarchy and observed mobile content order.
- Do keep field labels, source attribution and alternative actions visibly associated with their content.
- Do treat prices, metrics and testimonials as dated source content, not verified results.
- Don't infer unseen interaction states, successful authentication or application behavior.
- Don't reproduce low-contrast text without checking accessibility in the new implementation.