---
title: "Statamic design system"
variant: extended
source: https://statamic.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/statamic-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Statamic · Design System

> A warm editorial stage for a powerful CMS

**Theme:** light · **Industry:** devtools · **Source:** https://statamic.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Statamic pairs an airy, editorial layout with a warm illustrated landscape and detailed CMS product imagery. Restrained ink-and-white foundations keep the colorful feature and showcase sections readable.

## North star

Pair generous white editorial space and expressive serif headlines with warm, detailed product imagery and restrained interface chrome.

## Overview

The page opens on a full-bleed, peach-toned illustrated landscape, using the artwork as a distinctive hero backdrop rather than relying on a conventional product photo. A centered, light-weight P22 Mackinac Pro headline anchors the scene; compact Lexend navigation and supporting copy keep the interface contemporary. White is the main canvas through most of the long page, with warm beige bands and pale, softly colored gradients breaking up the content. Ink text supplies contrast, while lime appears sparingly for emphasis and calls to action. Product screenshots, interface previews, customer logos, and showcase-site tiles provide concrete proof of the CMS. Generous vertical breathing room and a centered content column balance dense cards and media grids. Rounded cards, fine borders, and subtle shadows organize content without making the page feel heavy; the dark footer closes the sequence with a clear tonal shift.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, white sections, and light button surfaces. |
| Soft Ink | `#191a1b` | `--color-soft-ink` | neutral | Primary headings, body copy, navigation, and the dark footer surface. |
| Warm Graphite | `#5e5a5a` | `--color-warm-graphite` | neutral | Muted navigation and secondary text. |
| Citrus Signal | `#d4ff4c` | `--color-citrus-signal` | accent | Small emphasis in links and primary-action details. |
| Peach Paper | `#f7e7d3` | `--color-peach-paper` | surface | Warm opening hero band behind the illustrated landscape. |
| Quiet Charcoal | `#525252` | `--color-quiet-charcoal` | neutral | Secondary copy and less prominent text. |
| Soft Divider | `#d4d4d8` | `--color-soft-divider` | semantic | Fine borders and understated separators around controls. |
| Slate Copy | `#4a5568` | `--color-slate-copy` | neutral | Occasional secondary text; not a defining brand color. |
| Vanilla Glow | `#fef5e8` | `--color-vanilla-glow` | surface | Pale warmth in softly blended section backgrounds. |
| Mist Gray | `#f3f3f3` | `--color-mist-gray` | surface | Subtle neutral section and interface background detail. |
| Apricot Veil | `#fbeddb` | `--color-apricot-veil` | surface | Warm pale gradient and link-area detail. |
| Berry Note | `#a44185` | `--color-berry-note` | accent | Sparse accent text; secondary to the page’s warm neutral palette. |
| Porcelain Tint | `#faf8f7` | `--color-porcelain-tint` | surface | Nearly white card and background detail. |
| Lavender Edge | `#cbc2ea` | `--color-lavender-edge` | accent | Occasional outlined link or card detail. |
| Deep Slate | `#3f3f46` | `--color-deep-slate` | neutral | Low-volume dark text detail. |
| Cobalt Mark | `#0444ac` | `--color-cobalt-mark` | accent | Rare blue accent text, not the dominant CTA treatment. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7e7d3` (Peach Paper) · `--color-surface-2` → `#191a1b` (Soft Ink) · `--color-text` → `#191a1b` (Soft Ink) · `--color-text-muted` → `#5e5a5a` (Warm Graphite) · `--color-text-subtle` → `#525252` (Quiet Charcoal) · `--color-border` → `#d4d4d8` (Soft Divider) · `--color-accent` → `#a44185` (Berry Note) · `--color-accent-2` → `#0444ac` (Cobalt Mark)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#191a1b` | `#ffffff` | 17.43:1 | AAA |
| `#191a1b` | `#f7e7d3` | 14.38:1 | AAA |
| `#5e5a5a` | `#ffffff` | 6.8:1 | AA |
| `#5e5a5a` | `#f7e7d3` | 5.61:1 | AA |
| `#5e5a5a` | `#191a1b` | 2.56:1 | fail |
| `#525252` | `#ffffff` | 7.81:1 | AAA |
| `#525252` | `#f7e7d3` | 6.45:1 | AA |
| `#525252` | `#191a1b` | 2.23:1 | fail |
| `#a44185` | `#ffffff` | 5.72:1 | AA |
| `#a44185` | `#f7e7d3` | 4.72:1 | AA |

### Gradients

- `linear-gradient(233deg, rgba(50, 197, 255, 0.08), rgba(182, 32, 224, 0.08) 51%, rgba(247, 181, 0, 0.08))`
- `linear-gradient(239deg, rgba(50, 197, 255, 0.08), rgba(224, 32, 32, 0.07) 50%, rgba(247, 181, 0, 0.07))`
- `linear-gradient(to top, rgba(255, 214, 176, 0.18) 0%, rgba(255, 214, 176, 0.48) 30%, rgba(255, 228, 208, 0.32) 50%, rgba(255, 240, 228, 0.14) 70%, rgba(0, 0, 0, 0) 90%)`
- `radial-gradient(60% 50%, rgba(255, 248, 236, 0.85), rgba(255, 244, 228, 0.5) 55%, rgba(0, 0, 0, 0) 80%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lexend | `--font-display` | webfont | 300, 400, 500, 600, 700 | Navigation, body interface copy, buttons, and most card text. | Lexend |
| code-saver | `--font-mono` | webfont | 300, 700 | Monospace body and code-oriented text. | IBM Plex Mono |
| p22-mackinac-pro | `--font-p22-mackinac-pro` | webfont | 300, 400, 700 | Display and major editorial headings. | Lora |

- **Lexend:** Clean sans-serif workhorse; measured weights 300–700. Keep interface labels compact and casing natural.
- **code-saver:** Use for technical snippets and code-like content, not as the default page voice.
- **p22-mackinac-pro:** Light, expressive serif with tight negative tracking on large headlines; use natural sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.292, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1 | -0.05em | — | p22-mackinac-pro | Oversized hero headline and major editorial statements. |
| h1 | 60px | 300 | 1 | -0.05em | — | p22-mackinac-pro | Primary page headline or prominent section title. |
| h2 | 36px | 400 | 1.11 | -0.025em | — | Lexend | Feature-section headings and centered product narratives. |
| h3 | 30px | 300 | 1.2 | 0 | — | p22-mackinac-pro | Card and secondary editorial headings. |
| h4 | 24px | 300 | 1.5 | 0 | — | p22-mackinac-pro | Smaller card headings and supporting subheads. |
| body | 20px | 300 | 2 | 0 | — | code-saver | Technical or code-like explanatory text. |
| caption | 12px | 300 | 1.5 | 0 | — | Lexend | Dates, labels, and compact metadata. |
| button | 18px | 400 | 1.56 | 0 | — | Lexend | Primary and secondary action labels. |
| nav | 12px | 300 | 1.5 | 0 | — | Lexend | Header navigation and compact footer navigation. |
| link | 18px | 400 | 1.56 | 0 | — | Lexend | Inline actions, card links, and text links. |
| code | 20px | 300 | 2 | 0 | — | code-saver | CMS snippets and technical examples. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 24, 32, 40, 48 px.
- Section rhythm 96px · element gap 8px · card padding 40px · max content width 896px.

A long, spacious homepage alternates a large illustrated hero with centered logo, news, feature, product, and ecosystem sections. Most sections sit on a white canvas; select feature and testimonial bands use pale warm or pastel gradient treatments. Content aligns to centered, constrained columns, while card collections expand into multi-column grids and the showcase becomes a wide media gallery. The generous measured section rhythm gives each block room to register; denser product screens and footer links are balanced by broad margins and clear heading hierarchy.

## Shape & elevation

- Radius: button `6px` · card `16px` · media `8px` · nav `6px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px`
- Shadow `md` (link, card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 6px -16px, rgba(0, 0, 0, 0.25) 0px 7px 10px -4px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 2px 3px -2px`
- Shadow `lg` (card): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(94, 90, 90, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 16px 40px -8px`
- Shadow `hairline` (button, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `md-2` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.07) 0px 2px 8px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px -4px`
- Shadow `lg-2` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(76, 48, 90) 0px 11px 37px -18px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Cards use rounded corners, light hairline borders, and restrained soft shadows to separate media from white space. The page avoids heavy panel outlines and deep elevation; product screenshots supply much of the visual depth. Layered hero artwork and overlapping interface imagery provide the strongest dimensional effect.

## Imagery

The hero uses a detailed, warm storybook landscape with layered foliage, clouds, waterfall, and wildlife around a visible CMS screenshot. Later sections mix crisp product-interface captures, partner logos, site previews, and testimonial portrait imagery. Preserve source artwork as a visual anchor; keep UI previews legible and site-gallery tiles varied rather than applying a uniform photo filter.

## Components

### Header navigation

Compact Lexend links sit over the hero art; dark text and simple dropdown indicators keep the header quiet.

### Hero actions

Pair a dark filled primary action with a light outlined secondary action, followed by a small developer-oriented link.

### Feature cards

Arrange product capabilities in a multi-column card grid with rounded corners, concise titles, short copy, and interface previews.

### CMS comparison

Center a serif-led flat-file/database story above a product interface preview and a mode switch.

### Ecosystem cards

Use white rounded cards for addons, starter kits, partners, community, and documentation, each with a relevant image and direct action.

### Showcase gallery

Present customer sites as a broad, varied grid of visual previews with minimal surrounding decoration.

### Footer

End with a dark surface, small muted link groups, and a clear multi-column information hierarchy.

### Measured component styles

- **Primary button** (“Flat file mode”): background #ffffff · text #191a1b · radius 12px · padding 0px 24px · 400 18px Lexend · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Explore the Addons →”): transparent background · text #191a1b · border 1px solid #cbd5e0 · radius 6px · padding 16px 48px · 400 18px Lexend · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Certified Partner Two Factor for Statami”): transparent background · text #191a1b · border 1px solid #cbc2ea · radius 8px · padding 12px · 300 16px Lexend · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“40+ Fieldtypes Always the right interfac”): transparent background · text #191a1b · radius 16px · padding 48px 32px · 300 16px Lexend · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgba(94, 90, 90, 0.1) 0px 0px 0px 1px, rgba(
- **Navigation item** (“Developers Documentation Learn how to bu”): transparent background · text #191a1b · radius 0px · padding 0px · 300 16px Lexend

## Do

- Use P22 Mackinac Pro or a close serif substitute for oversized editorial headings.
- Keep the main canvas white and reserve warm beige for selected story bands.
- Use the peach illustrated landscape as a full, immersive hero backdrop.
- Keep navigation, controls, and supporting interface copy in a clean sans serif.
- Give sections generous vertical separation and center their main content.
- Use fine borders and soft shadows to distinguish cards without adding visual weight.

## Don't

- Do not turn the page into a dense dashboard layout.
- Do not use bright accents as large section backgrounds.
- Do not replace the warm hero artwork with generic stock photography.
- Do not use heavy borders or strong shadows on every card.
- Do not set long interface copy in the display serif.
- Do not crowd the headline, product imagery, and calls to action together.

## Agent prompt

Build a new Statamic-style page with a bright editorial foundation. Use Gallery White (#ffffff) for the main canvas, Soft Ink (#191a1b) for headings and primary text, and Peach Paper (#f7e7d3) for a warm illustrated hero. Set expressive, light serif display headlines against clean Lexend-like interface typography; use a monospace face only for code examples. Center content in spacious sections, then vary the rhythm with carefully aligned card grids, product screenshots, logos, and customer-site previews. Use Citrus Signal (#d4ff4c) sparingly for emphasis. Separate cards with subtle borders, rounded corners, and restrained shadows. Keep gradients pale and atmospheric, let imagery carry color, and finish with a dark footer that organizes compact link groups.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width warm illustrated landscape with centered headline, copy, and paired actions. | primary and secondary actions, developer install link | transparent overlay navigation, large serif headline, layered product screenshot |
| 2 | logo-cloud | Centered supporting statement above a wide, multi-column logo row. | social proof | small brand marks, white canvas |
| 3 | content-feed | Editorial heading and intro followed by a three-column news card row. | news discovery, newsroom link | thumbnail cards, date metadata |
| 4 | feature-grid | Centered heading above a multi-row feature-card grid on a pale pastel gradient. | feature scanning, explore-more action | rounded white cards, embedded UI previews, soft gradient band |
| 5 | comparison | Centered headline and mode switch above a large product screenshot. | compare operating modes, toggle | editor preview, supporting caption |
| 6 | feature-grid | Pastel grid backdrop with a centered title and two-column stack of large cards. | browse ecosystem options, direct card actions | white elevated cards, illustrative previews, subtle grid lines |
| 7 | gallery | Centered heading and short intro above a broad grid of customer site previews. | explore showcase | varied site thumbnails, minimal framing |
| 8 | testimonials | Soft warm pastel band with portrait and quote arranged side by side. | customer proof | testimonial portrait, brand mark, large quotation |
| 9 | cta | Centered signup headline and copy above paired actions, with landscape artwork along the lower edge. | start free, try demo | small free-forever badge, illustrated landscape |
| 10 | footer | Dark full-width footer with five compact navigation columns and newsletter signup. | browse site links, newsletter signup | dark surface, small muted links, multi-column groups |

## Source CSS custom properties (selected)

```css
--livewire-progress-bar-color: #2299dd;
--color-slate-50: oklch(0.984 0.003 247.858);
--color-slate-100: oklch(0.968 0.007 247.896);
--color-slate-200: oklch(0.929 0.013 255.508);
--color-slate-300: oklch(0.869 0.022 252.894);
--color-slate-400: oklch(0.704 0.04 256.788);
--color-slate-500: oklch(0.554 0.046 257.417);
--color-slate-600: oklch(0.446 0.043 257.281);
--color-slate-700: oklch(0.372 0.044 257.287);
--color-slate-800: oklch(0.279 0.041 260.031);
--color-slate-900: oklch(0.208 0.042 265.755);
--color-slate-950: oklch(0.129 0.042 264.695);
--color-gray-50: oklch(0.985 0.002 247.839);
--color-gray-100: oklch(0.967 0.003 264.542);
--color-gray-200: oklch(0.928 0.006 264.531);
--color-gray-300: oklch(0.872 0.01 258.338);
--color-gray-400: oklch(0.707 0.022 261.325);
--color-gray-500: oklch(0.551 0.027 264.364);
--color-gray-600: oklch(0.446 0.03 256.802);
--color-gray-700: oklch(0.373 0.034 259.733);
--color-gray-800: oklch(0.278 0.033 256.848);
--color-gray-900: oklch(0.21 0.034 264.665);
--color-gray-950: oklch(0.13 0.028 261.692);
--color-neutral-50: oklch(0.985 0 0);
--color-neutral-100: oklch(0.97 0 0);
--color-neutral-200: oklch(0.922 0 0);
--color-neutral-300: oklch(0.87 0 0);
--color-neutral-400: oklch(0.708 0 0);
--color-neutral-500: oklch(0.556 0 0);
--color-neutral-600: oklch(0.439 0 0);
--color-neutral-700: oklch(0.371 0 0);
--color-neutral-800: oklch(0.269 0 0);
--color-neutral-900: oklch(0.205 0 0);
--color-neutral-950: oklch(0.145 0 0);
--color-stone-50: oklch(0.985 0.001 106.423);
--color-stone-100: oklch(0.97 0.001 106.424);
--color-stone-200: oklch(0.923 0.003 48.717);
--color-stone-300: oklch(0.869 0.005 56.366);
--color-stone-400: oklch(0.709 0.01 56.259);
--color-stone-500: oklch(0.553 0.013 58.071);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/statamic-com