Ghost以明亮宽敞的编辑式画布，搭配深色产品展示区与鲜明的界面图像。醒目的大标题、克制的强调色和交替编排的功能版块，让整页呈现专注而专业的出版工具气质。
North star · Keep the surrounding page quiet and spacious so bold publishing headlines and real product imagery carry the story.
The visual system is built on a white canvas, punctuated by large near-black and navy bands that carry product imagery, metrics, and publisher examples. Pale blue-gray sections create gentle transitions between feature stories, while lime and yellow appear selectively on links, buttons, and launch messaging. Pink is a localized accent in a membership illustration, not a dominant brand field. InterVariable drives the page: headlines are bold and oversized, body copy is compact and direct, and small uppercase eyebrow labels introduce feature groups. Layout alternates between centered hero statements and left-aligned feature copy beside broad interface screenshots or illustrations. Wide margins and generous section breaks keep the long page legible. Product UI, editorial site previews, integration marks, and publisher imagery supply the color and detail; the surrounding interface stays restrained. Cards and media use rounded corners, with subtle shadows and fine borders rather than heavy effects.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Ghost Charcoal
#15171a
Core dark surface for product showcase and publisher proof bands; also the primary CTA background.
强调色
Fresh Lime
#bef264
Text and button accent on dark areas, including the Learn more treatment.
Electric Lime
#d1ff19
Bright link accent used for the Explore Ghost themes call to action.
Launch Saffron
#fec137
Rounded Ghost 6.0 announcement pill in the hero.
Member Pink
#f8b1e2
Pink surface inside the membership subscribe illustration; illustration-specific, not a page-wide background.
表层色
Gallery White
#ffffff
Main canvas and clean feature backgrounds; gives editorial copy and product previews breathing room.
Mist Blue
#e2e8f0
Pale blue-gray bands behind creator-tool and rich-media feature sections; also used for hairline borders.
Midnight Navy
#0f172a
Deep navy feature bands behind site-design and audience-growth content.
中性色
Slate Copy
#334155
Muted supporting text on light backgrounds, including explanatory feature copy.
Cloud Copy
#cbd5e1
Lighter secondary text, especially on dark surfaces and low-emphasis supporting details.
True Ink
#000000
Primary heading and navigation text on light areas; also text on the yellow launch pill.
Graphite Line
#1f2937
Occasional dark section edge or divider detail; not a major canvas color.
Haze Slate
#94a3b8
Low-emphasis text details and supporting interface copy.
Soft Gray
#9ca3af
Tertiary muted text used for small supporting interface details.
功能色
Moss Button
#1a2e05
Dark green button fill paired with lime text for secondary Learn more CTAs.
Muted Link
#64748b
Muted trial link and subdued link or heading text on pale backgrounds.
文字 背景 对比度 WCAG #000000 True Ink#ffffff Gallery White21:1 AAA #000000 True Ink#e2e8f0 Mist Blue17.03:1 AAA #000000 True Ink#15171a Ghost Charcoal1.17:1 不达标 #000000 True Ink#0f172a Midnight Navy1.18:1 不达标 #334155 Slate Copy#ffffff Gallery White10.35:1 AAA #334155 Slate Copy#e2e8f0 Mist Blue8.4:1 AAA
字体 字号阶梯：Augmented Fourth（比例约 1.398，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
InterVariable 网络字体 · 字重 400 / 700 / 600 / 500 · 占比 100%
免费替代：Inter
All page typography: display headlines, body copy, navigation, labels, links, and buttons.
角色 示例 字号 字重 行高 字距 特大标题 Largest campaign headline treatment for high-impact page statements.
Ghost
96px 700 1 -0.025em 一级标题 Hero headline and primary page-level statements.
Ghost
72px 700 1 0 二级标题 Major feature and section headings.
Ghost
48px 700 1.35 -0.025em 三级标题 Feature titles and supporting subsection headings.
Ghost
36px 700 1 -0.025em 四级标题 Smaller editorial headings and explanatory copy introductions.
The quick brown fox 敏捷的狐狸
24px 400 1.5 0 正文 Prominent body statements and emphasized lead copy.
The quick brown fox 敏捷的狐狸
18px 600 1 0 辅助文字 Compact uppercase labels and metadata.
The quick brown fox 敏捷的狐狸
12px 700 1 0.1em 按钮 CTA labels, including the dark primary action.
The quick brown fox 敏捷的狐狸
15px 600 1.5 0 导航 Header navigation items and utility links.
The quick brown fox 敏捷的狐狸
15px 500 1.5 0 链接 Large editorial CTA links and prominent text links.
Ghost
36px 600 1.5 -0.025em 眉题 Small uppercase feature-category labels.
The quick brown fox 敏捷的狐狸
12px 700 1 0.1em
间距与布局 基准单位 8px · 密度：宽松
80px 版块间距
48px 元素间距
— 卡片内边距
1392px 内容最大宽度
8px
12px
16px
20px
24px
32px
36px
40px
48px
54px
72px
80px
Use a wide centered content frame, measured at a 1392px maximum width, with generous outer whitespace and spacious section breaks. The hero is centered and typographically dominant; most feature sections shift to left-aligned copy paired with large product media. Alternate light, pale blue-gray, and dark bands to give a long page clear pacing. Use broad single-column bands and occasional multi-column logo or publisher grids rather than dense dashboard-like page layouts.
圆角与层次 sm · link, button, section
md · link
md · link
lg · link
The page is mostly flat, using strong background bands rather than layered cards to establish hierarchy. Media and cards have rounded corners, with fine pale borders and restrained low shadows. Reserve stronger separation for product previews; avoid floating elements or dramatic elevation effects that would undermine the editorial calm.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation Compact horizontal header on white with Ghost mark, understated links, sign-in text, and a dark rounded Get Started button.
Announcement pill Small centered saffron pill above the hero headline, with dark text and a fully rounded shape.
Hero statement Centered oversized bold headline on white, followed by a broad dark dashboard screenshot with rounded media corners.
Feature split Feature label, bold heading, and muted supporting copy sit beside a large product screenshot or illustration; dark and pale bands alternate.
Inline feature link Prominent lime or muted-slate text link, set directly in the content flow rather than as a filled button.
Integration cloud Centered integrations heading with a scattered, multi-column field of recognizable service marks.
Publisher proof band Dark full-width section combining a large revenue metric with grouped publisher, creator, and business examples.
Imagery · Lead with large screenshots of Ghost’s publishing dashboard and editor, framed as rounded product surfaces. Feature sections mix interface previews with editorial website mockups and small illustrative UI scenes. Integration marks and publisher imagery provide concentrated color near the lower page. Keep mockups crisp and legible; the surrounding backgrounds remain plain so the imagery’s varied colors read as product evidence, not as a competing palette.
页面版块 共 18 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 Preserve wide white breathing room around the hero. Use dark bands to showcase product media and proof points. Alternate feature copy and product imagery for long-form pacing. Keep headings bold, direct, and set in Inter-style sans serif. Use lime and saffron sparingly for actionable emphasis. Treat interface mockups as the main visual evidence. ✕ 不该做 Don’t fill the page with gradients or decorative textures. Don’t use pink as a general section background. Don’t crowd feature copy against product screenshots. Don’t make every CTA a bright filled button. Don’t let illustration colors redefine the core palette. Don’t replace the broad section rhythm with dense cards. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new Ghost-style SaaS page with a calm editorial rhythm. Use Gallery White (#ffffff) as the main canvas, alternating with Ghost Charcoal (#15171a), Midnight Navy (#0f172a), and Mist Blue (#e2e8f0) section bands. Set all typography in Inter or a close equivalent: bold, oversized headlines; compact muted body copy; small uppercase eyebrow labels. Center the opening statement, then alternate left-aligned feature copy with large, rounded product screenshots or editorial previews. Use Fresh Lime (#bef264) or Electric Lime (#d1ff19) for selected links, and Launch Saffron (#fec137) only for a small announcement accent. Keep borders and shadows subtle, spacing generous, and imagery crisp. Prioritize proof through real-looking product UI, integrations, and customer examples.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "Ghost design system"
variant: extended
source: https://ghost.org/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/ghost-org)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# Ghost · Design System
> Calm editorial space meets bold product storytelling.
**Theme:** light · **Industry:** saas · **Source:** https://ghost.org/ · **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._
Ghost pairs a bright, spacious editorial canvas with deep dark product bands and vivid interface imagery. Oversized Inter headlines, restrained accents, and alternating feature layouts frame the platform as a focused publishing tool.
## North star
Keep the surrounding page quiet and spacious so bold publishing headlines and real product imagery carry the story.
## Overview
The visual system is built on a white canvas, punctuated by large near-black and navy bands that carry product imagery, metrics, and publisher examples. Pale blue-gray sections create gentle transitions between feature stories, while lime and yellow appear selectively on links, buttons, and launch messaging. Pink is a localized accent in a membership illustration, not a dominant brand field. InterVariable drives the page: headlines are bold and oversized, body copy is compact and direct, and small uppercase eyebrow labels introduce feature groups. Layout alternates between centered hero statements and left-aligned feature copy beside broad interface screenshots or illustrations. Wide margins and generous section breaks keep the long page legible. Product UI, editorial site previews, integration marks, and publisher imagery supply the color and detail; the surrounding interface stays restrained. Cards and media use rounded corners, with subtle shadows and fine borders rather than heavy effects.
## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | ` | `--color-gallery-white` | surface | Main canvas and clean feature backgrounds; gives editorial copy and product previews breathing room. |
| Mist Blue | ` | `--color-mist-blue` | surface | Pale blue-gray bands behind creator-tool and rich-media feature sections; also used for hairline borders. |
| Slate Copy | ` | `--color-slate-copy` | neutral | Muted supporting text on light backgrounds, including explanatory feature copy. |
| Cloud Copy | ` | `--color-cloud-copy` | neutral | Lighter secondary text, especially on dark surfaces and low-emphasis supporting details. |
| Ghost Charcoal | ` | `--color-ghost-charcoal` | brand | Core dark surface for product showcase and publisher proof bands; also the primary CTA background. |
| Midnight Navy | ` | `--color-midnight-navy` | surface | Deep navy feature bands behind site-design and audience-growth content. |
| Fresh Lime | ` | `--color-fresh-lime` | accent | Text and button accent on dark areas, including the Learn more treatment. |
| Moss Button | ` | `--color-moss-button` | semantic | Dark green button fill paired with lime text for secondary Learn more CTAs. |
| True Ink | ` | `--color-true-ink` | neutral | Primary heading and navigation text on light areas; also text on the yellow launch pill. |
| Electric Lime | ` | `--color-electric-lime` | accent | Bright link accent used for the Explore Ghost themes call to action. |
| Graphite Line | ` | `--color-graphite-line` | neutral | Occasional dark section edge or divider detail; not a major canvas color. |
| Launch Saffron | ` | `--color-launch-saffron` | accent | Rounded Ghost 6.0 announcement pill in the hero. |
| Haze Slate | ` | `--color-haze-slate` | neutral | Low-emphasis text details and supporting interface copy. |
| Muted Link | ` | `--color-muted-link` | semantic | Muted trial link and subdued link or heading text on pale backgrounds. |
| Member Pink | ` | `--color-member-pink` | accent | Pink surface inside the membership subscribe illustration; illustration-specific, not a page-wide background. |
| Soft Gray | ` | `--color-soft-gray` | neutral | Tertiary muted text used for small supporting interface details. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Mist Blue) · `--color-surface-2` → ` (Ghost Charcoal) · `--color-surface-3` → ` (Midnight Navy) · `--color-surface-4` → ` (Member Pink) · `--color-text` → ` (True Ink) · `--color-text-muted` → ` (Slate Copy) · `--color-text-subtle` → ` (Cloud Copy) · `--color-border` → ` (Mist Blue) · `--color-accent` → ` (Fresh Lime) · `--color-accent-2` → ` (Launch Saffron) · `--color-accent-3` → ` (Member Pink)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 21:1 | AAA |
| ` | ` | 17.03:1 | AAA |
| ` | ` | 1.17:1 | fail |
| ` | ` | 1.18:1 | fail |
| ` | ` | 10.35:1 | AAA |
| ` | ` | 8.4:1 | AAA |
| ` | ` | 1.73:1 | fail |
| ` | ` | 1.72:1 | fail |
| ` | ` | 1.48:1 | fail |
| ` | ` | 1.2:1 | fail |
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| InterVariable | `--font-body` | webfont | 400, 700, 600, 500 | All page typography: display headlines, body copy, navigation, labels, links, and buttons. | Inter |
- **InterVariable:** Use a clean sans-serif voice; bold headlines dominate, while small uppercase eyebrows use strong weight and expanded tracking.
### Type scale — Augmented Fourth (ratio ≈ 1.398, base 18px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 700 | 1 | -0.025em | — | InterVariable | Largest campaign headline treatment for high-impact page statements. |
| h1 | 72px | 700 | 1 | 0 | — | InterVariable | Hero headline and primary page-level statements. |
| h2 | 48px | 700 | 1.35 | -0.025em | — | InterVariable | Major feature and section headings. |
| h3 | 36px | 700 | 1 | -0.025em | — | InterVariable | Feature titles and supporting subsection headings. |
| h4 | 24px | 400 | 1.5 | 0 | — | InterVariable | Smaller editorial headings and explanatory copy introductions. |
| body | 18px | 600 | 1 | 0 | — | InterVariable | Prominent body statements and emphasized lead copy. |
| caption | 12px | 700 | 1 | 0.1em | uppercase | InterVariable | Compact uppercase labels and metadata. |
| button | 15px | 600 | 1.5 | 0 | — | InterVariable | CTA labels, including the dark primary action. |
| nav | 15px | 500 | 1.5 | 0 | — | InterVariable | Header navigation items and utility links. |
| link | 36px | 600 | 1.5 | -0.025em | — | InterVariable | Large editorial CTA links and prominent text links. |
| eyebrow | 12px | 700 | 1 | 0.1em | uppercase | InterVariable | Small uppercase feature-category labels. |
OpenType features in use: `"calt", "cv10", "cv11", "liga", "ss01", "ss03"` .
## Spacing & layout
- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 12, 16, 20, 24, 32, 36, 40, 48, 54, 72, 80 px.
- Section rhythm 80px · element gap 48px · card padding — · max content width 1392px.
Use a wide centered content frame, measured at a 1392px maximum width, with generous outer whitespace and spacious section breaks. The hero is centered and typographically dominant; most feature sections shift to left-aligned copy paired with large product media. Alternate light, pale blue-gray, and dark bands to give a long page clear pacing. Use broad single-column bands and occasional multi-column logo or publisher grids rather than dense dashboard-like page layouts.
## Shape & elevation
- Radius: button `8px` · card `16px` · media `8px` · link `24px` · xs `6px` · sm `8px` · md `16px` · lg `24px` · pill `9999px`
- Shadow `sm` (link, button, section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.03) 0px 2px 6px 0px`
- Shadow `md` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- 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.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Shadow `lg` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Shadow `xl` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.
The page is mostly flat, using strong background bands rather than layered cards to establish hierarchy. Media and cards have rounded corners, with fine pale borders and restrained low shadows. Reserve stronger separation for product previews; avoid floating elements or dramatic elevation effects that would undermine the editorial calm.
## Imagery
Lead with large screenshots of Ghost’s publishing dashboard and editor, framed as rounded product surfaces. Feature sections mix interface previews with editorial website mockups and small illustrative UI scenes. Integration marks and publisher imagery provide concentrated color near the lower page. Keep mockups crisp and legible; the surrounding backgrounds remain plain so the imagery’s varied colors read as product evidence, not as a competing palette.
## Components
### Top navigation
Compact horizontal header on white with Ghost mark, understated links, sign-in text, and a dark rounded Get Started button.
### Announcement pill
Small centered saffron pill above the hero headline, with dark text and a fully rounded shape.
### Hero statement
Centered oversized bold headline on white, followed by a broad dark dashboard screenshot with rounded media corners.
### Feature split
Feature label, bold heading, and muted supporting copy sit beside a large product screenshot or illustration; dark and pale bands alternate.
### Inline feature link
Prominent lime or muted-slate text link, set directly in the content flow rather than as a filled button.
### Integration cloud
Centered integrations heading with a scattered, multi-column field of recognizable service marks.
### Publisher proof band
Dark full-width section combining a large revenue metric with grouped publisher, creator, and business examples.
### Measured component styles
- **Primary button** (“Learn more →”): background ## Do
- Preserve wide white breathing room around the hero.
- Use dark bands to showcase product media and proof points.
- Alternate feature copy and product imagery for long-form pacing.
- Keep headings bold, direct, and set in Inter-style sans serif.
- Use lime and saffron sparingly for actionable emphasis.
- Treat interface mockups as the main visual evidence.
## Don't
- Don’t fill the page with gradients or decorative textures.
- Don’t use pink as a general section background.
- Don’t crowd feature copy against product screenshots.
- Don’t make every CTA a bright filled button.
- Don’t let illustration colors redefine the core palette.
- Don’t replace the broad section rhythm with dense cards.
## Agent prompt
Build a new Ghost-style SaaS page with a calm editorial rhythm. Use Gallery White (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered announcement pill and headline on white, above the lead product media. | Launch announcement link | White canvas, Saffron pill, Oversized bold headline |
| 2 | product-showcase | A broad dark media band presents a large dashboard screenshot. | Visual product proof | Charcoal band, Rounded dashboard preview |
| 3 | cta | Left-aligned editorial statement and a large inline trial link on white. | Trial link | Bold lead copy, Muted-slate link |
| 4 | feature-split | Left-aligned feature copy beside a large website-design interface preview on navy. | Explore themes link | Navy band, Uppercase eyebrow, Lime link, Product mockup |
| 5 | gallery | A dense tiled gallery of varied publication and website previews on the same navy field. | Browse visual examples | Multi-tile media grid, Mixed preview imagery |
| 6 | feature-split | Pale blue-gray band with an uppercase label, heading, and descriptive copy. | Feature explanation | Mist-blue surface, Editorial text block |
| 7 | product-showcase | Large centered editor preview sits on a white product-media stage. | Inspect editor experience | White stage, Rounded editor screenshot |
| 8 | feature-split | Pale blue-gray feature row pairing media illustration and explanatory copy. | Feature education | Mist-blue background, Illustrated media cards |
| 9 | feature-split | Alternating feature row with copy on one side and newsletter illustration on the other. | Newsletter delivery | Mist-blue background, Email preview illustration |
| 10 | feature-split | Dark navy band, with a pink membership illustration beside feature copy. | Membership signup concept | Navy background, Pink illustration card, Uppercase eyebrow |
| 11 | product-showcase | White section with a heading and a broad membership-management interface image. | Member overview | White canvas, Large rounded table preview |
| 12 | feature-split | White feature row combining analytics illustration and explanatory text. | Understand engagement | Analytics chart visual, Minimal white space |
| 13 | feature-split | White feature row with copy and stacked discount-card illustration. | Promotional offers | Discount card illustration, White canvas |
| 14 | integrations | Centered heading and supporting copy among a broad multi-column spread of app marks. | Explore integrations | Logo cloud, Centered copy, Multi-column arrangement |
| 15 | stats | Centered metric and explanatory caption on a dark band. | Social proof metric | Charcoal background, Large white figure |
| 16 | testimonials | Dark publisher group with introductory copy and a horizontal set of publication examples. | Customer proof, Learn more CTA | Dark band, Four-column examples, Subtle separators |
| 17 | testimonials | Dark creator group with a short statement and a row of creator examples. | Customer proof, Learn more CTA | Dark band, Four-column examples |
| 18 | testimonials | Dark business group with brief copy and a row of company examples. | Customer proof, Learn more CTA | Dark band, Four-column examples |
## Source CSS custom properties (selected)
```css
--color-base: 
