Statamic — three-tier pricing page

---
version: alpha
name: Statamic — three-tier pricing page
colors:
  primary: rgb(212, 255, 76)
  text: rgb(25, 26, 27)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 80px
    fontWeight: 300
    lineHeight: 80px
  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 pastel pricing page with three tall Core, Pro and Enterprise cards, an elevated dark center tier, large serif prices, lime purchase action and a split FAQ section.

Captured from https://statamic.com/pricing at 2026-10-13T06:04:26.378374+00:00. This reference contains the complete desktop page.

## Colors

Primary/accent: `rgb(212, 255, 76)`. 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.

- `h1` “Statamic Pricing”: 80px, weight 300, line-height 80px, color `rgb(25, 26, 27)`.
- `h2` “Core”: 36px, weight 300, line-height 40px, color `rgb(25, 26, 27)`.
- `h2` “Pro”: 36px, weight 300, line-height 40px, color `rgb(255, 255, 255)`.
- `h2` “Enterprise”: 36px, weight 300, line-height 40px, color `rgb(25, 26, 27)`.
- `h2` “FAQs”: 60px, weight 300, line-height 60px, color `rgb(25, 26, 27)`.
- `h3` “Can I build a site for a client and transfer the license to them later?”: 16px, weight 500, line-height 24px, color `oklch(0.21 0.034 264.665)`.
- `h3` “What is included in Basic Developer Support?”: 16px, weight 500, line-height 24px, color `oklch(0.21 0.034 264.665)`.
- `h3` “Which product or plan should I choose?”: 16px, weight 500, line-height 24px, color `oklch(0.21 0.034 264.665)`.
- `h3` “Do you offer discounts for non-profits or educational institutions?”: 16px, weight 500, line-height 24px, color `oklch(0.21 0.034 264.665)`.
- `h3` “Do you offer PPP (Purchase Price Parity) discounts?”: 16px, weight 500, line-height 24px, color `oklch(0.21 0.034 264.665)`.
- `h3` “If I don't like Statamic, can I request a refund?”: 16px, weight 500, line-height 24px, color `oklch(0.21 0.034 264.665)`.
- `h3` “Sign Up for Our Newsletter”: 20px, weight 300, line-height 28px, color `rgb(255, 255, 255)`.

Matching mobile text is 48px with 48px leading.

## Layout

Use three adjacent pricing columns with the middle Pro card starting slightly higher. Group price, billing note, CTA and feature list in that order. Follow the cards with a narrow FAQ introduction beside a wider accordion column, then the dark link-directory footer.

Desktop region: 1440.00 × 2848.00px at a 1440px viewport. Mobile region/page: 390.00 × 5822.00px at a 390px viewport. The primary image is full-page; the standard mobile image covers the opening viewport, with additional audit views only where noted.

At 390px the cards stack, the header becomes a menu icon, and the headline and introductory serif paragraph wrap centrally. The first Core card retains generous side gutters and a wide pill action. Lower accordion behavior was not exercised.

## Elevation & Depth

Pale blue/lilac background, white side cards and a nearly black featured card create hierarchy; modest shadows separate the tiers.

## Shapes

Use lightly rounded cards and pill-shaped pricing actions, not heavy border radii everywhere.

## Components

Use three adjacent pricing columns with the middle Pro card starting slightly higher. Group price, billing note, CTA and feature list in that order. Follow the cards with a narrow FAQ introduction beside a wider accordion column, then the dark link-directory footer.

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.