EmailOctopus — lavender customer-review carousel

---
version: alpha
name: EmailOctopus — lavender customer-review carousel
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 review carousel with lavender cards, star rows, short bold titles, customer quotes and name/company attribution.

Captured from https://emailoctopus.com/ at 2026-10-14T06:07:57.629653+00:00. The primary image isolates `main > section:nth-of-type(7)`; 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` “The customer service is incredibly quick and friendly and, most i”: 15.5px, weight 400, leading 23.25px.
- `p` “EmailOctopus is not only a great name but also a great service, I”: 15.5px, weight 400, leading 23.25px.

## Layout

Align equal-height lavender cards in a horizontal rail. Keep stars and the review title at the top, quote text in the middle and author/company attribution near the bottom. Overlay outlined circular previous/next controls at the edges. Adjacent partial cards are intentional.

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

At 390px one main card plus a neighboring peek is visible; the reviewed mobile state starts with a different card. Long quote text uses a visible ellipsis while attribution stays in place. Do not interpret the truncated copy as a full quotation or infer autoplay timing.

## Elevation & Depth

Pale lavender surfaces sit on a similarly light backdrop. Purple stars and outlined arrows establish hierarchy with little depth.

## Shapes

Modestly rounded review cards, five-star markers and circular arrow controls.

## Components

Align equal-height lavender cards in a horizontal rail. Keep stars and the review title at the top, quote text in the middle and author/company attribution near the bottom. Overlay outlined circular previous/next controls at the edges. Adjacent partial cards are intentional.

All interactions beyond ordinary navigation, consent dismissal and source-media loading remain untested. No credentials, forms, accounts, trials or purchases were submitted. Quotes and names are source evidence, not independently verified endorsements; do not reuse them as proof for another product.

## 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.