Ghost
ghost.orgThe reference for a creator-platform brand at peak typographic confidence — Inter Display at 96px, real product dashboard at full fidelity, single saturated green accent on a 4-surface palette.
Design tokens
- display
- InterDisplay, sans-serif
- body
- InterVariable, sans-serif
- mono
- (none on the homepage)
Do / Don't
Reference it for
- Inter Display + Inter Variable — proof that a free font system carries flagship craft when the decisions are confident
- 96px hero H1 in pure black on white — the most disciplined hero in the library; no gradient, no animation, no two-tone
- Amber pill announcement above the H1 as the only colour above the fold — a single warm accent draws the eye to the launch news
- Real product dashboard immediately below the hero — Total members 13,041 +4%, Paid members 3,207 +1%, Free members 9,834 +8%, with a real magenta chart line
- Four-surface palette: white / slate-200 / zinc-900 / pure black — no greys-in-between
- Single saturated green accent (#5dcf1f) reserved for "Learn more →" links on the dark gallery sections
- Black filled pill CTA with em-dash sub-label — "Get Started — free" reads as confident + transparent
- Section-banded long-page rhythm alternating white feature blocks → slate-200 bands → dark mode-flip gallery
Do not copy
- The Ghost green #5dcf1f — pick the client's brand-saturation colour
- The dashboard screenshots literally — Ghost's dashboard is bespoke; copying the layout would read as derivative
- The "Turn your audience into a business" copy — Ghost-specific positioning
- The amber pill announcement format — only borrow if the brand has a genuine launch / update to announce
- The "$100,000,000+" social proof — Ghost-specific number
- The black-on-pink secondary card section pattern (visible in scroll-02 footer) — Ghost's brand-coded card surface
Signature moves
disciplined 96px hero with single amber pill announcement
a 96px Inter-Display hero in pure black on white (no gradient, no animation, no two-tone) sits below an amber pill announcement, the only colour above the fold.
real-dashboard-below-hero with section-banded rhythm
a real product dashboard (member counts, a magenta chart line) sits immediately below the hero, with section-banded long-page rhythm alternating white feature blocks, slate-200 bands and dark mode-flip galleries, a single green #5dcf1f reserved for 'Learn more' links on dark sections.
Related references
Cal Com
strongDeveloper Tool
The reference for open-source dev-tools brand at peak typographic confidence — Cal Sans 64px H1 on pure white, real booking widget in hero, prestige customer logos.
Figma
flagshipSaas Product
a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.
Mintlify
strongMarketing Platform
The reference for AI-documentation platform — cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.
Pitch
flagshipSaas Product
a violet-and-yellow presentation-tool flagship that pairs Eina01 + Mark Pro on a warm-navy ink, sparkle keyframes (`sparkL`, `sparkM`, `sparkS`, `sparkHover`), animated cursor pointers, and a numbered four-step "Plan / Build / Pitch / Measure" walkthrough - the canonical reference for "B2B presentation software that earns playfulness."