Help Scout — oversized support-platform landing page

---
version: alpha
name: Help Scout — oversized support-platform landing page
colors:
  surface: '#faf8f7'
  ink: '#33302e'
  accent: '#0064f0'
  primary: '#33302e'
typography:
  primary:
    fontFamily: Scoutie Sans
    fontSize: 89.208px
    fontWeight: 500
    lineHeight: 89.208px
    letterSpacing: -1.78416px
  body:
    fontFamily: Scoutie Sans
    fontSize: 11px
    fontWeight: 400
    lineHeight: 17.6px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
---

## Overview

A support-platform landing page with oversized dark typography, handwritten rotating emphasis, grainy blue-coral artwork, product-story panels and a vivid blue footer.

Source: https://www.helpscout.com/. Captured 2026-10-09T06:30:08.452701+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 89.208px/89.208px, weight 500, with -1.78416px tracking. The body sample uses "Scoutie Sans", Helvetica, Arial, sans-serif at 11px/17.6px. These are measured element styles, not a universal brand scale. The matching mobile primary sample uses 44.6355px/44.6355px.

## Layout

Float a compact white pill navigation above a wide, left-aligned hero. Pair the oversized headline with smaller supporting copy and actions below it. Follow with a dark three-benefit block, customer marks, then large rounded panels for Inbox, Agent, Copilot and Signal. Continue through product metrics, integration and security panels, industry links, editorial cards and a founder-style letter. Finish with a cloud-art CTA over a saturated blue footer.

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

The mobile opening places the logo at the top and a floating Menu/Get Started pill near the lower-left viewport edge. The large headline reflows into a narrow column; supporting copy sits above side-by-side actions. The handwritten final word changes automatically, and the static capture records one frame rather than measured motion behavior.

## Elevation & Depth

Rounded product panels sit on a warm-white field, with blue/coral/yellow grain textures at their edges. The dark benefit section creates a contrast break, and the final blue footer gives the long page a strong endpoint. Exact shadow blur and motion easing were not measured.

## Shapes

Use the observed soft card corners and fine field borders; exact global radius tokens were not measured. Treat additional spacing or breakpoint choices as adaptation decisions, not measured source constants.

## Components

Product UI, performance figures and attributed quotes are source content, not independently verified results. No demo, trial, account action or support message was submitted. 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.