Skip to content
DesignMunkDesignMunk Submit a site

Statamic

statamic.com
Build sites you’re proud of, with a CMS you actually like.
Software Technology Tailwind Homepage Lexend p22-mackinac
Share Visit site
statamic.com DESKTOP · 1440
Statamic

AI Breakdown

Design export

---
version: alpha
name: Statamic
description: Build sites you’re proud of, with a CMS you actually like.
colors:
  primary: "#191a1b"
  secondary: "#647c28"
  tertiary: "#d4ff4c"
  neutral: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: p22-mackinac-pro
    fontSize: 96px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -0.031em
  headline-md:
    fontFamily: p22-mackinac-pro
    fontSize: 65px
    fontWeight: 300
    lineHeight: 1.48
    letterSpacing: -0.074em
  headline-sm:
    fontFamily: p22-mackinac-pro
    fontSize: 44px
    fontWeight: 300
    lineHeight: 1.2
  headline-xs:
    fontFamily: Lexend
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1.2
  body-md:
    fontFamily: Lexend
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.5
rounded:
  sm: 6px
  md: 16px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 40px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 36px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 36px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 48px 32px
---

# Statamic: Editorial Serif Headlines, Friendly Sans Everywhere Else

## Overview

Statamic's UI voice is editorial and confident: large, elegant headlines paired with a friendly geometric sans for clarity. The target audience spans developers, content teams, and buyers evaluating a Laravel-friendly CMS. Density is medium—copy-rich but kept readable with 20px body text and open sections. Use sparing lime accents to signal action or emphasis; most surfaces remain white with deep-ink text for a timeless, documentation-forward feel.

## Colors

- Primary (#191a1b): Deep ink for headlines and core text.
- Secondary (#647c28): Olive spruce for supportive accents and subdued success states.
- Tertiary (#d4ff4c): Electric lime for brand highlights and high-attention accents.
- Neutral (#ffffff): Pure white for page and card surfaces.
- Surface (#ffffff): Surface white for containers and panels.
- On-surface (#191a1b): Ink on surface for text placed on light panels.

## Typography

- P22 Mackinac Pro (custom): Display serif for headline-lg/md/sm. Not freely hostable (Typekit/Adobe Fonts). If unavailable, use obtainable serif substitutes with contrast and warmth such as Fraunces, DM Serif Display, or Playfair Display.
- Lexend (Google): Used for headline-xs and body-md. Freely loadable; primary workhorse for UI copy, paragraphs, and small headings.
- Inter (Google): Available and suitable for dense UI, labels, or as a neutral sans fallback when Lexend isn't desired. Freely loadable.
- Roles: Headlines emphasize light weights for elegance; body runs 20px/1.5 for comfortable reading; maintain generous letter-spacing defaults from tokens for display cuts.

## Layout

Spacing follows a compact-to-generous scale: 6, 14, 24, 40, 64px. Use xl (64px) for section padding, lg (40px) for intra-section rhythm, md (24px) for component gaps, sm (14px) for element spacing, and xs (6px) for tight controls. Cards ship with 48x32px internal padding, setting a comfortable reading measure. Content stacks in clear vertical sections; when using grids, prefer 2–3 columns on wide viewports and collapse to a single column with md/ lg spacing on mobile.

## Elevation & Depth

Depth is minimal. Only the sm shadow is defined: rgba(0,0,0,0.05) 0 2px 6px -16px, rgba(0,0,0,0.25) 0 7px 10px -4px. Use it for floating elements like screenshots or sticky panels. Larger shadows are none; hierarchy otherwise relies on white surfaces, deep-ink text, and occasional borders drawn with primary on light backgrounds. Avoid heavy elevation stacks; prefer tonal separation and whitespace.

## Shapes

Two radii shape the language: 6px for interactive controls (buttons) and 16px for containers (cards, screenshots). Use 6px to signal tap targets and 16px for grouped content or feature panels. Links are square (0px) to keep inline actions text-first.

## Components

- Buttons
  - Primary: 36px height; 8px 16px padding; background #191a1b; text #ffffff; 6px radius. Use for main actions.
  - Secondary: 36px height; 8px 16px padding; background #ffffff; text #191a1b; 6px radius. Use for alternate actions on light surfaces.
  - Link: Text-only; #191a1b; 0px radius. Reserve for inline or tertiary actions.
- Card: #ffffff surface, #191a1b text, 16px radius, 48px x 32px padding.

### Hero with Illustration
- Heading: headline-lg (P22 Mackinac Pro, 96px/1.2, weight 300). Body: body-md (Lexend 20px/1.5). Two CTAs (primary + secondary). Section padding: xl.

### Docked UI Screenshot
- A wide card with 16px radius and sm shadow to bridge hero and content. Use surface #ffffff if framing is needed; keep margins lg.

### Feature Grid ("Customize Everything", etc.)
- Section head: headline-sm (44px). Items: Lexend 20px body with sm spacing between title and detail; layout in 3 columns on desktop with md column gaps.

### Fieldtype Taglist
- Compact list of items as inline pills or rows. Text: Lexend 20px. Gaps: sm; use 6px radius if rendering as chips; on-surface text.

### Mode Toggle: Flat file / Database
- Two-button segmented control using secondary style (36px height, 6px radius). Content below sits in a Card (48x32 padding) for code or table examples.

### Marketplace Addon Card
- Card 16px radius; product title in Lexend 20px; price emphasized in primary. Use md gaps; CTA as button-link.

### Partner Teaser Row
- Agency cards as light surfaces; titles in Lexend 20px; sm gaps; link as button-link.

### Testimonial Block
- Quote body in Lexend 20px; author line styled as small headline-xs (30px) when emphasis is needed. Card container, 16px radius, md gaps.

### Footer Newsletter
- Inline input + secondary button (36px height). Use md vertical padding and lg spacing from surrounding links.

## Do's and Don'ts

- Do use P22 Mackinac Pro for major headlines and Lexend for all running text.
- Do keep buttons at 36px height with 8px 16px padding and 6px radius for consistency.
- Do reserve #d4ff4c for accents and moments of emphasis, not as a general background.
- Don't apply heavy shadows; only the defined sm shadow is available.
- Don't mix additional brand colors; stick to ink, white, olive, and lime.
- Don't round interactive and container surfaces to the same value; keep 6px for controls and 16px for cards.

## Agent Prompt Guide

Quick color reference
- Text: #191a1b
- Background: #ffffff
- Border: #191a1b
- Accent: #d4ff4c (lime)

1) Build the hero
- Section padding: 64px top/bottom
- H1: "Build sites you're proud of..." in P22 Mackinac Pro, 96px, weight 300, line-height 1.2, letter-spacing -0.031em, color #191a1b
- Lead: Lexend 20px/1.5, color #191a1b
- Buttons: Primary (36px high, 8px 16px, bg #191a1b, text #ffffff, radius 6px) and Secondary (bg #ffffff, text #191a1b, radius 6px)
- Optional docked screenshot below: card bg #ffffff, radius 16px, shadow "rgba(0,0,0,0.05) 0px 2px 6px -16px, rgba(0,0,0,0.25) 0px 7px 10px -4px"

2) Feature grid section
- Section head: P22 Mackinac Pro 44px, weight 300, line-height 1.2, color #191a1b
- Grid: 3 columns with 24px gaps
- Item title: Lexend 20px/1.5, color #191a1b
- Spacing: 40px between rows, 24px between title and text

3) Flat file vs Database panel
- Tabs: two buttons using Secondary style (36px high, 6px radius, bg #ffffff, text #191a1b)
- Panel: Card with bg #ffffff, text #191a1b, padding 48px 32px, radius 16px
- Code/table text: Lexend 20px/1.5

4) Marketplace card row
- Card: bg #ffffff, text #191a1b, radius 16px, padding 48px 32px
- Title: Lexend 20px/1.5; Price: color #191a1b
- Link action: button-link (text #191a1b)
- Grid spacing: 24px between cards, 40px section padding

## Similar Brands

- Craft CMS: Editorial leaning with serif display and product-proof sections; Craft skews cooler and more minimalist.
- Laravel: Developer-first site with strong typographic hierarchy; Laravel uses a red accent instead of lime and fewer illustration motifs.
- Webflow: Documentation-forward with proof via UI shots; Webflow is more kinetic and leans on gradient accents.
- Ghost: Clean, content-centric marketing with restrained color; Ghost keeps a simpler component set and fewer marketplace elements.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 hour ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 hour ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 15 hours ago