Voltage Lime
#d1ff19Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Ghost
ghost.orgWebsite preview
The design language
Ghost speaks at full volume through typography alone: monumental Inter Display headlines (72–96px, weight 600, tracking -0.025em) command the white canvas, then drop to InterVariable for compact, functional body text. The page alternates between two distinct modes — bright white editorial sections with massive headlines and product/dashboard sections rendered in near-black (#15171a) with vivid purple-pink chart gradients. A single chromatic accent — electric lime (#d1ff19) — punctuates links and emphasis against the achromatic backbone, while a warm amber pill (#fec137) handles announcement chips. Components stay soft and approachable: 24px radius on primary controls, 8px on cards, layered 0.1-alpha shadows that hint at elevation without weight. The rhythm is editorial — enormous headlines, generous vertical breathing room, centered or left-aligned stacks, with dark product cards providing visual counterpoint to the white marketing canvas.
Color palette
brand
Moss
#1a2e05Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Lime Highlight
#bef264Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
accent
Amber Pulse
#fec137Yellow supporting accent for decorative details and low-frequency emphasis.
neutral
Ink Black
#15171aSupporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Paper White
#ffffffPage canvas, card surfaces, button text on dark fills
Mist Gray
#e5e7ebHairline borders, subtle dividers, ghost surfaces — the dominant neutral that softens the white-on-white hierarchy
Slate Veil
#94a3b8Muted body text, secondary metadata, nav placeholders — desaturated blue-gray reads as informational without competing with headlines
Graphite
#64748bBody text on light backgrounds, supporting copy, link underlines
Charcoal
#334155Emphasized body text, sub-labels, card headings on light surfaces
Deep Forest
#112220Headline color on white — the darkest near-black used for display copy, warmer than #15171a
Carbon
#1f2937Heavy borders on cards and dashboard panels — the border workhorse for dark UI elements
Smoke
#cbd5e1Icon strokes, secondary borders, disabled state outlines
Pure Black
#000000Maximum-contrast text on light, SVG fill for logos and icons
Typography
Type scale
Minor Third (1.2) · 15px basehero
96px · 700 · 0.9 · -2.4px trackingThe quick brown fox jumps
display
72px · 700 · 1 · -1.8px trackingThe quick brown fox jumps
heading-lg
48px · 700 · 1.15 · -1.2px trackingThe quick brown fox jumps
heading
36px · 700 · 1.25 · -0.9px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.25 · -0.6px trackingThe quick brown fox jumps
text-20
20px · 600 · 1.5The quick brown fox jumps
subheading
18px · 600 · 1.35The quick brown fox jumps
text-15
15px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
InterDisplay
- Weights
- 400, 500, 600, 700
- Sizes
- 12, 15, 18, 20, 24, 36, 48, 72, 96
- Line height
- 0.90, 1.00, 1.15, 1.25, 1.35, 1.50
- Letter spacing
- -0.025em at 36px and above; 0.1em at 12px (uppercase labels)
- Fallback
- Inter (variable) or system-ui at equivalent weights
- Features
- "calt", "cv10", "cv11", "liga", "ss01", "ss03"
All display headlines, hero copy, section titles, link emphasis. Sizes scale aggressively from 18px subheads to 96px hero — the range itself is the brand. Weight 600 dominates at display sizes; 700 is reserved for the largest hero.
Additional typeface
InterVariable
- Weights
- 400, 500, 600
- Sizes
- 12, 14, 15
- Line height
- 1.25, 1.50
- Fallback
- Inter (static) or system-ui at equivalent weights
- Features
- "calt", "cv10", "cv11", "liga", "ss01", "ss03"
Body copy, nav items, button labels, list text, captions, table data. Weight 400 is the default; 500 for emphasized inline text; 600 for button labels and active nav. Never used above 15px — the hierarchy jumps from 15px body to 18px subhead, leaving a clear gap between reading text and display.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 16px
Border radius
cards
8pxpills
9999pximages
16pxinputs
8pxbuttons
24pxSpacing scale
1px3px4px8px12px13px16px20px24px27px28px32px36px40px45px48px54px64px72px80px126pxGuidelines
Do
- Use InterDisplay weight 600 at 72–96px for hero headlines with letter-spacing -0.025em — the oversized type is the brand's primary visual signature
- Use Voltage Lime (#d1ff19) only on dark surfaces (#15171a) for links and emphasis — it is a dark-mode accent, not a light-mode color
- Apply 24px radius to all primary buttons and 9999px to all pills and tags — the 24px button radius is distinctive and should not be flattened to 4px or 8px
- Pair near-black #15171a (not #000000) for primary action buttons and dark section backgrounds — the slight warmth prevents the harshness of pure black on white
- Use the amber pill (#fec137 fill, #112220 text) exclusively for announcement and launch badges above hero headlines
- Set section gap to 64px and element gap to 16px — the generous vertical breathing room between sections is what makes the page feel editorial rather than dense
- Use InterVariable weight 400 at 15px with line-height 1.50 for all body copy — never compress body text below 1.5
Don’t
- Do not use Voltage Lime (#d1ff19) as text on white backgrounds — it fails contrast; reserve it for dark surfaces only
- Do not flatten button radius below 8px — the 24px radius is core to the system's visual identity; sharp buttons break the look
- Do not use more than one chromatic color per section — the system is achromatic-first; lime and amber are punctuation, not palette
- Do not use #000000 for primary buttons — use #15171a; the pure black reads as terminal/debug, not as brand
- Do not set body text above 15px or below 14px — the hierarchy must jump from body (15px) to subhead (18px) with a visible gap, not interpolate
- Do not add gradients to backgrounds or cards — gradients appear only in product dashboard charts, never in the marketing UI
- Do not use shadows heavier than rgba(0,0,0,0.25) 0px 25px 50px -12px — the system relies on soft, low-alpha layering, not dramatic drop shadows
Components
Primary Action Button
Main CTA — nav sign-up, form submissionFill: #15171a. Text: #ffffff. InterDisplay weight 600 at 15px. Padding: 12px 24px. Radius: 24px. Shadow: rgba(0,0,0,0.1) 0px 0px 1px, rgba(0,0,0,0.03) 0px 2px 6px. The near-black fill is warmer than pure black, giving the button a charcoal presence rather than a flat void. Text is white, fully solid — no opacity tricks.
Announcement Pill
Launch badge, version chip, promotional labelFill: #fec137 (amber). Text: #112220 (deep forest). InterVariable weight 500 at 12px. Padding: 6px 16px. Radius: 9999px. Sits above the hero headline as a warm signal — the amber draws the eye to the chip before the massive headline takes over.
Accent Lime Button
Secondary action, emphasis CTA on dark backgroundsFill: #d1ff19 (voltage lime). Text: #112220. InterDisplay weight 600 at 15px. Padding: 12px 24px. Radius: 24px. The high-chroma lime against white or near-black creates the strongest possible contrast in the system — use sparingly.
Ghost Navigation Bar
Site-wide headerBackground: #ffffff. Height: 64px. Logo left (Ghost mark + wordmark, #000000). Center: Product / Explore / Resources / Pricing links in InterVariable 14px weight 400, #64748b, expanding dropdowns on hover. Right: Sign in text link (#15171a) + Primary Action Button. Border-bottom: 1px solid #e5e7eb.
Hero Headline
Primary page headlineInterDisplay weight 600 at 72–96px. Color: #112220. Line-height: 0.90–1.00. Letter-spacing: -0.025em. Centered or left-aligned at page max-width. The hero headline is the loudest element on the page — it defines the page before anything else is read.
Section Body Block
Explanatory paragraph below a headlineInterVariable weight 400 at 15px. Color: #334155. Line-height: 1.50. Max-width: 680px for readability. Generous margin-top: 24px from headline. Comfortable density — no compressed line-height tricks.
Integration Icon Tile
Scattered app icons in the integrations sectionBackground: #ffffff. Padding: 16px. Radius: 8px. Shadow: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px. Each tile holds a single brand icon (Slack, Twitter, Instagram, etc.) at 48–64px. Tiles are scattered with rotation and varied offsets, not gridded — the playful arrangement contrasts the rigid text alignment above.
Dark Stats Banner
Revenue, user count, or impact metricBackground: #15171a. Full-width section, padding: 80px 0. Number: InterDisplay weight 700 at 96px, #ffffff, letter-spacing -0.025em. Label: InterVariable weight 400 at 15px, #94a3b8, max-width 480px centered. The dark section is the page's visual breather — it provides contrast to the white sections above and below.
Dashboard Product Card
Product screenshot, app previewBackground: #15171a (dark dashboard surface). Radius: 16px. Shadow: rgba(0,0,0,0.25) 0px 25px 50px -12px. Contains dark UI with purple-to-pink gradient area charts (#7c3aed → #ec4899). Sidebar navigation in #1f2937, data text in #ffffff and #94a3b8. The card sits on a white page, creating a window-into-the-product effect.
Feature Card
Feature grid item, content cardBackground: #ffffff. Border: 1px solid #e5e7eb. Radius: 8px. Padding: 24px. Shadow: rgba(0,0,0,0.1) 0px 10px 15px -3px. Title: InterDisplay weight 600 at 20px, #112220. Body: InterVariable 15px, #64748b. Minimal — no decorative icons inside, just text and generous whitespace.
Lime Highlight Link
Inline emphasis link, highlighted word in a sentenceNo background or border. Text color: #d1ff19 only when on dark surfaces (#15171a). On white backgrounds, lime is too low-contrast — use #112220 underline or #64748b. The lime link is a dark-surface only treatment — its job is to glow against black, not to be readable on white.
Text Input
Form input, email captureBackground: #ffffff. Border: 1px solid #cbd5e1. Radius: 8px. Padding: 12px 16px. Text: InterVariable 15px, #112220. Placeholder: #94a3b8. Focus: border-color #15171a, shadow rgba(0,0,0,0.1) 0px 0px 1px, rgba(0,0,0,0.03) 0px 2px 6px. No floating labels — labels sit above the input in InterVariable 14px weight 500, #334155.
Surfaces & elevation
Level 0
Paper
#ffffffPage canvas for all marketing sections
Level 1
Card
#ffffffIntegration icon tiles, feature cards — same white as canvas, distinguished by shadow and border
Level 2
Dark Panel
#15171aStats banner, product dashboard, dark feature sections
Level 3
Accent Surface
#d1ff19Lime button fills and highlight blocks
Primary Button
rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.03) 0px 2px 6px 0px
Integration Icon Tile
rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px
Feature Card
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
Elevated Card / Modal
rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
Layout & imagery
Layout
The page alternates between bright white editorial sections and dark product/stats bands in roughly 2:1 ratio. Hero opens with a centered announcement pill + massive 72–96px headline on white, followed by a full-width dark dashboard card spanning near the full page width with generous 48–64px vertical padding. Body sections use a centered max-width 1200px container with 680px text blocks for readability. The integrations section breaks the centered pattern — icons are scattered with rotation across the full width, with a centered text block beneath. The stats banner is full-bleed dark with centered white number. Navigation is a simple top bar: logo left, links center, CTA right, 64px height, white background with 1px #e5e7eb bottom border. No sidebar, no sticky header beyond the nav. Section transitions are seamless — no dividers or colored bands between white sections; the dark sections provide natural visual breaks.
Imagery
Imagery is split between two modes: product screenshots and brand icon collages. The dashboard preview appears as a dark rounded card (#15171a fill, 16px radius) with purple-to-pink gradient charts, embedded directly in the white marketing page as a window-into-the-product. Integration icons are scattered with rotation and offset positions — not gridded — giving the section a playful, organic arrangement that contrasts the rigid text alignment. No lifestyle photography appears; the product UI and brand logos are the visuals. App icons render in their native brand colors (Twitter blue, Instagram gradient, Slack purple, YouTube red) as small rounded tiles with subtle 4px 6px shadows. The overall density is text-dominant — visuals occupy roughly 20% of the page, type fills the rest.
Design notes
Agent Guide
**Quick Color Reference** - text: #112220 (headlines), #334155 (body), #94a3b8 (muted) - background: #ffffff (canvas), #15171a (dark sections) - border: #e5e7eb (hairlines), #cbd5e1 (inputs) - accent: #d1ff19 (dark-surface only) - announcement: #fec137 - primary action: no distinct CTA color **Example Component Prompts** 1. Create a hero section: white (#ffffff) background. Announcement pill above the headline: fill #fec137, text #112220, InterVariable weight 500 at 12px, padding 6px 16px, radius 9999px. Headline: InterDisplay weight 600 at 96px, #112220, letter-spacing -2.4px, line-height 0.90, centered. Subtext below at InterVariable 15px weight 400, #334155, max-width 680px, centered. 2. Create a dark stats banner: full-width background #15171a, padding 80px 0. Centered metric number: InterDisplay weight 700 at 96px, #ffffff, letter-spacing -2.4px. Label below: InterVariable 15px weight 400, #94a3b8, max-width 480px centered. 3. Create a dashboard product card: background #15171a, radius 16px, shadow rgba(0,0,0,0.25) 0px 25px 50px -12px. Inside: dark sidebar in #1f2937 with nav items in #94a3b8. Main panel: stat numbers in #ffffff, labels in #94a3b8, area chart with gradient from #7c3aed to #ec4899. 4. Create an integration icon tile: background #ffffff, padding 16px, radius 8px, shadow rgba(0,0,0,0.1) 0px 4px 6px -1px. Brand icon centered at 48px. Tiles are scattered with 4–8 degree rotation, not gridded. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
Similar brands
Substack
Same monumental sans-serif headlines at 72–96px on white canvas, same editorial confidence for a publishing audience, same generous vertical rhythm
Beehiiv
Same light-mode marketing pages with oversized Inter headlines, same near-black primary buttons with 24px radius, same publisher-focused visual language
Linear
Same Inter typography with tight letter-spacing on large headings, same achromatic backbone with a single chromatic accent, same product-card-embedded-in-marketing-page pattern
Notion
Same clean white canvas with one bold sans-serif display weight, same product screenshot treatment with rounded dark cards on white
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
