Statamic — illustrated take-it-for-a-spin CTA

---
version: alpha
name: Statamic — illustrated take-it-for-a-spin CTA
colors:
  primary: rgb(25, 26, 27)
  text: rgb(25, 26, 27)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 96px
    fontWeight: 300
    lineHeight: 96px
  supporting:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 24px
    fontWeight: 300
    lineHeight: 36px
omitted:
- section: spacing
  reason: Measured capture geometry is recorded in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes rather than inventing a global
    radius scale.
- section: components
  reason: This reference uses composition guidance in prose, not an inferred component-token
    API.
---

## Overview

A standalone closing CTA with a dashed reassurance pill, oversized serif invitation, short centered explanation, paired actions and a lush paper-cut waterfall landscape.

Captured from https://statamic.com/ at 2026-10-13T06:07:06.088684+00:00. This reference isolates `section.marketing-content.pt-24`.

## Colors

Primary/accent: `rgb(25, 26, 27)`. Measured heading/form text: `rgb(25, 26, 27)`. White is an observed light surface. These are reference tokens, not a complete brand palette; artwork and secondary panels introduce additional colors.

## Typography

The principal measured family is `p22-mackinac-pro, serif`. Supporting sample uses `p22-mackinac-pro, serif`. Preserve the contrast between text roles rather than treating every sample as the body default.

- `h2` “Take it for a spin.”: 96px, weight 300, line-height 96px, color `rgb(25, 26, 27)`.

Matching mobile text is 60px with 60px leading.

## Layout

Stack the reassurance pill, headline, paragraph and two actions on a centered axis. Reserve the lower band for the illustrated island and waterfall scene; do not place text across its busy foliage.

Desktop region: 1440.00 × 915.19px at a 1440px viewport. Mobile region/page: 390.00 × 808.00px at a 390px viewport. Each component has a separately measured full element crop at both widths.

At 390px the headline breaks into two lines, the paragraph becomes four lines, and the two actions stack. The landscape remains visible as a shallow full-width base rather than a separate content card.

## Elevation & Depth

The illustration creates layered depth while the text area stays nearly white with a warm lower fade. The primary button has a dark subtle gradient.

## Shapes

A dashed capsule sits above the serif heading; actions are rounded rectangles and the artwork has an irregular silhouette.

## Components

Stack the reassurance pill, headline, paragraph and two actions on a centered axis. Reserve the lower band for the illustrated island and waterfall scene; do not place text across its busy foliage.

This is one observed static state. Menus, filtering, accordions, billing changes and animation outcomes are not claimed as tested unless explicitly stated above.

## Do's and Don'ts

- Do retain the measured hierarchy, alignment and responsive changes described above.
- Do keep labels, legal choices and navigation text readable when adapting the design.
- Do replace source-specific copy, prices and customer proof with your own verified content.
- Don't infer hidden validation, focus states, motion timing or accessibility conformance from this screenshot.
- Don't copy decorative detail at the expense of the content structure.