# Ghost: brand book and build spec

A near-colourless system: white and blue-tinted greys, one Ghost Green accent, the tinted Dark Grey #15171A in place of black, a ribbon-ring orb beside a lowercase wordmark, and open Inter throughout. A plain, candid, ownership-first voice, and a strict trademark policy.

From unfairly.ai/brand-guidelines/ghost, checked 2026-10-30. Unofficial study; not affiliated with Ghost.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Ghost gets out of the way. The brand is nearly greyscale so each publisher's own brand leads; Ghost signs it with one green and the orb, and proves itself with open numbers instead of adjectives. Based on: The guide's one-line palette (light grounds, tinted greys, one green); Shade's custom --accent-color slot for each site; the pricing page's white-label promise; and the about page's live public metrics.

## Purpose

Mission: Create the best open source tools for independent journalists and writers, and have a real impact on the future of online media (paraphrase). (published; https://ghost.org/about/)

Story: Founded in April 2013 by John O'Nolan and Hannah Wolfe, Ghost is a non-profit foundation that builds a free open source core and funds it with a managed service, Ghost(Pro). Its constitution says it can never be bought or sold, it reinvests all revenue, publishes live company metrics, and has been fully remote since 2013. (observed)

| Value | What it means in the work | Source |
|---|---|---|
| Freedom | Create as much freedom in the world as possible; the core principle behind everything they do (paraphrase). | published: https://ghost.org/about/ |
| Transparency | Transparent and accountable as a public organisation; live financial data for all to see (paraphrase). | published: https://ghost.org/about/ |
| Independence | True to users rather than shareholders or investors; funded 100% by its users (paraphrase). | published: https://ghost.org/about/ |
| Sustainability | A self-sufficient open source model: revenue hires developers, better software attracts users (paraphrase). | published: https://ghost.org/about/ |

## Fixed and flexible

Never changes:
- The orb and lowercase wordmark, scaled only
- The exact mark 'Ghost'
- Light grounds and tinted greys with one Ghost Green
- Dark Grey #15171A, never pure black
- Inter

The one thing that varies: How dark the page goes: from all-white with a green accent to Dark Grey product panels. The guide sets no level.

## Positioning

- **Statement**: A powerful app for professional publishers to create, share and grow a business around their content (paraphrase of the homepage lead). (observed)
- **Category**: Open source publishing platform; 'the platform for independent publishers' (observed)
- **Audience**: Creators (YouTubers, bloggers, podcasters, musicians, artists), publishers (writers, journalists, local news, new media) and businesses doing content marketing; developers for the source code. (observed)
- **Problem**: Platforms and algorithms decide who sees your work, and membership systems typically take 10-30% of revenue (paraphrase). (observed)
- **Promise**: Own your audience, brand and revenue: website, newsletters and paid memberships in one place with 0% payment fees. (observed)
- **Differentiators**: Open source, and run by a non-profit foundation that can never be bought or sold.; 0% payment fees via the publisher's own Stripe account.; Newsletters, memberships, analytics and SEO built in, no plugins.; All company metrics public, as a live feed.
- **Alternatives**: Substack, beehiiv, WordPress, Medium and Patreon (the footer's comparison pages).; Membership systems that take 10-30% of revenue.

## Messaging

Boilerplate (observed): Ghost is an open source, independent publishing platform run by a non-profit foundation. Professional publishers, creators and businesses use it to build a website, publish, send newsletters and sell paid subscriptions, keeping their audience, data and revenue with 0% payment fees.

Taglines:
- Turn your audience into a business. (Homepage H1)
- The platform for independent publishers. (Publishers page H1)
- Escape the algorithm (Creators band on the homepage)
- Content marketing for modern business. (Business page H1)
- Launch your big idea (Closing CTA band on every ghost.org page)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Own your audience | Your audience, brand, data and revenue belong to you, not to a platform or an algorithm. | 0% payment fees: Ghost connects to the publisher's own Stripe account (Stripe ~2.9%).; 404 Media 123K members; Tangle $281K MRR; Platformer 197K members; The Lever 149K members. | our reading |
| A business, not just a newsletter | Website, newsletters, memberships and paid subscriptions in one place, built to earn recurring revenue. | $100,000,000+ revenue earned each year by publications running on Ghost, with 0% payment fees.; 404 Media 123K members; Tangle $281K MRR; Platformer 197K members; The Lever 149K members.; Last week, 10,603 brand new publications got started with Ghost. | our reading |
| Built to last | Open source, independent and funded by its users; a non-profit that can never be sold. | Non-profit foundation; constitution says it can never be bought or sold; 100% of revenue reinvested.; ARR $11,164,787; 30,504 active customers; 2.68% net churn (live public metrics).; 100,000,000+ Ghost installs to date.; 55,579 GitHub stars; 9B requests/month. | our reading |

They never claim:
- Use only numbers Ghost prints; the about-page metrics are a live feed, so date them.
- Never imply Ghost Foundation endorses, partners with or certifies a product or service.
- A modified version can't be called Ghost; say it is derived from Ghost's source code.

## Voice

Tone words: Plain, Independent, Candid, Warm.

Traits:
- Independent, but not Anti-business (our reading)
- Candid, but not Crude (our reading)
- Plain, but not Bland (our reading)
- Warm, but not Cute (our reading)

- Ghost publishes no voice guide. Tone words are our reading of ghost.org's own copy, labelled inferred.
- Short declarative lines with a full stop, even in headlines ('Turn your audience into a business.').
- Talks to the reader as 'you' and about the company as 'we'; benefits stated as ownership (your audience, your data, your revenue).
- Allows itself bluntness and humour: 'No investors. No bullshit.' (home) and 'drag & oops' (home).
- Proof by real numbers and named publications, including live public company metrics (about).
- British spelling on Ghost's own pages: 'organisation' (about), 'colours' (docs logos page).
- The trademark policy governs how anyone, Ghost included, writes the mark: exact form 'Ghost', never abbreviated, hyphenated or combined.

Rules a copy check enforces:
- Write the mark exactly 'Ghost': never GHOST, GHost, Ghost-CMS, Ghost-platform or Ghost®Platform
- First or most prominent mention carries ® (Ghost®); the logo is Ghost Logo™
- Third-party pages using the mark carry the footer notice 'Ghost is a trademark of Ghost Foundation - https://ghost.org'
- Say "[X] for Ghost", not "Ghost [X]" or "Ghost Hosting" or "Ghost Analytics" or "Ghost Toolkit"
- Say "Support for Ghost software", not "Ghost Support"
- Never: MyGhost, GhostConnector, Ghost Cloud, Managed Ghost, Hosted Ghost, Fantasma, Geist, Esprit. Say a trailing descriptor ('for Ghost') instead
- Never translate 'Ghost' as a trademark; use the English mark in non-English content
- Independent publications about Ghost carry a non-affiliation disclaimer and no logo on the cover
- Never imply Ghost Foundation endorsement, partnership or official status
- British spelling
- Sentence case headlines
- Write as "we", to "you"

Their words: independent, open source, publishers, creators, members, newsletters.
Never: GHOST, GHost, Ghost-CMS, Ghost-platform, Ghost®Platform, MyGhost, Ghost Cloud, Managed Ghost, Hosted Ghost, Ghost Hosting, Ghost Support.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| White | #FFFFFF | paper | Published. Light background, the default ground. |
| Dark Grey | #15171A | ink | Published ($darkgrey). Text, primary buttons (observed), dark panels (night). |
| Ghost Green | #30CF43 | accent | Published ($green). The one accent. Dark Grey text on it (our reading). |
| Mid Grey | #7C8B9A | ink_muted | Published ($midgrey). Secondary text; Shade --text-secondary. |
| Light Grey | #CED4D9 | hairline | Published ($lightgrey). Tinted grey for rules and light grounds. |
| Gray 100 (UI) | #F4F5F6 | surface | Shade product UI --muted. Our reading for surface; the guide names none. |
| Gray 200 (UI) | #EBEEF0 | extra | Shade product UI --border. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | InterVariable at opsz 32 | Open (SIL OFL 1.1), Rasmus Andersson; self-hosted by ghost.org | Inter | InterVariable, Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif |
| body | InterVariable | Open (SIL OFL 1.1), Rasmus Andersson; self-hosted by ghost.org | Inter | InterVariable, Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | Inter | 96px | 25.35px | 1 | -2.4px | 700 |
| Revenue figure | --text-display-l-* | Inter | 72px | 48px | 1 | 0px | 700 |
| Statement paragraph | --text-statement-* | Inter | 48px | 24px | 1.35 | -1.2px | 700 |
| Section H2 | --text-h2-* | Inter | 48px | 24px | 1.15 | -1.2px | 700 |
| Launch line | --text-launch-* | Inter | 48px | 24px | 1.15 | 0px | 600 |
| Try CTA link | --text-cta-xl-* | Inter | 36px | 20px | 1.5 | -0.9px | 600 |
| Feature H3 | --text-h3-* | Inter | 36px | 24px | 1 | -0.9px | 700 |
| Works with everything | --text-h2-center-* | Inter | 36px | 36px | 0.9 | -0.9px | 700 |
| Showcase H2 / Built to last statement | --text-h2-dark-* | Inter | 36px | 24px | 1 | 0px | 700 |
| Lead / feature body | --text-lead-* | Inter | 24px | 20px | 1.5 | 0px | 400 |
| Showcase tagline | --text-tagline-* | Inter | 24px | 18px | 1.25 | 0px | 500 |
| Lime/slate link CTA | --text-cta-l-* | Inter | 24px | 20px | 1.5 | 0px | 600 |
| Button large | --text-button-l-* | Inter | 20px | 20px | 1.5 | 0px | 600 |
| Showcase card name | --text-card-title-* | Inter | 18px | 18px | 1 | 0px | 600 |
| Eyebrow | --text-eyebrow-* | Inter | 12px | 12px | 1 | 1.2px | 700 |
| Nav / footer top link | --text-nav-* | Inter | 15px | 15px | 1.5 | 0px | 500 |
| Learn more / tag | --text-ui-* | Inter | 15px | 15px | 1.5 | 0px | 600 |
| Footer column link | --text-footer-* | Inter | 15px | 15px | 1.25 | 0px | 400 |
| Nav button / pill / legal | --text-ui-s-* | Inter | 14px | 14px | 1.5 | 0px | 600 |
| Dropdown title / description | --text-menu-* | Inter | 18px | 18px | 1.25 | 0px | 700 |

## Layout

Measured on https://docs.ghost.org/logos: Ghost's web-published guide (docs.ghost.org/logos and its raw .md), trademark policy v2.0 (14 Aug 2025), ghost.org marketing pages, and the open-source Shade design system (TryGhost/Ghost apps/shade at 866b27ea9a) for product UI tokens, fetched 2026-10-30.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 24px | 16px |
| Section padding | 72px | 31.2px |
| Container max width | 1392px | full |
| Hero text width | max 841px | full |
| Grid columns | 12 | 1 |
| Gutter | 72px | 16px |
| Card gap | 32px | 32px |
| Navigation height | 94px | 94px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Ghost's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 94px, not sticky, no border
   - Phone: 63px: logo + hamburger
   - Product and Resources open white mega-panels with ring rgba(0,0,0,0.05), radius 8px
2. Hero
   - Desktop: y 94-1403; pill y 238, H1 y 289, panel 1392x850 at y 553 radius 16px top
   - Phone: y 63-477; H1 25.35px; poster 358x219
   - Dashboard numbers at rest 13,041 / 3,207 / 9,834; increments are animation only
   - Slate strip fills the lower half behind the panel
   - Ground #FFFFFF; the bottom of the band behind the dashboard is a #E2E8F0 strip
3. Statement
   - Desktop: 621px, left-aligned, max 1152
   - Phone: 424px, 24px paragraph
   - No eyebrow, no image
   - Copy: "Ghost is a powerful app for professional publishers to create, share, and grow a business around their content. It comes with modern tools to build a website, publish content, send newsletters & offer paid subscriptions to members."
   - Line breaks at 1440 (Helvetica fallback, 48px/64.8px 700, -1.2px, max-width 1152px): 5 lines; line right edges x 1139, 1114, 1017, 1108, 714; line 1 ends 'publishers', line 3 ends 'a'
   - Phone link: 'Try Ghost completely free for 14 days' fills line 1 and the arrow '→' alone on line 2; no max-width on the link (full 358px column)
4. Easy site design
   - Desktop: 1725px
   - Phone: 1248px
   - 5-col staggered thumbnails clipped at the band bottom
   - 17 theme thumbnails (assets theme-gallery-*.webp)
   - Phone paragraphs: 20px/30px 400 #CBD5E1, each with margin-top 24px (y 1081, 1195, 1339 at 390; heights 90/120/90); the link follows 24px below the last
   - Phone theme wall: exactly 4 columns (never 5) of 81px-wide thumbnails at x 16 / 109 / 201 / 294 (about 12px gaps), heights 45-50px each, square corners, ~12px vertical gaps, column tops staggered; the wall runs down to the band's bottom edge and is clipped there by the next band (no empty navy below the last row)
   - Theme wall implementation: give the wall container a fixed height that ends exactly at the band's bottom edge with overflow hidden, and put more thumbnails in each column than fit (6+ per column), so the last row is always cut by the band edge, desktop and phone
5. Advanced creator tools
   - Desktop: 2585px, rows alternate image left/right
   - Phone: 1903px, image-first stacks
   - Feature images 549x549; text column 576 wide
   - Editor panel: Ghost editor with post "How to make music with a single analog monosynth" (DOM render on desktop; poster editor-poster-1170.webp)
   - Feature H3 36px/36px 700 -0.9px #000000, body 24px/36px #334155: "Rich media & dynamic cards." / "Modern publishing requires more than just words. Expand your story with image galleries, gifs, video, audio, products, info boxes, accordion toggles, downloadable files, bookmarks, and so much more."; "Newsletters built-in." / "Deliver posts by email newsletter to your audience, so they'll be in the loop whenever something new goes live. Segment your audience and send multiple different newsletters based on preference."
   - Feature images are flat illustrations on a faint lighter square (feature-rich-media.webp, feature-newsletters.webp, 816x816)
   - Editor panel top is 84px below the lead's last line box (lead ends y 4068, panel y 4152 at 1440); use a desktop-resolution image: editor-desktop-rest-2x.png (2784x1626, the resting first frame: title at top, cursor near 'Add feature image'), never the 1170 poster at desktop
6. Grow your audiences
   - Desktop: 944px; panel 797x800 #F8B1E2 radius 16px
   - Phone: 1082px, panel first
   - Portal at rest = purple Subscribe pill
   - Paragraphs: "Until now, building an indie publication with memberships and subscriptions has been difficult and complicated." / "Ghost makes it easy, with native signup forms that turn anonymous views into logged-in members." / "Allow people to sign up for free, or purchase a paid subscription to support your work across monthly and yearly premium tiers."
   - Closing line "Hello, new friends." 500 white
   - Panel at rest: a purple pill (colour is inside the image) "Subscribe" button with person icon centred on the pink and a cursor; it then loops through a Sign up card and a sign-in email (animation only). Use portal-poster-1078.webp / portal-subscribe-element-2x.png
7. Run your business
   - Desktop: 2562px
   - Phone: 1697px
   - Members table 2,784 MEMBERS
   - Members panel at rest (members-poster-1170.webp): table header "2,784 MEMBERS / STATUS / EMAILS OPENED / OPEN RATE"; rows Carla Stanton (Paid member – Gold tier, 11, 92%), Cooper Korsgaard (Free member, 24, 87%), Tiana Aminoff (Paid – Silver, 39), Charlie Westervelt (Paid – Bronze, 73) ... plus a Jamie Larson member card (132 received, 129 opened, 97% open rate; newsletters Weekly roundup off, Daily newsletter on, Specials on). Rows fading in one by one on desktop is animation only
   - "Native analytics." / "Understand what's working. Detailed engagement analytics for your audience so you can understand what content is getting the most attention, and who your biggest fans are."
   - "Offers & promotions." / "Entice new subscribers with offers and promotions to grow your business. Run a 30% discount for your first 100 subscribers, an 80%-off Black Friday sale, or a special promotion for a live event."
8. Integrations
   - Desktop: 574px, tiles radius 24px
   - Phone: 591px
   - Static, overflow clipped; tooltips hover-only
   - H2 "Works with everything." 36px/32.4px 700 -0.9px #000000
   - Body 24px/30px #334155: "Social, referral programs, push notifications, social sharing, payment gateways, A/B testing, desktop editors, mobile apps, comments, recommendations." + bold "Yes."
   - Link "Explore the integrations library →" 20px/30px 600 #64748B to /integrations/, underline on hover
   - Every tile is a 96x96 box (border-box), 1px #E5E5E5 border, radius 24px, the shadow above, columns at a 144px pitch (x 24, 168, 312, 456, 600, 744, 888, 1032, 1176, 1320 visible). Artwork is normalised by per-tile padding, measured 2026-10-30: padding 0 (art fills 94x94, full-bleed app icons): Discord, Twitter, Zapier, Instagram, Facebook, Feedly, Pinterest, GitHub, Netlify, Udesly, Intercom, Geckoboard, Imgur; 8px with fill #2862AE: ActiveCampaign; 12px: Spotify (70x70); 12px fill #1BB6EB: Vimeo; 8px fill #FF0000: YouTube (svg); 16px (62x62 art): Ulysses, Slack, iA Writer, Discourse, Mailchimp, HelpScout, Plausible, Cove, Tally; 20px (54x54): Google Analytics, Buffer, ChartMogul; 24px: Giphy, Unsplash; Stripe svg fills the tile. Tile background is transparent unless a fill is listed (the white comes from the page)
9. Revenue and showcase
   - Desktop: 1962px, 488px row pitch
   - Phone: snap-scroll card rows, 304x189 cards
   - 1px #1F2937 rules between rows
   - Lime-on-olive Learn more buttons
   - Businesses — "Content marketing you can measure" / "Turn clicks into contacts with native lead gen & analytics" — /business: YCombinator (Business), Kickstarter (Business), Buffer (Business), Unsplash (Culture)
   - Card images carry the publication's own logo over a photo or brand colour (showcase-*.webp, 618x384)
   - Card images: object-fit fill (the default), never cover: the whole 618x384 file shows, scaled to 324x201 (same 1.61 ratio), no crop or zoom; radius 8px
   - Phone band y 7491-9349 (about 1858px): revenue block 7491-7729 (238), Publishers row 7769-8237 (468), Creators row 8277-8768 (491), Businesses row 8807-9329 (522), measured top-level boxes at 390 on 2026-10-30
10. Built to last
   - Desktop: 1169px; screenshot 1392x772 radius 16px
   - Phone: screenshot 358x200
   - #151719 108px strip behind the screenshot bottom
   - Screenshot: Ghost Admin Posts list (built-to-last-posts.png, 1440x796) with the green New post button
   - Statement markup: one paragraph, bold black sentence 'A product you can depend on.' then a <br>, so the grey sentence always starts on a new line; container max-width 600px desktop / 400px phone; desktop 36px/45px: line 1 is the bold sentence alone (600 wide), the grey sentence follows on 3 lines
   - Screenshot frame: 1px solid #2C2E30 border (observed by pixel, 2026-10-30) with radius 16px, visible along the bottom edge where the panel overlaps the #151719 strip; the panel fill near the edge is #101216
   - Phone band y 9349-9830 (481px) at 390, measured 2026-10-30
11. Launch CTA
   - Desktop: 607px centred
   - Phone: 24px type, same button
   - Runs into the footer with no rule
   - Line "Last week, 10,603 brand new publications got started with Ghost." 48px/55.2px 600 #9CA3AF with "10,603" 700 #FFFFFF; 10,603 is the printed resting value
   - Kicker "Today, it's your turn." 48px/55.2px 700 #FFFFFF
   - Button "Start publishing now →" fill #D1FF19, text #000000 20px/30px 600, radius 8px, padding 16px 24px, href https://account.ghost.org/signup/
   - Phone band y 9830-10245 (415px) at 390, measured 2026-10-30; button 65px below the kicker's line box (the earlier '40px margin top' is the CSS margin; the visible gap is 65px)
12. Footer
   - Desktop: 609px
   - Phone: top links + badges only
   - Ghost Foundation © 2026

## Page anatomy

How Ghost's own landing pages are built, part by part (observed; https://ghost.org/, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: No announcement bar. The announcement is a yellow pill centred above the H1 inside the hero
- text: Just launched: Ghost 6.0 →
- href: /6/
- style: fill #FEC137, text #000000 14px/21px 600, fully rounded (9999px), 230x39 desktop and phone, padding 8px 3px outer with the label padded inside; no hover colour change (transition 0.3s cubic-bezier(0.4,0,0.2,1))
- desktop: x 605 y 238 (144px below the nav bottom), centred
- phone: x 80 y 126, centred

**Navigation**
- summary: White bar, not sticky: logo left, four menu items left-aligned after it, Sign in text link and a dark Get Started — free button right. Two items (Product, Resources) open click/hover mega-panels
- ground: #FFFFFF (var --header-bg #fff); position relative, scrolls away with the page (no sticky state)
- height: 94px desktop; 63px phone
- border: none (no bottom hairline)
- logo: variant dark lockup: black orb + lowercase ghost wordmark (logo-black-1.webp); px 109x40; position desktop x 24 y 27; phone x 16 y 12; file https://ghost.org/images/logos/logo-black-1.webp
- links: count 4; labels Product (chevron), Explore, Resources (chevron), Pricing; hrefs Product: menu; Explore: https://explore.ghost.org; Resources: menu; Pricing: /pricing/; size 15px/22.5px; weight 500; color rgba(0,0,0,0.7) at rest, rgba(0,0,0,0.9) on hover (base #000000); alignment left group after the logo: x 173 (Product + 16px chevron, 76 wide), 289 Explore, 379 Resources (+chevron, 96 wide), 515 Pricing; ~40px between items; chevron small chevron-down after Product and Resources, same colour as the label
- actions:
  - Sign in: text link 15px/500 rgba(0,0,0,0.7), hover 0.9, x 1187, href https://account.ghost.org/signin/
  - Get Started — free: button #15171A, text #FFFFFF 14px/21px: "Get Started" 600 + " — free" 400, radius 6px, padding 8px 16px, 155x39 at x 1261 y 28, shadow 0 0 1px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.03); no hover change; href https://account.ghost.org/signup/
- dropdowns: Product panel x 51 y 90, 320 wide, white, padding 32px, radius 8px, ring 0 0 0 1px rgba(0,0,0,0.05), no drop shadow. One column of four items, 105px pitch; each: 20px slate #64748B line icon, title 18px/700 #000000, description 14px/400 rgba(0,0,0,0.7). Items: For Creators — "YouTubers, bloggers, podcasters, musicians & artists" (/creators/); For Publishers — "Writers, journalists, local news and new media outlets" (/publishers/); For Business — "Modern brands & companies with ambitious content marketing" (/business/); For Developers — "Source code, documentation, guides and tutorials" (https://docs.ghost.org/); Resources panel x 91 y 90, 672x440, same style, two columns (x 107 and 425, 322 wide), rows 101px pitch, in reading order: Marketplace — "Professional themes, custom integrations and qualified experts" (/marketplace/); Start here + NEW badge (10px/600 white on a pink pill; fill not measured, use #FF0095) — "A huge library of guides, stories, interviews and tips for success" (/resources/); Themes — "Hundreds of beautifully designed publication templates" (/themes/); Help center — "Get help with product features and answers to common questions." (/help/); Integrations — "Connect thousands of apps and services with your website" (/integrations/); Product updates — "All the latest changes and improvements to Ghost" (/changelog/); Experts — "Get help building your site from certified Ghost developers" (/experts/); About us — "Learn more about the people behind the platform (We're hiring!)" (/about/)
- sticky: no: position relative, no scrolled state
- phone: shows logo left (109x40 at x 16), 36x36 hamburger button right (x 346 y 14); no CTA in the bar; menu full-screen white sheet; top row logo + 36px close X on a light grey square (radius ~6px); then four rows For Creators / For Publishers / For Business / For Developers with green line icons (by eye; colour not measured) and phone-only descriptions: "Join thousands of creators using Ghost to share their work", "The platform for independent publishers", "Content marketing for modern business", "Source code, documentation, guides and tutorials" (titles 18px/700 #000000, descriptions 14px/400 rgba(0,0,0,0.7), ~80-100px pitch); a hairline; a 2-column link grid 15px/500 #000000 (x 16 and 211, 38px pitch): Explore, Pricing / Marketplace, Themes / Integrations, Resources / Help center, Product updates / Developers, About us; a hairline; full-width Get Started — free button (#15171A, radius 6px, ~342x39, inset 24px); centred "Existing customer? Sign in" 15px/500 rgba(0,0,0,0.7) with Sign in linked; cta Not in the bar on phone; only inside the open menu
- rendered face: Same as the hero: nav, buttons and pills render in the system sans-serif fallback (Helvetica) in the reference capture, not InterVariable.

**Hero**
- summary: White ground. Centred yellow launch pill, then a two-line centred 96px H1 in green-black #112220, then a full-width dark Ghost Admin dashboard panel with rounded top corners that sits half on white and half on a slate-200 strip and runs straight into the next band. No lead paragraph, no buttons in the hero
- desktop: single centred column; pill y 238-277; H1 box x 300-1141 (841 wide) y 289-481, lines "Turn your audience" / "into a business." at 96px line 96px; media wrapper margin-top 8vmin (72px): dark panel x 24 y 553, 1392x850, background #15171A, radius 16px 16px 0 0, overflow hidden, z above a #E2E8F0 strip that fills the lower half of the wrapper (y 978-1403, full bleed 1440); the panel bottom is flush with the strip bottom at y 1403 where the white statement band begins
- phone: pill y 126 (230x39 centred); H1 25.35px (6.5vw) line 25.35px tracking -0.634px, centred, two lines y 176-229, box 222 wide; dashboard poster 358x219 at x 16 y 258, radius 8px top; #E2E8F0 strip y 367-477 behind its lower half
- at rest: Static state = the desktop element image listed in media: dashboard with 13,041 / 3,207 / 9,834 and the "New paid member signup / Just now" toast visible top right; the pill and H1 are static
- media: what Ghost Admin dashboard (dark). Desktop: a live DOM render in an iframe (/renders/dashboard.<hash>.html, aspect 1688/1031, pointer-events none) that animates counters and a toast. Phone (<640px): a static poster image in <picture>. No video, no canvas; image desktop https://ghost.org/ (DOM-built dashboard iframe; no media file at desktop); image desktop note Element screenshot of the DOM-built iframe at rest (no media file at desktop); image phone https://ghost.org/renders/posters/dashboard-1170.2a834c7d0bab2afeac8cc059efa36f9c2d62fef454fa98c2665e0bdf830e3876.webp; image phone note The site's own poster file (1170x714). Its chart is the "Total members" variant with tooltip 13,041; desktop shows "Paid members" with tooltip 3,719. Use the desktop element image at 1440, the poster at 390; resting values Total members 13,041 (+4%), Paid members 3,207 (+1%), Free members 9,834 (+8%); sidebar Members badge 13,041; chart tooltip 9 Apr, 2022 / 3,719 Paid members; MRR $21,819 (+3.8%); Engagement 68% (last 30 days), 36% (last 7 days), 9,863 Newsletter subscribers; Recent posts: Subscription business metrics explained for publishers 12,984 sends 76%; How to create a valuable offer that converts 11,701 sends 92%; date axis 19 Mar, 2022 - 19 Apr, 2022; Past 30 days selector; animation only Toast "New paid member signup / Just now" slides in at top right; Total members then ticks to 13,042 and Paid members to 3,208 (animation only, never print these). The toast is part of the at-rest desktop screenshot, the incremented numbers are not
- type: H1 InterVariable opsz 32, 96px/96px 700, tracking -2.4px, #112220, centred, sentence case with full stop
- cta: none in the hero (the first CTA is the Try Ghost link under the statement)
- proof: the dashboard numbers are the proof; no logos
- rendered face: RENDERED FACE (observed 2026-10-30, by measurement): ghost.org declares InterVariable with font-display: optional, so on a first, uncached visit the browser keeps the system fallback for the whole page view. The reference homepage capture renders every line in the platform sans-serif (Helvetica on macOS): the H1 line 'Turn your audience' measures 840px wide (x 300-1140), exactly Helvetica Bold 96px at -2.4px tracking; InterVariable at the same settings measures 809px. To rebuild the homepage as first served, do NOT load InterVariable: set font-family: Helvetica, "Helvetica Neue", Arial, sans-serif on every role, keep every size, weight, line height and tracking in this spec unchanged, and drop font-variation-settings. Inter (InterVariable) remains the brand face a returning visitor sees once the font is cached.

**Statement**
- summary: White band: one large bold paragraph describing Ghost, then a big slate arrow link
- ground: #FFFFFF
- desktop: y 1403-2024 (621px); padding 11vmin top (99px) / 12vmin bottom (108px), 24px sides; paragraph x 24, max width 1152px, 48px/64.8px 700 tracking -1.2px #000000, 5 lines; link 36px/54px 600 tracking -0.9px #64748B at y 1862 (36px below the paragraph): "Try Ghost completely free for 14 days →" (href https://account.ghost.org/signup/), no underline at rest or hover
- phone: y 477-901; padding 42.9/16/46.8; paragraph 24px/32.4px 700 -0.6px, 358 wide, 8 lines; link 20px/30px 600 -0.5px, wraps so the → falls to line 2
- anatomy:
  - Left-aligned, not centred, despite the centred hero above
  - Copy: "Ghost is a powerful app for professional publishers to create, share, and grow a business around their content. It comes with modern tools to build a website, publish content, send newsletters & offer paid subscriptions to members."
  - No eyebrow, no image
  - Line breaks at 1440 (Helvetica fallback, 48px/64.8px 700, -1.2px, max-width 1152px): 5 lines; line right edges x 1139, 1114, 1017, 1108, 714; line 1 ends 'publishers', line 3 ends 'a'
  - Phone link: 'Try Ghost completely free for 14 days' fills line 1 and the arrow '→' alone on line 2; no max-width on the link (full 358px column)
- components:
  - text_link_cta_light

**Easy site design**
- summary: Navy band: text column left, a white Site design product panel bleeding off the right edge, then a 5-column staggered masonry wall of theme screenshots clipped at the band bottom
- ground: #0F172A
- desktop: y 2024-3749 (1725px), padding 0 24px; 12-col grid gap 8vmin: text column x 24 w 538 (eyebrow y 2206, H2 y 2242, paragraphs y 2431/2527/2659, link y 2755); panel x 634 y 2072, 1280x853, #FFFFFF, radius 16px, runs past x 1440 and is clipped; theme wall y 3005-3749: 5 columns 266px wide at x 24/306/587/869/1150 (gap ~16px), 3-4 images per column with 16px vertical gaps, column tops staggered (y 3043, 3005, 3136, 3091, 3133), images square-cornered, last row cut off by the band edge
- phone: y 901-2149; text stack (eyebrow 12px, H2 24px/36px, paragraphs 20px/30px, link 20px/30px 600); themes poster 390x260 at x 16 y 1562 (bleeds off the right edge, radius 8px); theme wall: exactly 4 columns of 81px thumbnails at x 16/109/201/294, staggered, running into and clipped by the band bottom
- anatomy:
  - Eyebrow "Easy site design" 12px/12px 700 uppercase +1.2px #D1FF19
  - H2 "Complete control over your website and branding." 48px/55.2px 700 #FFFFFF, "your" in italic
  - 3 paragraphs 24px/36px 400 #CBD5E1, 24px apart: "Launch a custom website and tweak the design settings to perfectly match your brand and style." / "Go even further with hundreds of custom themes in our marketplace, or build your own completely custom design from scratch." / "Your unique brand sits front and center, while Ghost runs things in the background."
  - Link "Explore Ghost themes →" 24px/36px 600 #D1FF19 to /themes/, underline on hover
  - Panel media: Site design settings UI (Accent color, Theme Light/Dark, Publication logo, Header Full-width, Font style Elegant serif) beside a "The Headliner" theme preview; desktop is a DOM render, use the poster/element image
  - 17 theme thumbnails (assets theme-gallery-*.webp)
  - Phone paragraphs: 20px/30px 400 #CBD5E1, each with margin-top 24px (y 1081, 1195, 1339 at 390; heights 90/120/90); the link follows 24px below the last
  - Phone theme wall: exactly 4 columns (never 5) of 81px-wide thumbnails at x 16 / 109 / 201 / 294 (about 12px gaps), heights 45-50px each, square corners, ~12px vertical gaps, column tops staggered; the wall runs down to the band's bottom edge and is clipped there by the next band (no empty navy below the last row)
  - Theme wall implementation: give the wall container a fixed height that ends exactly at the band's bottom edge with overflow hidden, and put more thumbnails in each column than fit (6+ per column), so the last row is always cut by the band edge, desktop and phone
- components:
  - text_link_lime_on_dark
  - product_panel
  - eyebrow

**Advanced creator tools**
- summary: Slate-200 band: eyebrow, H2, lead, a full-width white editor panel, then two alternating image/text feature rows
- ground: #E2E8F0
- desktop: y 3748-6333 (2585px), padding 8vmin (72px) / 24px; eyebrow y 3820, H2 48px/55.2px 700 -1.2px #000000 y 3848, lead 24px/36px #334155 max 768 y 3928; editor panel x 24 y 4152, 1392x813, #FFFFFF, radius 16px, shadow 0 0 1px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.03); row 1: image 549x549 at x 24 y 5044, text at x 733 w 576 (H3 y 5237); row 2 reversed: text x 131 w 576 (H3 y 5825), image x 868 y 5633; text vertically centred on the image
- phone: y 2149-4052; padding 31.2/16; H2 24px/24px -0.6px; lead 20px/30px; editor poster 358x209 radius 8px; each row stacks image (358x358) above text, both rows image-first; H3 24px/24px -0.6px; body 20px/30px
- anatomy:
  - Eyebrow "Advanced creator tools" 12px 700 uppercase +1.2px #64748B
  - H2 "Publish by web & email newsletter."
  - Lead: "An editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do."
  - Editor panel: Ghost editor with post "How to make music with a single analog monosynth" (DOM render on desktop; poster editor-poster-1170.webp)
  - Feature H3 36px/36px 700 -0.9px #000000, body 24px/36px #334155: "Rich media & dynamic cards." / "Modern publishing requires more than just words. Expand your story with image galleries, gifs, video, audio, products, info boxes, accordion toggles, downloadable files, bookmarks, and so much more."; "Newsletters built-in." / "Deliver posts by email newsletter to your audience, so they'll be in the loop whenever something new goes live. Segment your audience and send multiple different newsletters based on preference."
  - Feature images are flat illustrations on a faint lighter square (feature-rich-media.webp, feature-newsletters.webp, 816x816)
  - Editor panel top is 84px below the lead's last line box (lead ends y 4068, panel y 4152 at 1440); use a desktop-resolution image: editor-desktop-rest-2x.png (2784x1626, the resting first frame: title at top, cursor near 'Add feature image'), never the 1170 poster at desktop
- components:
  - eyebrow
  - product_panel
  - feature_row

**Grow your audiences**
- summary: Navy band: a big pink portal-signup panel left, text column right
- ground: #0F172A
- desktop: y 6333-7277 (944px), padding 72px/24px; pink panel x 24 y 6405, 797x800, #F8B1E2, radius 16px, holding a centred Ghost Portal animation; text column x 857 w 559: eyebrow y 6546, H2 48px/55.2px -1.2px #FFFFFF y 6582, three paragraphs 24px/36px #CBD5E1, closing line 24px/36px 500 #FFFFFF
- phone: y 4053-5135; panel first (358x434 at x 16, radius 8px), then text; H2 24px/30px -0.6px; paragraphs 20px/30px
- anatomy:
  - Eyebrow "Grow your audiences" #D1FF19
  - H2 "Transform those clicks into contacts."
  - Paragraphs: "Until now, building an indie publication with memberships and subscriptions has been difficult and complicated." / "Ghost makes it easy, with native signup forms that turn anonymous views into logged-in members." / "Allow people to sign up for free, or purchase a paid subscription to support your work across monthly and yearly premium tiers."
  - Closing line "Hello, new friends." 500 white
  - Panel at rest: a purple pill (colour is inside the image) "Subscribe" button with person icon centred on the pink and a cursor; it then loops through a Sign up card and a sign-in email (animation only). Use portal-poster-1078.webp / portal-subscribe-element-2x.png
- components:
  - eyebrow
  - product_panel

**Run your business**
- summary: White band: eyebrow, H2, lead, a wide members-table panel, then two alternating feature rows
- ground: #FFFFFF
- desktop: y 7277-9839 (2562px), padding 72px/24px; eyebrow y 7349, H2 y 7377, lead 24px/36px #334155 max 768 y 7457; members panel (white card with soft shadow, radius ~8px inside the image) full container width ~1392 below the lead; row 1: image 549x549 at x 24 y 8550, text x 733 (H3 "Native analytics." y 8742); row 2: text x 131 (H3 "Offers & promotions." y 9331), image x 868 y 9139
- phone: y 5135-6832; members poster 358x216 at y 5403; rows image-first
- anatomy:
  - Eyebrow "Run your business" #64748B
  - H2 "Manage your memberships."
  - Lead "See who's signing up, who's paying, and what they're reading, so you can get a better understanding of your core audience."
  - Members panel at rest (members-poster-1170.webp): table header "2,784 MEMBERS / STATUS / EMAILS OPENED / OPEN RATE"; rows Carla Stanton (Paid member – Gold tier, 11, 92%), Cooper Korsgaard (Free member, 24, 87%), Tiana Aminoff (Paid – Silver, 39), Charlie Westervelt (Paid – Bronze, 73) ... plus a Jamie Larson member card (132 received, 129 opened, 97% open rate; newsletters Weekly roundup off, Daily newsletter on, Specials on). Rows fading in one by one on desktop is animation only
  - "Native analytics." / "Understand what's working. Detailed engagement analytics for your audience so you can understand what content is getting the most attention, and who your biggest fans are."
  - "Offers & promotions." / "Entice new subscribers with offers and promotions to grow your business. Run a 30% discount for your first 100 subscribers, an 80%-off Black Friday sale, or a special promotion for a live event."
- components:
  - eyebrow
  - feature_row
  - product_panel

**Integrations**
- summary: White band: a cloud of app-icon tiles in staggered columns across (and past) the full width, centred eyebrow, H2, body and link underneath
- ground: #FFFFFF
- desktop: y 9839-10413 (574px), padding 0 24px 90px; icon tiles in columns at ~145px pitch from x -407 to 1777 (only x 0-1440 visible, overflow clipped), 1-2 tiles per column, column tops stepping in an arc (y 9811-10291); tiles white with 1px #E5E5E5 border, radius 24px, shadow 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); tile sizes 54-96px; hover tooltip (12px white on #18181B, radius 8px, padding 8px 12px) is opacity 0 at rest. Static, not a marquee (positions identical 3s apart). Text centred, 672 wide at x 384: eyebrow (h2) y 10087, H2 y 10123, body y 10179, link y 10293
- phone: y 6832-7423; a single row of ~4 visible tiles above the text, clipped both sides; H2 36px/32.4px -0.9px on two lines; body 20px/25px; link 20px/30px
- anatomy:
  - Visible desktop icons left to right: Discord, Spotify, Ulysses, ActiveCampaign, Twitter, Zapier, Stripe, Slack, Instagram, Facebook, iA Writer, YouTube, Feedly, Google Analytics (off-canvas also GeckoBoard, Discourse, Imgur, MailChimp, Pinterest, HelpScout, Buffer, Unsplash, AirTable, Vimeo, GitHub, Netlify, Let's Encrypt, Plausible, ChartMogul, Cove, Udesly, Giphy, Intercom, Tally)
  - Eyebrow "Integrations" 12px 700 uppercase +1.2px #64748B
  - H2 "Works with everything." 36px/32.4px 700 -0.9px #000000
  - Body 24px/30px #334155: "Social, referral programs, push notifications, social sharing, payment gateways, A/B testing, desktop editors, mobile apps, comments, recommendations." + bold "Yes."
  - Link "Explore the integrations library →" 20px/30px 600 #64748B to /integrations/, underline on hover
  - Every tile is a 96x96 box (border-box), 1px #E5E5E5 border, radius 24px, the shadow above, columns at a 144px pitch (x 24, 168, 312, 456, 600, 744, 888, 1032, 1176, 1320 visible). Artwork is normalised by per-tile padding, measured 2026-10-30: padding 0 (art fills 94x94, full-bleed app icons): Discord, Twitter, Zapier, Instagram, Facebook, Feedly, Pinterest, GitHub, Netlify, Udesly, Intercom, Geckoboard, Imgur; 8px with fill #2862AE: ActiveCampaign; 12px: Spotify (70x70); 12px fill #1BB6EB: Vimeo; 8px fill #FF0000: YouTube (svg); 16px (62x62 art): Ulysses, Slack, iA Writer, Discourse, Mailchimp, HelpScout, Plausible, Cove, Tally; 20px (54x54): Google Analytics, Buffer, ChartMogul; 24px: Giphy, Unsplash; Stripe svg fills the tile. Tile background is transparent unless a fill is listed (the white comes from the page)
- components:
  - integration_tile
  - text_link_cta_light

**Revenue and showcase**
- summary: Dark Grey band: centred revenue proof figure, then three showcase rows (Publishers, Creators, Businesses), each a label, a two-line tagline, a lime Learn more button and four photo cards
- ground: #15171A
- desktop: y 10413-12376 (1962px), padding 5vmin (45px) top, 24px sides; revenue block centred: graph icon 77x58 at y 10506, figure y 10556, sub y 10644 (512 wide), 80px padding then 1px #1F2937 bottom rule. Showcase rows start y 10865 / 11353 / 11841 (488px pitch): H2 36px/36px 700 #FFFFFF at x 24 (324 wide column); tagline at x 380: line 1 24px/30px 500 #FFFFFF, line 2 24px/30px 400 #94A3B8; Learn more button right-aligned x 1283 (133x39). Cards 40px below (mt-10): 4 cards x 24/380/736/1092, each image 324x201 radius 8px object-fit fill (whole image, no crop), caption row 14px below: name 18px/18px 600 #FFFFFF left, category 15px/22.5px 400 #9CA3AF right; row ends with 64px padding and a 1px #1F2937 bottom rule (not after Businesses)
- phone: revenue figure 48px/48px, sub 20px/25px; each showcase row: H2 24px/24px, taglines 18px/22.5px, Learn more below them; cards in a horizontal snap-scroll row (overflow-x auto, scroll-snap x mandatory, gap 32px), cards 304x189 at x 16/352/689/1025 so one card plus a sliver of the next shows
- anatomy:
  - Revenue: "$100,000,000+" 72px/72px 700 #FFFFFF; "Revenue earned each year by publications running on Ghost, with 0% payment fees." 24px/30px #CBD5E1 with "0%" 500 #FFFFFF
  - Publishers — "A newsletter is just the start" / "Build your own independent media business" — Learn more → /publishers: 404 Media (Technology), Tangle (Politics), Platformer (Technology), The Lever (Politics)
  - Creators — "Escape the algorithm" / "Your audience, brand, and revenue – owned entirely by you" — /creators: Gone With The Wynns (Travel), Creator Science (Business), DESK Magazine (Design), Jeff Su (Productivity)
  - Businesses — "Content marketing you can measure" / "Turn clicks into contacts with native lead gen & analytics" — /business: YCombinator (Business), Kickstarter (Business), Buffer (Business), Unsplash (Culture)
  - Card images carry the publication's own logo over a photo or brand colour (showcase-*.webp, 618x384)
  - Card images: object-fit fill (the default), never cover: the whole 618x384 file shows, scaled to 324x201 (same 1.61 ratio), no crop or zoom; radius 8px
  - Phone band y 7491-9349 (about 1858px): revenue block 7491-7729 (238), Publishers row 7769-8237 (468), Creators row 8277-8768 (491), Businesses row 8807-9329 (522), measured top-level boxes at 390 on 2026-10-30
- components:
  - learn_more_on_dark
  - showcase_card

**Built to last**
- summary: White band: eyebrow, a two-tone 36px statement, a bold kicker, then a full-width dark Posts screenshot whose bottom sinks into the dark launch band
- ground: #FFFFFF (with a #151719 strip behind the screenshot bottom)
- desktop: y 12376-13545 (1169px), padding 72px/24px; eyebrow y 12448; statement 36px/45px max 600 wide, 4 lines y 12484; kicker y 12690; screenshot x 24 y 12773, 1392x772, radius 16px; a 108px (12vh) #151719 strip y 13437-13545 behind its bottom edge
- phone: statement 24px/30px; kicker 24px/30px 700; screenshot 358x200 radius 8px
- anatomy:
  - Eyebrow "Built to last" 12px/12px 600 uppercase +1.2px #64748B
  - Statement: "A product you can depend on." 700 #000000 + " Ghost is open source, independent, and funded 100% by its users." 600 #6B7280
  - Kicker "No investors. No bullshit." 36px/45px 700 #000000, 24px below
  - Screenshot: Ghost Admin Posts list (built-to-last-posts.png, 1440x796) with the green New post button
  - Statement markup: one paragraph, bold black sentence 'A product you can depend on.' then a <br>, so the grey sentence always starts on a new line; container max-width 600px desktop / 400px phone; desktop 36px/45px: line 1 is the bold sentence alone (600 wide), the grey sentence follows on 3 lines
  - Screenshot frame: 1px solid #2C2E30 border (observed by pixel, 2026-10-30) with radius 16px, visible along the bottom edge where the panel overlaps the #151719 strip; the panel fill near the edge is #101216
  - Phone band y 9349-9830 (481px) at 390, measured 2026-10-30
- components:
  - eyebrow
  - product_panel

**Launch CTA**
- summary: Dark Grey band, everything centred: lime eyebrow, two-tone 48px line with a live-looking count, a white 48px kicker and a lime button
- ground: #15171A
- desktop: y 13545-14152 (607px), padding 14vmin (126px) top; eyebrow y 13671; line y 13710 (2 lines, 819 wide); kicker y 13844; button 271x62 at x 584 y 13964 (visible gap 65px below the kicker line box; CSS margin-top 40px)
- phone: eyebrow 12px/12px 600 +1.2px; line 24px/30px on 3 lines; kicker 24px/30px; button same 271x62 centred
- anatomy:
  - Eyebrow "Launch your big idea" 15px/15px 600 uppercase +1.5px #D1FF19
  - Line "Last week, 10,603 brand new publications got started with Ghost." 48px/55.2px 600 #9CA3AF with "10,603" 700 #FFFFFF; 10,603 is the printed resting value
  - Kicker "Today, it's your turn." 48px/55.2px 700 #FFFFFF
  - Button "Start publishing now →" fill #D1FF19, text #000000 20px/30px 600, radius 8px, padding 16px 24px, href https://account.ghost.org/signup/
  - Phone band y 9830-10245 (415px) at 390, measured 2026-10-30; button 65px below the kicker's line box (the earlier '40px margin top' is the CSS margin; the visible gap is 65px)
- components:
  - button_primary_lime_on_dark

**Footer**
- summary: Dark Grey footer continuing the launch band (no rule between): light logo + four top links, five link columns, then a bottom row with three badge logos left and legal links right
- ground: #15171A
- anatomy:
  - y 14152-14761 (609px), padding 0 24px
  - Row 1 (y 14188): light logo 109x40 at x 24 (ghost-logo-light.webp); links About (/about/), Explore (/explore/), Careers (https://careers.ghost.org/), Resources (https://ghost.org/resources/) 15px/22.5px 500 #FFFFFF starting x 149
  - Columns (heading y 14302; x 24, 310, 595, 881, 1166; 250 wide; headings 15px 500 #FFFFFF; links 15px/18.75px 400 #94A3B8, padding 8px 0, 35px pitch, hover #FFFFFF):
  - Product: Creator platform (/), Theme marketplace (/marketplace/), Integrations (/integrations/), Experts (/experts/), Ghost for news (/news/)
  - Developers: How to install Ghost (https://docs.ghost.org/install/), Core concepts (https://docs.ghost.org/), Ghost hosting (/pricing/), API documentation (https://docs.ghost.org/content-api/), Security overview (https://docs.ghost.org/security/), Source code (https://github.com/TryGhost/Ghost)
  - Resources: Ghost tutorials (/tutorials/), Resources (/resources/), Ghost reviews (/love/), Open Subscription Platforms (https://opensubscriptionplatforms.com)
  - Comparisons: Ghost vs Substack (/vs/substack/), Ghost vs BeeHiiv (/vs/beehiiv/), Ghost vs WordPress (/vs/wordpress/), Ghost vs Medium (/vs/medium/), Ghost vs Patreon (/vs/patreon/), Ghost alternatives → (/alternatives/, in #D1FF19)
  - Support: Help center (/help/), Community forum (https://forum.ghost.org/), Status (https://status.ghost.org/) followed by a badge "99.9%" 12px/18px 600 #CBD5E1 on #334155, radius 4px, padding 0 4px, with a small up-triangle
  - Bottom row (y ~14650): badges left: Non-Profit Foundation (indie.svg 89x34 at x 24), Open Source (opensource.svg 89x34 at x 161), Carbon Neutral (carbonneutral.svg 102x41 at x 298), all white line art
  - Legal right-aligned: Terms (/terms/), Privacy (/privacy/), Contact (/contact/), "Ghost Foundation © 2026" (/) — 14px/21px 400 #94A3B8, padding 0 8px, hover #FFFFFF
  - No address or phone number is printed on the homepage
  - Phone footer starts y 10245 at 390; page ends 10397 (measured 2026-10-30)
- phone: Only row 1 and the badges: four top links About, Explore, Careers, Resources centred in one row (14px/21px 500 #FFFFFF, y 10202), then the three badges in one row (x 16 / 147 / 279, y 10270); the logo, the five columns and the legal links are hidden at 390. Page ends at 10397px (measured page height at 390, 2026-10-30)
- rendered face: Footer text renders in the system sans-serif fallback (Helvetica) in the reference capture.

**On dark grounds**
- secondary button: Learn more → : fill #1A2E05, text #BEF264 15px/22.5px 600, radius 8px, padding 8px 16px, 133x39
- link: #D1FF19 600 with →, underline on hover (Explore Ghost themes, Ghost alternatives)
- muted text: #CBD5E1 for paragraphs on navy/dark; #94A3B8 for secondary lines and footer links; #9CA3AF for tags
- hairline: #1F2937 1px
- logo variant: light lockup (white orb + white ghost wordmark), ghost-logo-light.webp 109x40
- primary button: Start publishing now: #D1FF19 fill, #000000 text, radius 8px

## Components

- **button primary on light** (observed): fill #15171A, text #FFFFFF, radius 6, padding 8px 16px, height 39, padding x 16, font size 14, weight 600, face body, text style 14px/21px: "Get Started" 600 + " — free" 400, shadow 0 0 1px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.03), example Get Started — free (nav, 155x39; phone menu full width)
  - hover (observed): fill #15171A (no change), transition all
- **launch pill** (observed): fill #FEC137, text #000000, radius pill, padding 8px 3px (outer), label inset, height 39, font size 14, weight 600, face body, text style 14px/21px 600, ends with →, example Just launched: Ghost 6.0 → (230x39)
  - hover (observed): fill #FEC137 (no change), transition 0.3s cubic-bezier(0.4,0,0.2,1)
- **button primary lime on dark** (observed): fill #D1FF19, text #000000, radius 8, padding 16px 24px, height 62, padding x 24, font size 20, weight 600, face display, text style 20px/30px 600 opsz 32, ends with →, example Start publishing now → (271x62)
  - hover (observed): fill #D1FF19 (no change)
- **learn more on dark** (observed): fill #1A2E05, text #BEF264, radius 8, padding 8px 16px, height 39, padding x 16, font size 15, weight 600, face body, text style 15px/22.5px 600, "Learn more →", example Learn more → (133x39)
- **text link cta light** (observed): fill none, text #64748B, decoration none at rest, text style 36px/54px 600 -0.9px (Try Ghost) or 20px/30px 600 (integrations), ends with →, example Try Ghost completely free for 14 days →
  - hover (observed): text decoration underline on the integrations link; none on Try Ghost
- **text link lime on dark** (observed): fill none, text #D1FF19, text style 24px/36px 600, ends with →, example Explore Ghost themes →
  - hover (observed): text decoration underline
- **nav link** (observed): text rgba(0,0,0,0.7), text style 15px/22.5px 500
  - hover (observed): text rgba(0,0,0,0.9)
- **footer link** (observed): text #94A3B8, text style 15px/18.75px 400, padding 8px 0
  - hover (observed): text #FFFFFF
- **eyebrow** (observed): text #64748B on light / #D1FF19 on dark, text style 12px/12px 700 uppercase, tracking 1.2px, opsz 32, gap below 24px to the H2
- **product panel** (observed): fill #15171A (dashboard, posts) or #FFFFFF (site design, editor, members), radius 16, shadow 0 0 1px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.03) on white panels, media Ghost Admin UI as image; desktop site uses DOM renders in iframes, phone uses posters, radius note 16px desktop, 8px phone (hero: top corners only)
- **feature row** (observed): media 549x549 square illustration, text H3 36/36 700 + body 24/36 #334155, column 576 wide, vertically centred, layout alternates image left (text x 733) then text left (x 131, image x 868)
- **integration tile** (observed): fill #FFFFFF, border 1px solid #E5E5E5, radius 24, shadow 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1), size 54-96px, app icon fills it
  - hover (observed): tooltip 12px/12px white on #18181B, radius 8px, padding 8px 12px, opacity 0 -> 1
- **showcase card** (observed): media 324x201 image, radius 8px, cover, caption name 18px 600 #FFFFFF left, category 15px 400 #9CA3AF right, 14px below the image
- **dropdown panel** (observed): fill #FFFFFF, radius 8, ring 0 0 0 1px rgba(0,0,0,0.05), padding 32px, item 20px #64748B line icon + title 18px 700 #000000 + description 14px 400 rgba(0,0,0,0.7)
- **status badge** (observed): fill #334155, text #CBD5E1, radius 4, padding 0 4px, text style 12px/18px 600 with an up-triangle, example 99.9%

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| standard (product UI) | cubic-bezier(0.2, 0, 0, 1) |  | Shade --ease-standard. Ghost Admin UI only; no brand motion is published | published |
| emphasized (product UI) | cubic-bezier(0.16, 1, 0.3, 1) |  | Shade --ease-emphasized. Ghost Admin UI only | published |
| fast (product UI) |  | 150ms | Shade --duration-fast; fade-in/out | published |
| base (product UI) |  | 250ms | Shade --duration-base; modal in | published |
| slow (product UI) |  | 400ms | Shade --duration-slow | published |

## Signature moves

### The orb

Where: the logo's mark: beside the wordmark in the dark and light logos, alone as the orb logo (favicons, the guide's middle file, the app sidebar).
Do: a ring of translucent, ribbon-like strokes in black (on light) or white (on dark), drawn as layered fine lines; supplied as PNG files only (800x294 lockups, 400x400 orb). Use the supplied file, scaled only. One logo per surface.
Don't: redraw, recolor, add effects, distort, or combine it with another logo (only scaling is allowed).
Example: "ghost".

### Light and tinted grey, one green accent

Where: every brand surface: the guide's palette in one line.
Do: white grounds and blue-tinted greys (#CED4D9, #7C8B9A, #15171A) carry the page; Ghost Green #30CF43 is the only saturated colour and appears as an accent, not a ground.
Don't: flood a section in Ghost Green or add other saturated hues as brand colours.
Example: "Turn your audience into a business.", with "business." set as color.

### Dark Grey panel

Where: the light logo's ground on the guide; the product dashboard band on the homepage.
Do: a #15171A (Dark Grey) panel with white type and the white logo; on the guide it sits as a rounded card inside the page.
Don't: use pure #000000 for the dark ground: Ghost's black is the tinted Dark Grey.
Example: "ghost".

## Messaging: rules

No messaging guide is published. ghost.org's pages lead with ownership and business: 'Turn your audience into a business.', 'Escape the algorithm', 'Your audience. Your data.', and back it with printed numbers and named publications.

Why it works: Ghost sells independence; real revenue and member counts make the promise concrete.

- Use only numbers the pages print, with the page and date
- Name real publications with their own numbers (404 Media, Tangle, Platformer, The Lever)
- Lead with what the reader owns: audience, brand, data, revenue

Real examples, to look at on Ghost's own pages (not for reuse):
- Homepage hero: the H1 and the launch pill: https://ghost.org/

Sources: https://ghost.org/, https://ghost.org/creators/, https://ghost.org/publishers/, https://ghost.org/business/, https://ghost.org/about/, https://ghost.org/pricing/

## Voice: rules

No voice guide is published. The site writes short declarative sentences with full stops, in sentence case, as 'we' to 'you', British spelling on the about and docs pages, with occasional bluntness ('No investors. No bullshit.').

Why it works: A plain, candid voice matches an independent, user-funded non-profit that publishes its own finances.

|  |  |
|---|---|
| Voice guide | not published |
| Spelling | British (inferred from about and docs pages) |
| Mark form | Ghost (exact) |

- Sentence case headlines with a full stop
- Write as 'we' to 'you'
- British spelling (organisation, colours)
- The mark is always 'Ghost', exact form
- Don't write GHOST, Ghost-CMS or other altered forms of the mark
- Don't translate the mark

Real examples, to look at on Ghost's own pages (not for reuse):
- About page opening: plain, first-person plural: https://ghost.org/about/

Sources: https://ghost.org/, https://ghost.org/about/, https://ghost.org/trademark/ (s.5 How to display our marks)

## Logo: rules

Three logo files: the dark logo (black orb plus 'ghost' wordmark, for light grounds), the orb alone, and the light logo (white orb and wordmark, shown on a Dark Grey panel). The wordmark is lowercase. All three are PNG downloads; no vector is published.

Why it works: The policy allows only scaling, so the supplied files are the logo; the orb gives a small mark for icons.

|  |  |
|---|---|
| Files | dark 800x294 PNG, orb 400x400 PNG, light 800x294 PNG |
| Allowed change | scale only |
| Clear space | not published |
| Minimum size | not published |
| Legend | Ghost Logo™ (unregistered) |

- Use the dark logo on light grounds and the light logo on Dark Grey #15171A
- The orb can stand alone (the guide offers it as its own file)
- Scale only: no other change is allowed
- Modified distributions of Ghost must remove the logos
- Compatibility statements, managed services and publication covers use the word mark, not the logo, without written permission
- Don't add decorative elements
- Don't change the colors
- Don't change the proportions or distort it
- Don't add elements or combine it with other logos
- Don't use it to suggest an official or endorsed site

Real examples, to look at on Ghost's own pages (not for reuse):
- The whole guide page: three logos, five colours, legal card: https://docs.ghost.org/logos
- Dark logo, for light grounds: https://docs.ghost.org/logos
- The orb alone: https://docs.ghost.org/logos
- Light logo, for Dark Grey: https://docs.ghost.org/logos

Sources: https://docs.ghost.org/logos, https://docs.ghost.org/logos.md, https://ghost.org/trademark/ (s.5 How to display our marks)

## Color: rules

Five named colours: Ghost Green #30CF43 ($green), White #FFFFFF, Light Grey #CED4D9 ($lightgrey), Mid Grey #7C8B9A ($midgrey), Dark Grey #15171A ($darkgrey). Described as light backgrounds and tinted greys, accented with Ghost Green. The open-source Shade tokens hold the same values (green-500, gray-400, gray-700, black).

Why it works: A near-colourless system lets each publication's own brand lead, with one green as Ghost's signal.

|  |  |
|---|---|
| Ghost Green | #30CF43 / RGB 48, 207, 67 / $green |
| White | #FFFFFF / RGB 255, 255, 255 |
| Light Grey | #CED4D9 / RGB 206, 212, 217 / $lightgrey |
| Mid Grey | #7C8B9A / RGB 124, 139, 154 / $midgrey |
| Dark Grey | #15171A / RGB 21, 23, 26 / $darkgrey |

- White and light tinted greys as grounds
- Ghost Green as the accent, not a ground
- Dark Grey #15171A for text and dark panels, never pure black
- Mid Grey for secondary text (Shade --text-secondary)
- Text on Ghost Green is Dark Grey (our reading: white fails contrast)
- Don't add saturated hues as brand colours
- Don't use pure #000000 as Ghost's black

Not published: proportions; tints beyond the five (Shade's grey ramp is product UI); print values (CMYK, Pantone).

Real examples, to look at on Ghost's own pages (not for reuse):
- The whole guide page: three logos, five colours, legal card: https://docs.ghost.org/logos

Sources: https://docs.ghost.org/logos (Ghost colours), https://github.com/TryGhost/Ghost/blob/866b27ea9a8bdfc14ea1882d75845a2177d3855f/apps/shade/tailwind.theme.css, https://github.com/TryGhost/Ghost/blob/866b27ea9a8bdfc14ea1882d75845a2177d3855f/apps/shade/theme-variables.css

## Typography: rules

The guide names no typeface. ghost.org self-hosts Inter and Inter Display (rsms, SIL OFL 1.1) and sets headings in InterVariable Bold; Shade's --font-sans starts with Inter for both headings and body.

Why it works: One open, neutral sans keeps Ghost out of the way of its publishers' content.

|  |  |
|---|---|
| Display | Inter Display (SIL OFL 1.1) |
| Body | Inter (SIL OFL 1.1) |
| Observed H1 | 96px / 700 / 1.0 / -2.4px, #112220 (home, 2026-10-30) |
| Shade sans stack | Inter, -apple-system, BlinkMacSystemFont, avenir next, ... |

- Homepage rebuilds: the reference capture renders in the system sans fallback (Helvetica), because ghost.org serves InterVariable with font-display: optional. Use Helvetica, "Helvetica Neue", Arial, sans-serif with the spec's sizes and tracking; never load InterVariable for a first-visit match.
- Inter Display for display sizes, Inter for text (real faces, open licence)
- Bold (700) headings, Regular (400) body, SemiBold (600) links and buttons (observed)
- Shade product UI: heading leading 1.35em, body 1.5em

Not published: a type scale; a mono face for the brand.

Real examples, to look at on Ghost's own pages (not for reuse):
- Inter Bold H1 on the homepage: https://ghost.org/

Sources: https://ghost.org/, https://github.com/TryGhost/Ghost/blob/866b27ea9a8bdfc14ea1882d75845a2177d3855f/apps/shade/tailwind.theme.css

## Graphic elements: rules

The only published graphic element is the orb in the logo. Shade (product UI) adds soft layered shadows, small radii and a frosted-glass surface for the Admin sidebar.

- Use the orb only as the supplied logo file
- Don't build decorative patterns from the orb (no change but scaling)

Not published: patterns, textures, graphic devices.

Sources: https://docs.ghost.org/logos, https://ghost.org/trademark/ (s.5 How to display our marks), https://github.com/TryGhost/Ghost/blob/866b27ea9a8bdfc14ea1882d75845a2177d3855f/apps/shade/theme-variables.css

## Interface and layout: rules

No layout grid is published for marketing. Shade publishes product UI tokens: 0.4rem base spacing unit, radius scale 0.3 to 2.4rem plus full, 32/40px control heights, breakpoints 480 to 1600px, 120rem page container.

|  |  |
|---|---|
| Spacing unit | 0.4rem (Shade) |
| Radius | xs 0.3, sm 0.4, md 0.6, lg 0.8, xl 1.2, 2xl 1.6, 3xl 2.4rem, full |
| Controls | 32px, 40px large |
| Breakpoints | 480, 640, 800, 860, 1024, 1240, 1320, 1440, 1600px |

- Treat Shade tokens as product UI scope: interface-like elements only
- Marketing page anatomy comes from the homepage measurement step

Not published: marketing grid, margins, section spacing.

Sources: https://github.com/TryGhost/Ghost/blob/866b27ea9a8bdfc14ea1882d75845a2177d3855f/apps/shade/tailwind.theme.css, https://github.com/TryGhost/Ghost/blob/866b27ea9a8bdfc14ea1882d75845a2177d3855f/apps/shade/theme-variables.css, https://github.com/TryGhost/Ghost/blob/866b27ea9a8bdfc14ea1882d75845a2177d3855f/apps/shade/src/docs/tokens.mdx

## Rules: rules

Trademark policy v2.0 (14 Aug 2025) plus the guide's legal card: any use of the brand materials accepts the Terms of Service, the policy and the guidelines; Ghost Foundation owns the marks and can review or end use at any time.

- Ghost® on first or most prominent mention; Ghost Logo™ for the logo
- Footer notice: 'Ghost is a trademark of Ghost Foundation - https://ghost.org'
- Name products '[X] for Ghost', never 'Ghost [X]'
- Only call a product '[X] for Ghost' if it ships exact Ghost releases and is API-compatible
- Written licence needed for domains, handles, app listings, ads, film/TV and merchandise
- Report misuse to trademark@ghost.org
- Don't prefix an offering with 'Ghost'
- Don't use variations (MyGhost, Ghost Cloud, Hosted Ghost, Geist)
- Don't imply endorsement or partnership
- Don't mirror docs without marking them third-party
- Don't use the marks in a company, product or domain name

Real examples, to look at on Ghost's own pages (not for reuse):
- Trademark policy v2.0 header: https://ghost.org/trademark/

Sources: https://ghost.org/trademark/, https://docs.ghost.org/trademark, https://docs.ghost.org/logos (legal card)

## By format

How our engine applies Ghost's system to each format. Our recipe from their rules, not something Ghost publishes. Level = how much colour and contrast the format carries (0 plain, 5 loudest). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way ghost.org is built (kit.spec.page): white 94px nav with the dark lockup and a #15171A Get Started — free button; centred 96px InterVariable opsz-32 700 H1 in #112220 with a full stop, a yellow launch pill above it; one dark product panel; bands alternating white, slate #E2E8F0, navy #0F172A and Dark Grey #15171A; UPPERCASE 12px eyebrows; real publications with their own numbers; a centred lime launch CTA on Dark Grey running into the footer. Homepage voice: sentence-case declaratives ending in a full stop, CTA links ending in → | which feature bands and how many; the pill text; showcase rows |
| Deck | 2 | White slides, dark logo in a corner, Inter Bold headlines, tinted greys, one green accent | Dark Grey title slide with the light logo |
| Proposal page | 1 | White ground, Dark Grey text, printed numbers only, Dark Grey CTA | one green accent |
| Email | 1 | White, Dark Grey type, one Dark Grey button | green link or highlight |
| Social post | 3 | Dark Grey or white ground, Inter Bold line, orb or logo | a real publication's number as the hero |
| Third-party page using the mark | 0 | Ghost® on first mention, footer trademark notice, '[X] for Ghost' naming, no logo without licence | none |

## Checks before anything ships

- **Logo hidden**: Cover the orb. It should still read as Ghost: white and tinted greys, one green, Dark Grey not black, Inter Bold sentence case with full stops, real numbers.
- **Mark check**: Search the copy for every 'Ghost': exact form, no prefix naming, no translated mark.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Ghost's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Type scale, weights and sizes per role: not published (only observed on ghost.org, and Shade's product UI ramp).
- Typeface: not named in the guide; Inter / Inter Display are observed on ghost.org and named in Shade's code.
- Logo clear space and minimum size: not published.
- Vector logo files: not published (PNG only).
- Logo placement and co-branding rules: not published (policy only forbids combining with other logos).
- Colour proportions and print values (CMYK, Pantone): not published.
- A surface colour and an on-accent text colour: not published (Gray 100 and Dark Grey are our reading).
- Iconography: not published.
- Illustration: not published.
- Photography: not published.
- Motion for the brand: not published (Shade has product UI easing and durations only).
- Marketing layout grid, margins and spacing: not published (Shade spacing is product UI).
- Voice and tone guide, banned words beyond trademark forms: not published.
- Messaging pillars and boilerplate: not published (ours are paraphrased from ghost.org pages).
- Mono face for the brand: not published (Shade's mono is a system stack).

Logos and reference images belong to Ghost. Look at them on Ghost's own pages; don't reuse them.