---
version: alpha
name: EmailOctopus — purple panel with lime action
colors:
  primary: rgb(225, 249, 157)
  text: '#FFFFFF'
  surface: rgb(60, 38, 104)
typography:
  heading:
    fontFamily: nohemi, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif
    fontSize: 48px
    fontWeight: 500
    lineHeight: 50.4px
  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 standalone deep-purple CTA panel with a white centered invitation, two-line reassurance copy and a contrasting lime pill action.

Captured from https://emailoctopus.com/ at 2026-10-14T06:07:47.716182+00:00. The primary image isolates `main > section:nth-of-type(9)`; desktop and mobile crops were measured independently.

## Colors

primary: `rgb(225, 249, 157)`; text: `#FFFFFF`; surface: `rgb(60, 38, 104)`. 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.

- `h2` “Start for free today”: 48px, weight 500, leading 50.4px.

## Layout

Use a wide inset purple panel with centered white heading, supporting copy and a compact lime action. Keep the hierarchy to three levels and leave spacious padding around the action.

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

At 390px the panel leaves 16px outer gutters. The heading falls from 48px to 32px, supporting copy wraps into three lines, and the 166.67px-wide action retains its desktop size.

## Elevation & Depth

The high-contrast purple panel is flat; its silhouette and lime action supply emphasis without a shadow.

## Shapes

Broad rounded panel corners and a fully rounded action create a soft, approachable close.

## Components

Use a wide inset purple panel with centered white heading, supporting copy and a compact lime action. Keep the hierarchy to three levels and leave spacious padding around the action.

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.