EmailOctopus — purple subscriber-based pricing

---
version: alpha
name: EmailOctopus — purple subscriber-based pricing
colors:
  primary: rgb(110, 84, 215)
  text: rgb(12, 12, 13)
  surface: rgb(245, 239, 255)
typography:
  heading:
    fontFamily: nohemi, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif
    fontSize: 72px
    fontWeight: 700
    lineHeight: 79.2px
  supporting:
    fontFamily: Montserrat, "Montserrat Fallback", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Arial, sans-serif
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 23.25px
omitted:
- section: spacing
  reason: Measured geometry is documented in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes without inventing a global
    radius scale.
- section: components
  reason: Reference-specific composition is described in prose rather than an inferred
    token API.
---

## Overview

A pastel pricing page with Free and gradient-purple Pro cards, a subscriber control, feature-comparison accordions, a testimonial band and FAQs.

Captured from https://emailoctopus.com/pricing at 2026-10-14T06:03:58.932771+00:00. The primary image is the complete desktop page; mobile visual evidence is the 390 × 844 opening viewport.

## Colors

primary: `rgb(110, 84, 215)`; text: `rgb(12, 12, 13)`; surface: `rgb(245, 239, 255)`. These are observed reference colors, not a complete brand palette. Neutral hex values summarize visually matching neutral surfaces; measured text samples are retained below.

## Typography

The primary sampled role is heading, using `nohemi, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif`. Supporting text uses `Montserrat, "Montserrat Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif`. Do not mistake a button sample for a measured page heading.

- `h1` “Pricing plans to suit you”: 72px, weight 700, leading 79.2px.
- `h2` “Compare features”: 48px, weight 500, leading 50.4px.
- `h2` “FAQs”: 48px, weight 500, leading 50.4px.

## Layout

Center a bold headline above the monthly/yearly switch and contrasting plan cards. Keep the Pro price, currency, subscribers and email allowance grouped in one colored panel. Follow with category-based feature comparisons, three reassurance tiles, a quote band, FAQs and a purple CTA.

Desktop region/page: 1440.00 × 5714.00px at a 1440px viewport. Mobile region/page: 390.00 × 7201.00px at a 390px viewport.

At 390px the title reduces from 72px to 44px and Pro becomes the first visible plan beneath the billing switch. The purple card nearly fills the content width and the compact header becomes a hamburger. The mobile view covers the first plan, not all lower sections.

## Elevation & Depth

Use a dark-purple-to-lavender gradient for Pro, white comparison panels and a quiet pastel page background. The mint discount marker should remain subordinate to the price.

## Shapes

Pill billing controls, rounded plan cards, flower decorations and broad rounded accordion rows.

## Components

Center a bold headline above the monthly/yearly switch and contrasting plan cards. Keep the Pro price, currency, subscribers and email allowance grouped in one colored panel. Follow with category-based feature comparisons, three reassurance tiles, a quote band, FAQs and a purple CTA.

All interactions beyond ordinary navigation, consent dismissal and source-media loading remain untested. No credentials, forms, accounts, trials or purchases were submitted.

## Do's and Don'ts

- Do preserve this reference's alignment, hierarchy and measured responsive changes.
- Do keep labels and supporting text readable; preserve intentional carousel peeks where described.
- Do replace source-specific prices, product examples, metrics and customer proof with your own verified content.
- Don't infer validation, hover behavior, animation timing or accessibility conformance from a static capture.
- Don't promote a sampled font or radius into an unsupported global design system.