---
version: alpha
name: Statamic — paper-landscape CMS homepage
colors:
  primary: rgb(247, 231, 211)
  text: rgb(25, 26, 27)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: p22-mackinac-pro, serif
    fontSize: 72px
    fontWeight: 300
    lineHeight: 72px
  supporting:
    fontFamily: Lexend, Inter, system-ui
    fontSize: 20px
    fontWeight: 300
    lineHeight: 30px
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

An immersive CMS homepage with a warm paper-craft landscape, large editorial serif headline, lime-accented actions, product previews, pastel feature grids, showcase gallery and illustrated closing CTA.

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

## Colors

Primary/accent: `rgb(247, 231, 211)`. 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 `Lexend, Inter, system-ui`. Preserve the contrast between text roles rather than treating every sample as the body default.

- `h1` “Build sites you’re proud of, with a CMS you actually like.”: 72px, weight 300, line-height 72px, color `rgb(25, 26, 27)`.
- `h2` “New in Statamic”: 60px, weight 300, line-height 60px, color `rgb(25, 26, 27)`.
- `h3` “Meet Sherpa — Statamic Without the Terminal”: 20px, weight 500, line-height 25px, color `rgb(25, 26, 27)`.
- `h3` “Sidecar: Statamic for the Markdown You Already Have”: 20px, weight 500, line-height 25px, color `rgb(25, 26, 27)`.
- `h3` “Sneak Peek: Forms 2.0”: 20px, weight 500, line-height 25px, color `rgb(25, 26, 27)`.
- `h2` “Enjoy a control panel designed to adapt to you”: 60px, weight 300, line-height 60px, color `rgb(25, 26, 27)`.
- `h3` “Customize Everything”: 30px, weight 400, line-height 36px, color `rgb(25, 26, 27)`.
- `h3` “Powerful Blueprints”: 30px, weight 400, line-height 36px, color `rgb(25, 26, 27)`.
- `h3` “40+ Fieldtypes”: 30px, weight 400, line-height 36px, color `rgb(25, 26, 27)`.
- `h3` “Block-based Editing”: 30px, weight 400, line-height 36px, color `rgb(25, 26, 27)`.
- `h3` “Live Preview”: 30px, weight 400, line-height 36px, color `rgb(25, 26, 27)`.
- `h3` “Multi-Site”: 30px, weight 400, line-height 36px, color `rgb(25, 26, 27)`.
- `h2` “From flat file to database, Statamic scales with you”: 60px, weight 300, line-height 60px, color `rgb(25, 26, 27)`.
- `h2` “Explore the ever-expanding Statamic Ecosystem”: 60px, weight 300, line-height 60px, color `rgb(25, 26, 27)`.
- `h3` “Yeah, there's probably an addon for that.”: 36px, weight 400, line-height 40px, color `rgb(25, 26, 27)`.
- `h3` “Get a jump start on your next project.”: 36px, weight 400, line-height 40px, color `rgb(25, 26, 27)`.
- `h3` “A drop-in-ready CMS for all your Laravel projects.”: 36px, weight 400, line-height 40px, color `rgb(25, 26, 27)`.
- `h3` “Find a development partner you can trust.”: 36px, weight 400, line-height 40px, color `rgb(25, 26, 27)`.
- `h3` “A caring community you can feel at home in.”: 36px, weight 400, line-height 40px, color `rgb(25, 26, 

Matching mobile text is 48px with 48px leading.

## Layout

Center the two-line desktop proposition above paired actions and an overlapping control-panel preview. Continue through customer logos, newsroom cards, six feature cards, a file/database demonstration, ecosystem cards, a two-row site showcase and an attributed testimonial. Leave broad vertical gaps between thematic sections.

Desktop region: 1440.00 × 12229.00px at a 1440px viewport. Mobile region/page: 390.00 × 17402.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 navigation collapses to wordmark and menu icon; the large serif headline wraps into four lines and the two primary actions remain side by side. Landscape art is cropped around the centered content. Only the opening mobile viewport is asserted for this full-page reference.

## Elevation & Depth

Layer paper-cut foliage, clouds and product imagery; use pastel washes and restrained screenshot shadows. Avoid treating the illustrated scenery as a generic flat gradient.

## Shapes

Rounded action rectangles contrast with irregular paper edges and the rectangular product screenshot.

## Components

Center the two-line desktop proposition above paired actions and an overlapping control-panel preview. Continue through customer logos, newsroom cards, six feature cards, a file/database demonstration, ecosystem cards, a two-row site showcase and an attributed testimonial. Leave broad vertical gaps between thematic sections.

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.