What is Ghost's primary brand color?

Ghost runs an electric chartreuse lime (`--color-lime`) as the page's single chromatic brand moment — but the lime is scoped tightly to the eyebrow tier (the 12px uppercase tracked H2 labels that sit above each section heading). Across the captured page the lime appears 8 times, 7 as text and 1 as background. The primary CTA pill, by contrast, fills with the dark base near-black rather than with the brand lime, inverting the convention used by Substack (orange CTA) and Beehiiv (purple-and-yellow CTA). The remaining brand-layer hexes — a yellow, a pink, a sky blue, a deep blue, a red — appear only inside customer-site thumbnails in the dark olive band, not in the page chrome itself.

What typeface does Ghost use, and what should I use as a substitute?

Ghost runs two Inter cuts. InterDisplay handles every display surface — the 96px hero h1 at weight 700 with -2.4px tracking, the 48px section heading at weight 700, the 36px sub-display, the 24px body lede, and the 12px uppercase tracked eyebrow H2. InterVariable handles every running text surface — the 15px nav links, the 15px secondary body text, the 14px footnote text. Both faces are free and open-source under the SIL Open Font License, so they transfer cleanly to a self-hosted React project. Georgia is declared as the serif fallback (`--serif: Georgia, serif`) but never appears in the captured render — it sits in the CSS in case the editor theme calls for a serif body. The system mono stack (Menlo, ui-monospace) is similarly reserved.

Why is Ghost's hero headline not pure black?

The hero h1 renders in `#112220` — a deep teal-ink that reads as charcoal against the warm white canvas. The choice is deliberate: pure black at 96px display weight would feel industrial against the warm cream undertone of the page surface, while the teal-ink carries a faint chromatic warmth that ties back to the dark olive `#1a2e05` band lower on the page. The dark base near-black `#15171a` (the `--color-base` token wired into CSS) handles the dashboard band background and the primary button, but never the display headline — that role belongs to the slightly softer teal-ink. Below the hero, the slate-700 `#334155` Tailwind tone carries body running text.

Why does Ghost flip between light and dark bands instead of a single canvas?

The page is structured as a stack of editorial spreads rather than as a continuous scroll. The hero is warm-white; the next band is the dark base near-black holding a product-dashboard screenshot; the next is white again with a 48px section headline; the next is the dark olive `#1a2e05` band with a 3-column grid of customer-site thumbnails; the final band returns to white with the email-newsletter section. The light-dark flip lets each band carry its own visual weight — the dashboard chart needs the dark surface to make its lavender data line read, the customer-site thumbnails need the dark olive to mute their varied source colors into a uniform grid, and the white bands carry the editorial typography on its own. There are no atmospheric gradients between bands; each terminates on a flush horizontal edge.

Can I use this DESIGN.md to build my own React publishing site?

Yes — feed it to Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Ghost's specific moves: warm-white canvas alternating with near-black dashboard bands and a dark olive customer-site band, electric chartreuse lime scoped to the 12px uppercase eyebrow tier rather than to CTAs, a near-black primary button at 6px radius and 39px height, and a 96px InterDisplay hero in deep teal-ink. You can also reference the tokens directly — every hex, font family, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing carefully: the lime eyebrow voltage only reads as confident restraint when the rest of the chrome stays monochrome; adding a second chromatic accent would push the page into a generic-SaaS register.

Ghost Design System

Ghost's marketing site as a DESIGN.md file.

About Ghost DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source ghost.org

News & Publishing
Productivity & SaaS

Ghost's marketing site does something almost no publishing platform attempts: it reaches for an electric chartreuse — not a calm slate or a magazine red — as the only chromatic note above the fold, then keeps that lime entirely off the CTA. The hero h1 ("Turn your audience into a business.") sits at 96px InterDisplay weight 700 with tight -2.4px tracking, rendered in a near-black teal ink that reads as charcoal against the warm white canvas. Above the headline floats a 12px uppercase tracked eyebrow in the lime, and a 24px InterDisplay lede sits below in a soft slate. The primary "Get Started — free" pill is the dark base color filled with white text, sized at a deliberate 39px tall with 6px corner-radius. Where Substack reaches for its orange CTA and Beehiiv pairs purple with neon yellow, Ghost holds the voltage in the eyebrow tier and lets the typography carry the entire hero.

The page is built as an alternating editorial band rhythm. The white hero hands off to a near-black product-dashboard band showing a chart-heavy analytics view, then returns to a white "Complete control" headline section, then drops to a dark olive band with a grid of customer site thumbnails, then closes on a white "Publish by web and email newsletters" section. Each band terminates with a flush horizontal edge — no dividers, no gradients, no atmospheric transitions — so the eye reads the page as a stack of magazine spreads rather than as a SaaS scroll. The dashboard band uses Tailwind slate borders at #e5e7eb (462 captured occurrences) to outline every analytics card; the dark olive band uses an even deeper near-black olive #1a2e05 as its surface tone.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens drawn from the eight Tailwind slate greys that hold the dashboard chrome together, the warm-white canvas, the dark base near-black, the electric lime voltage, and the deep olive band surface; 11 typography tokens spanning InterDisplay from 96px display down to 12px uppercase eyebrow, plus InterVariable at 14-15px for nav and body and a Georgia serif fallback; six radii topped by 24px and a 9999px pill; and 14 component definitions covering the dark pill primary button, the lime eyebrow H2, the dashboard analytics card, the dark olive customer-site tile, and the dark surface band. Feed it to Claude or Cursor and the agent reproduces Ghost's specific moves: warm-white canvas alternating with near-black bands, electric lime held in reserve for the eyebrow tier only, near-black primary button rather than a lime CTA, and a 96px InterDisplay h1 in deep teal-ink rather than pure black.

What makes it distinct

Lime eyebrow as voltageelectric chartreuse appears 8 times across the page, all on 12px uppercase tracked H2 labels above section headers, never on a CTA
96px InterDisplay heroweight 700 with -2.4px tracking on the headline, rendered in a near-black teal ink rather than pure black
Near-black primary buttonthe CTA fills with the dark base tone rather than the brand lime, inverting the publishing-tools convention where Substack and Beehiiv reach for color
Two Inter cutsInterDisplay carries headings and the 24px lede, InterVariable carries 15px nav and body, with Georgia held in reserve as the serif fallback
Alternating light-dark editorial bandsthe page rhythm flips between warm white and the dark base across five distinct horizontal sections

Live at ghost.org

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ghost.org

Explore Ghost

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Ghost design system FAQ

Common questions about Ghost's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Ghost — official site

Ghost's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.