Statamic以宽松的编辑式版面，搭配温暖的插画风景和细致的CMS产品画面。克制的黑白基调让丰富的功能与作品展示依然清晰易读。
North star · Pair generous white editorial space and expressive serif headlines with warm, detailed product imagery and restrained interface chrome.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
Citrus Signal
#d4ff4c
Small emphasis in links and primary-action details.
Berry Note
#a44185
Sparse accent text; secondary to the page’s warm neutral palette.
Lavender Edge
#cbc2ea
Occasional outlined link or card detail.
Cobalt Mark
#0444ac
Rare blue accent text, not the dominant CTA treatment.
表层色
Gallery White
#ffffff
Dominant page canvas, white sections, and light button surfaces.
Peach Paper
#f7e7d3
Warm opening hero band behind the illustrated landscape.
Vanilla Glow
#fef5e8
Pale warmth in softly blended section backgrounds.
Mist Gray
#f3f3f3
Subtle neutral section and interface background detail.
Apricot Veil
#fbeddb
Warm pale gradient and link-area detail.
Porcelain Tint
#faf8f7
Nearly white card and background detail.
中性色
Soft Ink
#191a1b
Primary headings, body copy, navigation, and the dark footer surface.
Warm Graphite
#5e5a5a
Muted navigation and secondary text.
Quiet Charcoal
#525252
Secondary copy and less prominent text.
Slate Copy
#4a5568
Occasional secondary text; not a defining brand color.
Deep Slate
#3f3f46
Low-volume dark text detail.
功能色
Soft Divider
#d4d4d8
Fine borders and understated separators around controls.
文字 背景 对比度 WCAG #191a1b Soft Ink#ffffff Gallery White17.43:1 AAA #191a1b Soft Ink#f7e7d3 Peach Paper14.38:1 AAA #5e5a5a Warm Graphite#ffffff Gallery White6.8:1 AA #5e5a5a Warm Graphite#f7e7d3 Peach Paper5.61:1 AA #5e5a5a Warm Graphite#191a1b Soft Ink2.56:1 不达标 #525252 Quiet Charcoal#ffffff Gallery White7.81:1 AAA
字体 字号阶梯：Perfect Fourth（比例约 1.292，正文 20px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Lexend 网络字体 · 字重 300 / 400 / 500 / 600 / 700 · 占比 66%
免费替代：Lexend
Navigation, body interface copy, buttons, and most card text.
Aa 设计
code-saver 网络字体 · 字重 300 / 700 · 占比 20%
免费替代：IBM Plex Mono
Monospace body and code-oriented text.
Aa 设计
p22-mackinac-pro 网络字体 · 字重 300 / 400 / 700 · 占比 14%
免费替代：Lora
Display and major editorial headings.
角色 示例 字号 字重 行高 字距 特大标题 Oversized hero headline and major editorial statements.
Statamic
72px 300 1 -0.05em 一级标题 Primary page headline or prominent section title.
Statamic
60px 300 1 -0.05em 二级标题 Feature-section headings and centered product narratives.
Statamic
36px 400 1.11 -0.025em 三级标题 Card and secondary editorial headings.
Statamic
30px 300 1.2 0 四级标题 Smaller card headings and supporting subheads.
The quick brown fox 敏捷的狐狸
24px 300 1.5 0 正文 Technical or code-like explanatory text.
The quick brown fox 敏捷的狐狸
20px 300 2 0 辅助文字 Dates, labels, and compact metadata.
The quick brown fox 敏捷的狐狸
12px 300 1.5 0 按钮 Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
18px 400 1.56 0 导航 Header navigation and compact footer navigation.
The quick brown fox 敏捷的狐狸
12px 300 1.5 0 链接 Inline actions, card links, and text links.
The quick brown fox 敏捷的狐狸
18px 400 1.56 0 代码 CMS snippets and technical examples.
const style = 1;
20px 300 2 0
间距与布局 基准单位 8px · 密度：宽松
96px 版块间距
8px 元素间距
40px 卡片内边距
896px 内容最大宽度
2px
4px
6px
8px
10px
12px
16px
24px
32px
40px
48px
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.
圆角与层次 md · link, card, media
sm · other
lg · card
hairline · button, text
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 10 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 | ` | `--color-gallery-white` | surface | Dominant page canvas, white sections, and light button surfaces. |
| Soft Ink | ` | `--color-soft-ink` | neutral | Primary headings, body copy, navigation, and the dark footer surface. |
| Warm Graphite | ` | `--color-warm-graphite` | neutral | Muted navigation and secondary text. |
| Citrus Signal | ` | `--color-citrus-signal` | accent | Small emphasis in links and primary-action details. |
| Peach Paper | ` | `--color-peach-paper` | surface | Warm opening hero band behind the illustrated landscape. |
| Quiet Charcoal | ` | `--color-quiet-charcoal` | neutral | Secondary copy and less prominent text. |
| Soft Divider | ` | `--color-soft-divider` | semantic | Fine borders and understated separators around controls. |
| Slate Copy | ` | `--color-slate-copy` | neutral | Occasional secondary text; not a defining brand color. |
| Vanilla Glow | ` | `--color-vanilla-glow` | surface | Pale warmth in softly blended section backgrounds. |
| Mist Gray | ` | `--color-mist-gray` | surface | Subtle neutral section and interface background detail. |
| Apricot Veil | ` | `--color-apricot-veil` | surface | Warm pale gradient and link-area detail. |
| Berry Note | ` | `--color-berry-note` | accent | Sparse accent text; secondary to the page’s warm neutral palette. |
| Porcelain Tint | ` | `--color-porcelain-tint` | surface | Nearly white card and background detail. |
| Lavender Edge | ` | `--color-lavender-edge` | accent | Occasional outlined link or card detail. |
| Deep Slate | ` | `--color-deep-slate` | neutral | Low-volume dark text detail. |
| Cobalt Mark | ` | `--color-cobalt-mark` | accent | Rare blue accent text, not the dominant CTA treatment. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Peach Paper) · `--color-surface-2` → ` (Soft Ink) · `--color-text` → ` (Soft Ink) · `--color-text-muted` → ` (Warm Graphite) · `--color-text-subtle` → ` (Quiet Charcoal) · `--color-border` → ` (Soft Divider) · `--color-accent` → ` (Berry Note) · `--color-accent-2` → ` (Cobalt Mark)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 17.43:1 | AAA |
| ` | ` | 14.38:1 | AAA |
| ` | ` | 6.8:1 | AA |
| ` | ` | 5.61:1 | AA |
| ` | ` | 2.56:1 | fail |
| ` | ` | 7.81:1 | AAA |
| ` | ` | 6.45:1 | AA |
| ` | ` | 2.23:1 | fail |
| ` | ` | 5.72:1 | AA |
| ` | ` | 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 ## 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 (## 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: 
