---
version: alpha
name: EmailOctopus — pastel feature-card rail
colors:
  primary: rgb(110, 84, 215)
  text: rgb(12, 12, 13)
  surface: rgb(245, 239, 255)
typography:
  body:
    fontFamily: Montserrat, "Montserrat Fallback", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Arial, sans-serif
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 23.25px
  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 horizontally overflowing feature rail with illustrated integrations, template and segmentation cards on soft multicolor gradient panels.

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

## 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 body, using `Montserrat, "Montserrat Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 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.

- `p` “Integrate EmailOctopus with your favourite apps – over 1,000 and ”: 15.5px, weight 400, leading 23.25px.
- `p` “Designs that are as unique as your brand, generated automatically”: 15.5px, weight 400, leading 23.25px.

## Layout

Place image-first cards in a horizontal rail with generous internal padding, bold labels and short supporting copy. Keep rounded image windows inside even larger rounded card shells. The captured desktop shows two complete cards and a partially visible third; that edge clipping belongs to the source rail, not the crop.

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

At 390px the first card is about 296px wide with a clear peek of the next card. Paragraph width changes from 381px to 264px while 15.5px text and 23.25px leading remain unchanged. The rail does not turn into a vertical stack in the inspected state; drag behavior was not tested.

## Elevation & Depth

Lavender-to-mint and lavender-to-pink card gradients give depth without strong shadows.

## Shapes

Large rounded card corners and inset rounded landscape images; preserve the intentional partial-card preview.

## Components

Place image-first cards in a horizontal rail with generous internal padding, bold labels and short supporting copy. Keep rounded image windows inside even larger rounded card shells. The captured desktop shows two complete cards and a partially visible third; that edge clipping belongs to the source rail, not the crop.

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.