Ghost — High-Contrast Publisher Product Story

---
version: alpha
name: Ghost — High-Contrast Publisher Product Story
colors:
  ink: '#112220'
  paper: '#FFFFFF'
  muted: '#64748B'
  primary: '#D1FF19'
typography:
  heading:
    fontFamily: InterDisplay, sans-serif
    fontSize: 96px
    fontWeight: 700
    lineHeight: 96px
  body:
    fontFamily: InterDisplay, sans-serif
    fontSize: 48px
    fontWeight: 700
    lineHeight: 64.8px
---

## Overview
An expansive publishing-platform landing page with a tightly set oversized headline, dark dashboard hero, alternating white and navy feature chapters, animated product previews, and a bright lime closing action. Inspected on 2026-09-30 at 1440px and 390px widths. This is a full-page or complete initial-screen reference, not an isolated component crop. Native-resolution vertical viewport stitch after warm-up, preserving observed scroll-driven content. Subsequent tiles exclude the repeated sticky navigation area. No DOM/CSS content modifications.

## Colors
The token values above are measured opaque CSS text, surface or action colors. Transparent roots inherit their surrounding surfaces and are not treated as measured white. Artwork and logo colors remain source-specific rather than universal tokens.

## Typography
The selected heading/label sample uses InterDisplay, sans-serif, 96px / 96px, weight 700; the corresponding mobile sample is 25.35px. Supporting text sample is 48px / 64.8px. Preserve the hierarchy rather than assuming every paragraph uses the same size. Computed font stacks do not grant font licenses; choose licensed equivalents when adapting.

## Layout
At 1440px the hero headline is 96px with 96px leading, centered above a near-full-width dashboard. Feature chapters alternate side-by-side copy and large product artwork. At 390px the headline is 25.35px, navigation becomes a menu control, and feature copy and previews stack. Desktop chapter gutters are generally 24px; mobile chapter gutters are 16px. Preserve the deliberate shift from spacious white introduction to dark product scenes. Measured outer document/component bounds: 1440 × 14893px desktop; 390 × 10306px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
Product previews float with restrained soft shadows, while the dark sections create depth through large tonal planes. Avoid applying a card shadow to every paragraph.

## Shapes
Use squared chapter boundaries, gently rounded application previews, and compact rounded navigation controls. A bright pill announces the release above the headline.

## Components
Header navigation, oversized statement, dashboard demonstration, theme gallery, editor/newsletter preview, membership signup demonstration, analytics features, integration icons, publication examples, closing CTA and multi-column footer. Product figures and testimonials are source artwork, not independent verification of performance.

## Do's and Don'ts
Do preserve the observed reading order, contrast, spacing and responsive emphasis. Do supply keyboard focus, meaningful labels and reduced-motion alternatives in an implementation. Do not copy source testimonials, brand assets or performance claims as your own. Do not infer successful submission, hidden validation, hover or authentication behavior from resting screenshots.