Help Scout — split promotional and email login card

---
version: alpha
name: Help Scout — split promotional and email login card
colors:
  surface: '#f8faf9'
  card: '#ffffff'
  ink: '#1d2b36'
  accent: '#304ddb'
  primary: '#1d2b36'
typography:
  primary:
    fontFamily: Aktiv Grotesk
    fontSize: 23px
    fontWeight: 500
    lineHeight: 28.06px
  body:
    fontFamily: Aktiv Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
  control:
    fontFamily: Aktiv Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 4px
---

## Overview

A two-panel login card combining grainy orange-blue promotional artwork with email/password fields, a blue action and a Google alternative.

Source: https://secure.helpscout.net/members/login?jump=https%3A%2F%2Fsecure.helpscout.net. Captured 2026-10-09T06:24:16.702403+00:00. This guide describes the observed page, not an official brand specification.

## Colors

Observed surface and computed-style palette: surface: #f8faf9; card: #ffffff; ink: #1d2b36; accent: #304ddb; primary: #1d2b36. 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 "Aktiv Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif at 23px/28.06px, weight 500, with normal tracking. The body sample uses "Aktiv Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif at 14px/19.6px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 23px/28.06px.

## Layout

Center the logo over a large white rounded card. Use the left half for grainy promotional art, a large white announcement and its link. Center a compact login form in the right half with two fields, remember checkbox, blue action, or divider, Google option and recovery link. Place the trial invitation below the enclosing card.

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.

The mobile layout hides the promotional half entirely. The logo remains centered over a full-width login card whose inputs and actions fill the interior. All login controls, password recovery and the trial link are visible in the mobile opening.

## Elevation & Depth

A fine border and small lower shadow define the main white card on a cool pale background. The artwork supplies texture; the form remains flat and high-contrast. Exact shadow blur and motion easing were not measured.

## Shapes

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

## Components

Email was autofocus-highlighted and the remember-for-30-days checkbox was initially checked by the source. No credentials, provider flow, recovery request or successful login was attempted.

## 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.