---
version: alpha
name: Help Scout — support plans and AI savings comparison
colors:
  surface: '#faf8f7'
  ink: '#33302e'
  accent: '#0064f0'
  primary: '#33302e'
typography:
  primary:
    fontFamily: Scoutie Sans
    fontSize: 56.8656px
    fontWeight: 500
    lineHeight: 56.8656px
    letterSpacing: -0.568656px
  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 detailed support-software pricing page with plan cards, an AI Answers panel, a savings calculator, a dense feature matrix and a grainy cloud-art closing CTA.

Source: https://www.helpscout.com/pricing/. Captured 2026-10-09T06:30:04.980289+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 56.8656px/56.8656px, weight 500, with -0.568656px 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 36.2961px/36.2961px.

## Layout

Center the headline and billing choice over four adjacent panels for Standard, Plus, Pro and AI Answers. Emphasize the Plus action in blue. Follow with an AI savings section pairing numeric inputs with a comparative table, then a long category-based feature matrix across free and paid plans. End with FAQs, a cloud-textured invitation and the blue multi-column footer.

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

At 390px the plan cards remain in a horizontal rail: Standard is visible and Plus is partially clipped to the right. The heading and billing switch stay centered above the rail; a floating Menu/Get Started pill sits near the lower-left edge. Horizontal interaction and the lower comparison matrix were not exercised on mobile.

## Elevation & Depth

Use white rounded plan surfaces on an off-white base, subtle tinted AI pricing accents and restrained matrix dividers. Reserve saturated blue for the primary action and footer. 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

All plan amounts, calculator inputs and projected savings are the source's default display, not independent analysis. Billing switches, calculator edits, FAQ expansion and purchases were not exercised. 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.