---
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 | `#ffffff` | `--color-gallery-white` | surface | Main canvas and clean feature backgrounds; gives editorial copy and product previews breathing room. |
| Mist Blue | `#e2e8f0` | `--color-mist-blue` | surface | Pale blue-gray bands behind creator-tool and rich-media feature sections; also used for hairline borders. |
| Slate Copy | `#334155` | `--color-slate-copy` | neutral | Muted supporting text on light backgrounds, including explanatory feature copy. |
| Cloud Copy | `#cbd5e1` | `--color-cloud-copy` | neutral | Lighter secondary text, especially on dark surfaces and low-emphasis supporting details. |
| Ghost Charcoal | `#15171a` | `--color-ghost-charcoal` | brand | Core dark surface for product showcase and publisher proof bands; also the primary CTA background. |
| Midnight Navy | `#0f172a` | `--color-midnight-navy` | surface | Deep navy feature bands behind site-design and audience-growth content. |
| Fresh Lime | `#bef264` | `--color-fresh-lime` | accent | Text and button accent on dark areas, including the Learn more treatment. |
| Moss Button | `#1a2e05` | `--color-moss-button` | semantic | Dark green button fill paired with lime text for secondary Learn more CTAs. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary heading and navigation text on light areas; also text on the yellow launch pill. |
| Electric Lime | `#d1ff19` | `--color-electric-lime` | accent | Bright link accent used for the Explore Ghost themes call to action. |
| Graphite Line | `#1f2937` | `--color-graphite-line` | neutral | Occasional dark section edge or divider detail; not a major canvas color. |
| Launch Saffron | `#fec137` | `--color-launch-saffron` | accent | Rounded Ghost 6.0 announcement pill in the hero. |
| Haze Slate | `#94a3b8` | `--color-haze-slate` | neutral | Low-emphasis text details and supporting interface copy. |
| Muted Link | `#64748b` | `--color-muted-link` | semantic | Muted trial link and subdued link or heading text on pale backgrounds. |
| Member Pink | `#f8b1e2` | `--color-member-pink` | accent | Pink surface inside the membership subscribe illustration; illustration-specific, not a page-wide background. |
| Soft Gray | `#9ca3af` | `--color-soft-gray` | neutral | Tertiary muted text used for small supporting interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e2e8f0` (Mist Blue) · `--color-surface-2` → `#15171a` (Ghost Charcoal) · `--color-surface-3` → `#0f172a` (Midnight Navy) · `--color-surface-4` → `#f8b1e2` (Member Pink) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#334155` (Slate Copy) · `--color-text-subtle` → `#cbd5e1` (Cloud Copy) · `--color-border` → `#e2e8f0` (Mist Blue) · `--color-accent` → `#bef264` (Fresh Lime) · `--color-accent-2` → `#fec137` (Launch Saffron) · `--color-accent-3` → `#f8b1e2` (Member Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e2e8f0` | 17.03:1 | AAA |
| `#000000` | `#15171a` | 1.17:1 | fail |
| `#000000` | `#0f172a` | 1.18:1 | fail |
| `#334155` | `#ffffff` | 10.35:1 | AAA |
| `#334155` | `#e2e8f0` | 8.4:1 | AAA |
| `#334155` | `#15171a` | 1.73:1 | fail |
| `#334155` | `#0f172a` | 1.72:1 | fail |
| `#cbd5e1` | `#ffffff` | 1.48:1 | fail |
| `#cbd5e1` | `#e2e8f0` | 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 #1a2e05 · text #bef264 · radius 8px · padding 8px 16px · 600 15px InterVariable
- **Secondary button** (“Just launched: Ghost 6.0 →”): background #fec137 · text #000000 · radius 9999px · padding 8px 3px · 400 15px InterVariable
- **Link** (“Try Ghost completely free for 14 days →”): transparent background · text #64748b · radius 0px · padding 0px · 600 36px InterVariable
- **Card**: background #f8b1e2 · text #000000 · radius 16px · padding 0px · 400 15px InterVariable
- **Navigation item** (“Product Explore Resources Pricing”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px InterVariable

## 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 (#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.

## 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: #15171a;
--color-blue: #3eb0ef;
--color-yellow: #ffd400;
--color-lime: #d1ff19;
--color-green: #5dcf1f;
--color-teal: #009c7e;
--color-darkgrey: #343f44;
--color-midgrey: #738a94;
--color-lightgrey: #c5d2d9;
--color-whitegrey: #e5eff5;
--color-wash: #f1f2f3;
--color-red: #f05230;
--color-pink: #ff247d;
--color-purple: #ad26b4;
--font-heading: "InterVariable", sans-serif;
--font-sans-serif: "InterVariable", sans-serif;
--font-monospace: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, Liberation Mono, Courier New, monospace;
```

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