Ghost Design System

Overview

Ghost's marketing site argues that an open-source publishing platform can stake a typographic claim without reaching for a chromatic CTA. Lime as eyebrow. The single brand voltage — an electric chartreuse — appears 8 times across the captured page, all of them confined to the 12px uppercase tracked H2 labels that sit above each section heading. The primary "Get Started — free" button fills with the dark base near-black {colors.ink-base} (#15171a), not with the lime; the CTA inverts the convention that Substack uses for its orange call-to-action and that Beehiiv uses for its purple-and-yellow stack. Where the typical newsletter-platform hero shouts in a saturated brand fill, Ghost holds the chrome monochrome and lets the chartreuse signal "section change" rather than "click here."

The page is built as an alternating band rhythm rather than as a single continuous scroll. The warm-white hero hands off to a near-black dashboard band carrying a product analytics screenshot (lavender data line, slate hairlines, the same dark base tone as the primary button). The next band returns to white with a 48px InterDisplay section heading. The fourth band drops to a deep olive surface {colors.surface-olive} (#1a2e05) holding a 3-column grid of customer-site thumbnails; the olive mutes the varied source colors of each thumbnail into a uniform editorial grid. The final band returns to white with the email-newsletter section. Five bands, three light, two dark, each flush-edged with no atmospheric transitions. The structure is closer to a magazine spread than to a SaaS landing page.

Typography is two cuts of Inter. InterDisplay carries every display surface — the 96px hero h1 at weight 700 with tight -2.4px tracking, the 48px section heading, the 36px sub-display, and the 12px uppercase tracked eyebrow. InterVariable carries every running surface — the 15px nav links and the 14px footnote text. Georgia is declared as the serif fallback in CSS (--serif: Georgia, serif) but never renders in the captured marketing chrome; it sits in reserve for the editor theme.

Key Characteristics:

• Single chromatic voltage ({colors.primary} — --color-lime) confined entirely to the eyebrow tier — 8 total page occurrences, never on a CTA fill.
• Near-black primary button ({colors.ink-base} — #15171a, wired as --color-base) at 6px radius, 39px height, white text — the inverse of the lime-fill CTA convention.
• Hero h1 renders in {colors.ink} (#112220) — a deep teal-ink, never pure black — at 96px InterDisplay weight 700.
• Five-band editorial rhythm: warm white hero, near-black dashboard, white headline, deep olive customer grid, white newsletter band. Flush edges, no atmospheric gradients.
• Tailwind slate hairline ({colors.hairline} — #e5e7eb) is the dominant border tone — 462 of the captured border occurrences sit on this single value.
• Eight Tailwind slate greys carry the dashboard chrome (slate-100 through slate-700); the deep olive {colors.surface-olive} is the only saturated dark surface in the system.
• InterDisplay handles all headings; InterVariable handles all body and nav; Georgia and the system mono stack are reserved fallbacks that never render on the captured surface.
• The 96px hero size is unique to the headline — no second display step matches it. The next display tier drops to 48px.

Colors

Brand

• Lime ({colors.primary} — #d1ff19): frequency 8. Used as text (7), background (1). Wired in CSS as --color-lime. The single chromatic brand moment — confined to the 12px uppercase tracked eyebrow labels above each section heading. Never appears on a CTA fill or as a hover state.
• Lime Soft ({colors.primary-soft} — #bef264): frequency 3. A Tailwind lime-300 step lighter than the brand lime. Used sparingly inside customer-site thumbnails in the olive band; not part of the page chrome.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 109 — 99 as text on dark surfaces, 8 as background, 2 inside gradients. The warm-white page floor used on the hero, the white headline band, and the newsletter band.
• Ink Base ({colors.ink-base} — #15171a): frequency 7 as background. Wired as --color-base. The dark surface for the dashboard band and the primary button fill — a true near-black with a faint warm undertone.
• Surface Deep ({colors.surface-deep} — #0f172a): frequency 2 as background. A Tailwind slate-900 used inside the dashboard analytics card chrome.
• Surface Olive ({colors.surface-olive} — #1a2e05): frequency 3 as background. Wired as a brand-layer hex in the extraction. The deep olive band surface holding the customer-site thumbnail grid — chromatic enough to read as a deliberate color, dark enough to mute the varied source colors of each thumbnail.

Text

• Ink ({colors.ink} — #112220): frequency 4 as text. The hero h1 color — a deep teal-ink, never pure black. Reads as charcoal on the warm-white canvas while carrying a faint chromatic warmth that ties to the olive band lower on the page.
• Ink Soft ({colors.ink-soft} — #334155): frequency 9 — 8 as text, 1 as background. Wired as --color-darkgrey in legacy CSS, but the rendered value is Tailwind slate-700. Used for body paragraph running text under the hero.
• Ink Mute ({colors.ink-mute} — #64748b): frequency 9 as text. A Tailwind slate-500 used for secondary captions and the body text inside dashboard analytics cards.
• Ink Stone ({colors.ink-stone} — #94a3b8): frequency 93 as text. The dominant secondary-text tone — Tailwind slate-400 — carrying nav-link inactive states and the dashboard chrome metadata labels.
• Shadow ({colors.shadow} — #000000): frequency 306 — 236 as text on the dark dashboard band, 70 as shadow ink. The dominant text tone on dark surfaces; the dashboard chrome uses pure black for its primary text rather than the warm ink-base.

Hairline

• Hairline ({colors.hairline} — #e5e7eb): frequency 464 — 462 of those are borders. The dominant border tone across the entire system. Card outlines, input field outlines, dashboard cell dividers — wired as --color-whitegrey in the legacy CSS, rendered as Tailwind slate-200.
• Hairline Soft ({colors.hairline-soft} — #cbd5e1): frequency 8 as text. Tailwind slate-300; used inside dashboard cards for metadata labels rather than as a border.
• Hairline Dark ({colors.hairline-dark} — #1f2937): frequency 3 as border. Tailwind slate-800; the divider tone for cards sitting on the dark dashboard band.

Typography

Font Families

The system runs two Inter cuts. InterDisplay (--font-heading: "InterDisplay", sans-serif) handles every display surface — the hero h1, all H2 / H3 section headings, the 24px lede, and the 12px uppercase eyebrow. InterVariable (--font-sans-serif: "InterVariable", sans-serif) handles every running text surface — the 15px nav links, the 15px body, the 14px footnote text. Both faces are free and open-source under the SIL Open Font License.

Georgia is declared as a serif fallback (--serif: Georgia, serif) but never appears in the captured marketing chrome — it sits in reserve for the Ghost editor theme. The mono stack (--font-monospace: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, Liberation Mono, Courier New, monospace) is similarly reserved.

Hierarchy

Principles

Display weight is heavy and consistent. The hero h1 sits at 96px / 700 with tight -2.4px tracking — the loudest typographic moment in the system, sized to dominate the viewport at desktop. The next display step drops dramatically to 48px / 700; there is no intermediate 64-80px tier. This binary scale (96px hero, 48px section) keeps the hero as the page's single typographic event and treats every other heading as a secondary anchor.

The eyebrow tier carries every section-change signal. At 12px InterDisplay weight 700 with 1.2px tracking and text-transform: uppercase, it does the work that a heavier H2 would normally do — naming the section ("Easy site design," etc.) without competing visually with the 48px display heading that follows.

Note on Font Substitutes

Both InterDisplay and InterVariable are free under the SIL Open Font License — paste them into a self-hosted React project with no licensing concern. If a fallback is needed, the platform system-ui stack (San Francisco on macOS, Segoe UI on Windows, Roboto on Android) is the closest match for the 15px running text; Geist is the closest open-source alternative for the 96px display tier with comparable cap height.

Layout

Spacing System

• Base unit: 8px ({spacing.sm}) — the dominant gap value across the captured page.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 36px · {spacing.3xl} 48px · {spacing.4xl} 72px.
• Section padding (vertical): ~72px between major editorial bands. The dashboard and olive bands carry the most generous internal padding ({spacing.4xl} 72px top and bottom).
• Card internal padding: {spacing.base} (16px) on dashboard analytics cards, {spacing.lg} (24px) on hairline-bordered feature cards.
• Hero padding: 0 horizontal on the headline itself; the centered container holds the 809px-wide h1 at native size.

Grid & Container

• Max content width: ~1080px on the hero h1, ~1280px on the dashboard band, ~1200px on the olive customer-site grid.
• Hero: centered content stack — eyebrow chip, 96px headline, 24px lede, near-black primary pill — on a warm-white floor.
• Dashboard band: full-bleed near-black canvas holding a single dashboard screenshot at ~1200px wide with hairline-dark cell dividers and a lavender analytics line.
• Customer-site grid: 3-column grid on the olive band showing example customer publications (Lever News, 404 Media, The Browser, Platformer, Tangle).
• Newsletter band: centered split — a publishing-card mockup on the left, a section heading and 18px caption stack on the right.

Rhythm

The page reads as five distinct horizontal spreads stacked vertically. The light bands carry the editorial typography; the dark bands carry the product imagery. Each band terminates on a flush edge — there is no gradient, no fade, no atmospheric transition. The five-band structure is closer to a print magazine layout than to a typical SaaS scroll, and the flush edges are deliberate: each spread should read as a separate page rather than as a continuous flow.

Elevation

The system has essentially no shadow tier on the marketing surface. The captured page carries 70 shadow occurrences, all on #000000 ink at low opacity, and almost all of them confined to subtle elevations on the dashboard cards inside the dark band. The light bands carry zero shadow — depth comes from hairline borders alone.

• Flat (no shadow): hero, white headline band, olive customer-site grid, newsletter band — every editorial surface.
• Dashboard elevation: the analytics cards on the dark band carry a faint 1px hairline-dark {colors.hairline-dark} border, with a low-opacity shadow halo beneath. The lavender data line is the only chromatic element inside the band.
• Hairline outlines: {colors.hairline} (462 occurrences) does the entire elevation job on the light bands. Cards are outlined, not lifted.

Shapes

The radius scale runs from sharp to fully-rounded, with a strong default at 24px:

• {rounded.none} 0px — section bands and the dashboard chrome edges.
• {rounded.xs} 4px (1 occurrence) — the dashboard analytics line chart container.
• {rounded.sm} 6px (3 occurrences) — the primary button and small inline chips.
• {rounded.md} 8px (16 occurrences) — dashboard cards, input fields, secondary surfaces.
• {rounded.lg} 16px (5 occurrences) — larger feature cards.
• {rounded.xl} 24px (34 occurrences) — the dominant rounded surface, used on customer-site tiles and large content cards.
• {rounded.full} 9999px (2 occurrences) — circular avatar badges and a single pill chip.

The 24px tier carries 34 of the 61 total rounded surfaces, making it the system's default. The 6px primary button is deliberately tighter than the dominant tier — a small, deliberate shape choice that signals "click" against the otherwise soft chrome.

Components

hero-heading — The 96px InterDisplay h1 in {colors.ink} (#112220, a deep teal-ink) on the warm-white canvas. Weight 700, tracking -2.4px, line-height 96px. The loudest typographic moment in the system; the next display step drops to 48px.

eyebrow-h2 — The 12px uppercase tracked H2 label in {colors.primary} lime above each section heading. Wired as an H2 in the markup despite its small size — semantically the section name, visually a chromatic chip.

section-heading — The 48px InterDisplay display heading in {colors.ink} on white bands. Weight 700, tracking -1.2px. Used for "Complete control over your website and branding" and "Publish by web and email newsletters."

body-paragraph — The 24px InterDisplay lede in {colors.ink-soft} (slate-700). Used for the hero sub-paragraph and the lead lines beneath each section heading.

body-paragraph-muted — The 15px InterVariable secondary body text in {colors.ink-mute} (slate-500).

button-primary — The signature CTA. Near-black {colors.ink-base} (#15171a) fill, white text, {rounded.sm} 6px radius, 8x16 padding, 39px height. "Get Started — free" is the canonical instance, anchored in the hero and repeated in the top-nav right-cluster. The fill choice — near-black rather than lime — is the system's defining inversion.

top-nav — White canvas surface, ~72px height (matched to a 4xl spacing token). Holds the Ghost wordmark flush-left, the product-nav links ("Why Ghost," "Explore," "Tour," "Pricing") center, and the "Sign in" link plus near-black "Get Started" pill flush-right.

nav-link — Pure black {colors.shadow} text in {typography.nav-link} (15px InterVariable weight 500). Inactive — no hover-state pill captured.

dashboard-band — Full-bleed dark {colors.ink-base} band with 72x24 padding, no border-radius. Holds the product-analytics screenshot at ~1200px wide. The dashboard chrome itself uses pure black {colors.shadow} for primary text and slate-400 {colors.ink-stone} for metadata.

dashboard-card — Dark {colors.ink-base} fill matching the band surface, {rounded.md} 8px radius, 16px internal padding, 1px {colors.hairline-dark} border. Holds individual analytics tiles inside the dashboard band.

olive-band — Full-bleed {colors.surface-olive} (#1a2e05) band with 72x24 padding. Holds the 3-column customer-site thumbnail grid. The olive is the only saturated chromatic surface in the system.

site-tile — White {colors.canvas} fill, {rounded.lg} 16px radius, 0 padding (each customer-site thumbnail fills the tile edge-to-edge). Used in the olive customer-site grid.

text-input — White surface, ink text, 1px hairline border, {rounded.md} 8px radius, 8x16 padding, 39px height — matched to the primary button.

card-hairline — White fill, 1px {colors.hairline} border, {rounded.xl} 24px radius, 24px internal padding. The default feature card; the 24px radius is the system's dominant rounded tier.

Do's and Don'ts

Do keep the lime ({colors.primary}) scoped to the eyebrow tier. The 12px uppercase tracked H2 labels are the entire chromatic budget of the page — multiplying the lime onto a CTA fill or a hover state collapses the system's defining restraint.

Do use {colors.ink} (#112220) for the hero headline rather than pure black. The deep teal-ink carries a faint warmth that ties to the olive band lower on the page; pure black at 96px display weight reads as industrial against the warm canvas.

Do alternate light and dark bands with flush edges. The five-band rhythm is the page's structural device — adding a gradient or atmospheric transition between bands flattens the magazine-spread feel into a generic continuous scroll.

Do outline {component.card-hairline} cards with {colors.hairline} (#e5e7eb) rather than lifting them with shadow. 462 of the captured border occurrences sit on this single hairline tone; introducing shadow elevation on a hairline-card breaks the system's flat depth language.

Don't fill {component.button-primary} with the lime brand color. The inversion — near-black CTA on warm-white canvas with a lime eyebrow above — is the system's signature. Filling the CTA with the lime would push the page into the Substack / Beehiiv register that Ghost specifically refuses.

Don't scale the hero headline down below 96px on desktop. The 96px / 700 / -2.4px tracking is a deliberate choice — dropping to 72px softens the typographic force that the system relies on to carry the otherwise-monochrome hero.

Don't use the {colors.surface-olive} (#1a2e05) outside the customer-site band. The olive is scoped to a single band as a mute background for varied source-color thumbnails; placing it elsewhere reads as a second brand chromatic moment and competes with the lime.

Don't introduce a serif body face. Georgia is declared as a fallback (--serif: Georgia, serif) for the editor theme, but the marketing system runs 100% InterDisplay and InterVariable. Serif body would push the page into the Substack / Medium editorial register that Ghost's marketing site specifically avoids.

Known Gaps

• Hover and focus states: the captured marketing surface does not expose CTA hover-fills, focus rings, or active-press states. The {component.button-primary} carries only the resting state.
• Form input error states: {component.text-input} is captured at resting state only; error / validation styling lives inside the Ghost dashboard and editor.
• Dark mode: the public marketing surface alternates between light and dark bands rather than offering a separate dark-mode variant. The dashboard band already runs on the near-black {colors.ink-base} floor.
• Motion: the hero, dashboard, and olive band are static in the captured render; any scroll-triggered transitions (parallax, fade-in) live in client-side scripts not captured in the token spec.
• Product surfaces: this DESIGN.md captures the marketing site at ghost.org only. The Ghost editor and admin dashboard at ghost.io and <your-site>.ghost.io/ghost/ carry richer token systems — editor toolbar, member analytics, publishing flows — that are not represented here.
• Customer-site colors: several brand-layer hexes captured in the extraction (a warm yellow, a soft pink, a sky blue, a deep navy, a saturated red) appear only inside customer-site thumbnails on the olive band, not in the Ghost page chrome itself, and are not declared as design tokens.
• Mobile breakpoint: the captured render is desktop-only at ~1280px viewport; mobile typography scales and navigation chrome are not represented.