Ghost design system

What font does Ghost use?

Ghost’s website uses Inter for headings and Gelasio for body text. Inter is free on Google Fonts; Gelasio is free on Google Fonts.

Ghost colour palette

Ghost’s home page is light (#FFFFFF background, #15171A text) and uses #1A2E05 for its main actions. Its palette: #FFFFFF, #15171A, #0F172A, #E2E8F0, #101214, #191E2F.

• #FFFFFF
  61.7% · backgrounds
• #15171A
  12.3% · backgrounds
• #0F172A
  7.1% · backgrounds
• #E2E8F0
  5.9% · backgrounds
• #101214
  4.8% · backgrounds
• #191E2F
  1.5% · backgrounds
• #F8A8DE
  1.4% · backgrounds
• #F8B1E2
  1.2% · backgrounds
• #000000
  0.9% · text
• #334155
  0.7% · text

Type scale

Each size the page sets text in, with its weight and line height. Ghost’s largest type is 96px at weight 700.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 64px.

Corner radii: 2px, 2.5px, 3px, 4px, 6px, 7px, 8px, pill. 11 shadow levels measured.

What makes Ghost look like Ghost

Almost entirely neutral: 97% of the page is painted in #FFFFFF and #15171A.

#F8A8DE is an accent: 1.4% of the page, as small fills such as buttons and badges. Keep it to small areas.

#F8B1E2 is an accent: 1.2% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (96px InterVariable) is bold (700), tracked to -0.025em.

Ghost DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Ghost’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Ghost’s product, so use your own name, words and images.

Download Ghost DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Ghost’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Gelasio:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #E3E6E8; /* Surface */
  --color-text: #15171A; /* Text */
  --color-text-muted: #64748B; /* Text muted */
  --color-border: #E3E6E8; /* Border */
  --color-action: #1A2E05; /* Action */
  --color-on-action: #BEF264; /* On action */
  --color-link: #64748B; /* Link */
  --color-positive: #5DCF1F; /* Positive */
  --color-negative: #FF0000; /* Negative */
  --color-warning: #FEC137; /* Warning */
  --color-0f172a: #0F172A; /* 7.1% of the page, as fills */
  --color-e2e8f0: #E2E8F0; /* 5.9% of the page, as fills */
  --color-101214: #101214; /* 4.8% of the page, as fills */
  --color-191e2f: #191E2F; /* 1.5% of the page, as fills */
  --color-f8a8de: #F8A8DE; /* 1.4% of the page, as fills */
  --color-f8b1e2: #F8B1E2; /* 1.2% of the page, as fills */
  --color-151719: #151719; /* 0.3% of the page, as fills */
  --font-body: "Gelasio", sans-serif; /* Gelasio */
  --font-display: "InterVariable", "Inter", sans-serif; /* InterVariable on the site; Inter renders */
  --font-interface: "Inter", sans-serif; /* Inter */
  --type-display-1: 96px; /* Display 1, weight 700 */
  --type-display-1-leading: 96px;
  --type-display-1-tracking: -0.025em;
  --type-display-2: 72px; /* Display 2, weight 700 */
  --type-display-2-leading: 72px;
  --type-display-3: 48px; /* Display 3, weight 700 */
  --type-display-3-leading: 64.8px;
  --type-display-3-tracking: -0.025em;
  --type-display-4: 46.25px; /* Display 4, weight 700 */
  --type-display-4-leading: normal;
  --type-display-4-tracking: -0.035em;
  --type-display-5: 36px; /* Display 5, weight 700 */
  --type-display-5-leading: 36px;
  --type-display-5-tracking: -0.025em;
  --type-headline-1: 32px; /* Headline 1, weight 700 */
  --type-headline-1-leading: normal;
  --type-headline-1-tracking: -0.031em;
  --type-headline-2: 30.38px; /* Headline 2, weight 600 */
  --type-headline-2-leading: 30.375px;
  --type-headline-2-tracking: 0.002em;
  --type-headline-3: 27px; /* Headline 3, weight 700 */
  --type-headline-3-leading: 27px;
  --type-headline-3-tracking: -0.015em;
  --type-headline-4: 24px; /* Headline 4, weight 400 */
  --type-headline-4-leading: 36px;
  --type-title-large: 20px; /* Title Large, weight 600 */
  --type-title-large-leading: 30px;
  --type-title-medium: 19px; /* Title Medium, weight 400 */
  --type-title-medium-leading: normal;
  --type-title-small: 18px; /* Title Small, weight 600 */
  --type-title-small-leading: 18px;
  --type-body-1: 17.88px; /* Body 1, weight 700 */
  --type-body-1-leading: 17.875px;
  --type-body-1-tracking: -0.011em;
  --type-body-2: 16.5px; /* Body 2, weight 700 */
  --type-body-2-leading: 16.5px;
  --type-body-3: 16px; /* Body 3, weight 400 */
  --type-body-3-leading: 16px;

How this was measured

PikSpec’s scanner read the ghost.org home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Ghost is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Ghost.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.