EmailOctopus — playful pastel email-marketing homepage

---
version: alpha
name: EmailOctopus — playful pastel email-marketing homepage
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 playful email-marketing homepage combining oversized black typography, an octopus mascot, pastel floral shapes, gradient feature cards, a pricing calculator and a purple closing CTA.

Captured from https://emailoctopus.com/ at 2026-10-14T06:03:47.039969+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` “Email marketing made easy”: 72px, weight 700, leading 79.2px.
- `h2` “Email marketing. Nothing else.”: 48px, weight 500, leading 50.4px.
- `h2` “We’re not cheap.”: 48px, weight 500, leading 50.4px.

## Layout

Begin with the centered two-line headline and mascot/flower artwork around it. Follow with a split accordion/product preview, horizontally overflowing illustrated feature cards, a subscriber-based pricing comparison, customer-support block, reviews and a deep-purple CTA. Preserve the distinct pale section surfaces and generous vertical rhythm.

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

At 390px the desktop navigation is replaced by a hamburger and the headline drops from 72px to 44px. The octopus moves below the centered action and reassurance text. Only the opening mobile viewport is evidenced for this full-page reference; individual feature/CTA/review references have complete mobile crops.

## Elevation & Depth

Soft pastel gradients within feature cards contrast with flat light page surfaces and saturated purple calls to action.

## Shapes

Flower/star motifs, pill actions, large rounded cards and a rounded-top dark footer establish the playful character.

## Components

Begin with the centered two-line headline and mascot/flower artwork around it. Follow with a split accordion/product preview, horizontally overflowing illustrated feature cards, a subscriber-based pricing comparison, customer-support block, reviews and a deep-purple CTA. Preserve the distinct pale section surfaces and generous vertical rhythm.

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.