Neon Documentation

1. Download the neon.zip file from your purchase confirmation email.
2. In Ghost Admin, go to Settings → Design → Change theme.
3. Click Upload theme and select the zip file.
4. Once uploaded, click Activate.

After activating Neon, complete these essential setup tasks:

1. Set your site title and description — Settings → General.
2. Upload a logo — Settings → Design → Brand. Recommended: SVG or PNG, max height 40px. Light/white logos work best on the dark background.
3. Configure navigation — Settings → Navigation.
4. Create tags — Tags are used to generate topic sections on the homepage (e.g., Design, Technology, Culture).
5. Set up membership — Settings → Membership to enable subscribe forms.
6. Configure the hero section — Settings → Design → Custom → Homepage → show_hero_section.

Neon uses three font families:

• Headings: Anton (sans-serif) — bold, condensed display font for maximum impact.
• Body: Instrument Serif (serif) — elegant reading font with distinctive character.
• UI elements: DM Sans (sans-serif) — clean, modern interface font for navigation, buttons, and metadata.

You can override the heading and body fonts via Ghost's custom font picker in Settings → Design → Brand → Typography. Neon respects Ghost's --gh-font-heading and --gh-font-body CSS variables.

Configure your site navigation in Settings → Navigation.

Primary Navigation

Appears in the site header. Recommended: 2–4 items to keep the header clean.

Topics Dropdown

The header includes a Topics dropdown that lists your top tags (sorted by post count). Each item shows the tag name with a #hashtag label. This is fully dynamic — no configuration needed, just create tags and assign posts to them.

Secondary Navigation

Appears in the site footer. Use this for links like Privacy Policy, Terms, Contact, etc.

Set your site title in Settings → General → Title & description. The title appears in the header when no publication logo is uploaded, and is also used in the subscribe CTA, footer, and browser tab.

Neon supports two image types in Settings → Design & branding → Customize:

Publication Logo

When set, the logo replaces the site title text entirely in the header. Use this for a full wordmark or custom logo.

• Recommended format: SVG or PNG with transparency.
• Recommended max height: 40px for best header fit.
• Use a light or white logo for contrast against the dark background.

Publication Icon

When set (and no logo is uploaded), the icon displays next to the site title text. Use this for a small square mark or favicon-style icon (e.g., a monogram, symbol, or orb).

• Recommended: 60×60px square, SVG or PNG.
• Also used as the browser favicon.

Behavior Summary

Logo	Icon	Header Shows
Set	Any	Logo image only
Not set	Set	Icon + site title text
Not set	Not set	Site title text only

Ghost supports Facebook and X/Twitter links in Settings → General → Social accounts. These are displayed in the footer.

The hero section features a large gradient-animated title, a subtitle, and a pill-shaped email subscribe form.

Toggle Hero Visibility

Show or hide the hero via Settings → Design → Custom → Homepage → show_hero_section (default: enabled).

Customizing Hero Content

All hero text is configurable from Settings → Design → Custom → Homepage:

Setting	Description	Fallback
hero_label	Small uppercase label above the title	Hidden if empty
hero_title	Main heading with gradient text	Site title
hero_description	Subtitle text below the heading	Site description

Below the hero, the homepage displays a featured section with two parts:

• Featured card — A large card showing the latest featured post with a "NEON" watermark text overlay, feature image, title, excerpt, and reading time.
• Recent posts sidebar — A numbered list of recent posts (1, 2, 3...) displayed alongside the featured card.

To set a post as featured:

1. Open the post in Ghost Editor.
2. Click the settings icon (gear) in the top right.
3. Toggle Feature this post on.

The most recently published featured post appears in the featured card. Make sure it has a feature image set for the best visual result.

The homepage groups posts by tag into topic sections. Each section displays:

• #hashtag label with the tag name.
• Topic navigation pills for quick filtering.
• Posts from that tag with title, excerpt, and metadata.
• A #featured sidebar highlighting key posts.

Sections appear dynamically for each of your primary tags. To control which tags appear, create tags in Ghost Admin → Tags and assign posts to them.

Neon includes a social proof section with:

• "As featured in" logos — Press/publication logos displayed in a horizontal row.
• Stats text — A single line of trust-building text (e.g., "Trusted by thousands of readers").
• Testimonial cards — Up to 3 testimonials with quotes and author names.

Configuring "As Featured In" Logos

Go to Settings → Design → Theme → Homepage:

• featured_in_label — The heading text above logos (default: "As featured in"). Leave empty to hide the label.
• featured_in_logo_1 through featured_in_logo_5 — Upload up to 5 brand/press logos (SVG or PNG recommended).

Configuring Stats Text

• stats_text — The trust line displayed above testimonials (e.g., "Trusted by thousands of readers · Published weekly · Free & paid tiers").

Configuring Testimonials

Go to Settings → Design → Theme → Homepage:

• testimonial_1_quote / testimonial_1_author — First testimonial.
• testimonial_2_quote / testimonial_2_author — Second testimonial.
• testimonial_3_quote / testimonial_3_author — Third testimonial.

A subscribe call-to-action appears at the bottom of the homepage (visible to non-members only). It includes:

• Site title as heading ("Subscribe to [Site Name]").
• Description text.
• Pill-shaped email input + subscribe button matching the hero form style.

This section is automatically hidden for signed-in members.

Each post page includes:

• Primary tag label with published date and reading time.
• Post title and excerpt.
• Author name with avatar.
• Feature image (container-width with rounded corners).
• Post content (680px max-width for comfortable reading).
• Tag pills at the bottom.
• Author card with bio.
• Previous/Next post navigation.

Reading time is displayed next to the date on post pages. To toggle it:

Settings → Design → Custom → Post → Show reading time

Set to false to hide reading time from all posts.

1. Go to Settings → Membership.
2. Choose your access model: free, paid, or both.
3. For paid tiers, connect Stripe in Settings → Membership → Stripe.

Once membership is enabled, Neon automatically shows:

• Subscribe button in the header.
• Sign in link in the header.
• Subscribe forms in the hero and CTA sections.
• Account link for signed-in members (replaces Subscribe/Sign in).

Neon includes a custom paywall system with distinctive styling for the dark theme:

1. Post page paywall

When a reader doesn't have access to a gated post, Neon shows:

• A custom lock icon styled with the purple accent gradient.
• A paywall card with title, description, and a subscribe form with the pill-shaped email input.

The paywall adapts based on the reader's membership status:

• Non-members see a "Subscribe now" button that opens the Ghost signup portal.
• Free members see an "Upgrade your plan" button that links to account plan settings.

2. Visibility badge on post listings

Gated posts display a "Paid" text badge next to the reading time on the homepage and archive pages. This helps readers identify members-only or paid content at a glance.

3. How to gate a post

1. Open any post in the Ghost editor.
2. Click the settings gear (top right).
3. Under "Post access", select:
   • Public — No paywall, visible to everyone. No badge.
   • Members only — Free and paid subscribers can read. "Paid" badge shown.
   • Paid members only — Only paid subscribers can read. "Paid" badge shown.

No theme code changes are needed per post — the same template handles all visibility levels automatically.

Each tag has an archive page at /tag/[slug]/. It displays:

• Tag name with #hashtag styling and description.
• All posts tagged with that tag, paginated.

Customize tag metadata in Ghost Admin → Tags → [Tag name]. Add a description to give context on the archive page.

Each author has a page at /author/[slug]/ showing their avatar, bio, and all their posts.

Update author information in Settings → Staff → [Author name].

All colors are defined as CSS variables on :root. Neon uses a dark palette with purple/pink accents.

Variable	Value	Use
--color-bg	#0a0a14	Page background
--color-bg-secondary	#111122	Section backgrounds, cards
--color-text	#F0F0F5	Primary text
--color-text-secondary	rgba(240,240,245,0.7)	Body text, descriptions
--color-text-tertiary	rgba(240,240,245,0.4)	Metadata, captions
--color-accent	#944DD6	Buttons, CTAs, gradient accents
--color-accent-hover	#7B3AB8	Button hover states
--color-link	#C77DFA	Inline links, read-more links
--color-link-hover	#D9A5FF	Link hover states
--color-border	rgba(30,30,48,0.3)	Dividers, card borders
--color-surface-card	#1a1a2e	Card backgrounds

Variable	Default	Use
--font-heading	'Anton', sans-serif	All headings (h1–h6), hero title
--font-body	'Instrument Serif', Georgia, serif	Body text, excerpts
--font-ui	'DM Sans', system-ui, sans-serif	Navigation, buttons, metadata, labels

Variable	Value	Use
--container-max	1200px	Maximum width of content container
--content-max	680px	Maximum width of article text
--radius-sm	4px	Small border radius (tags, badges)
--radius-md	8px	Medium border radius (cards, inputs)
--radius-lg	12px	Large border radius (feature images)
--radius-xl	16px	Extra large border radius (paywall)

Override any variable via Settings → Code Injection → Site Header:

Change accent color to cyan

<style>
:root {
    --color-accent: #06b6d4;
    --color-accent-hover: #0891b2;
    --color-link: #67e8f9;
    --color-link-hover: #a5f3fc;
}
</style>

Change the background tone

<style>
:root {
    --color-bg: #0d1117;
    --color-bg-secondary: #161b22;
    --color-surface-card: #21262d;
}
</style>

Use custom fonts

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
    --font-heading: 'Space Grotesk', sans-serif;
}
</style>

Widen the content area

<style>
:root {
    --content-max: 760px;
    --container-max: 1400px;
}
</style>

Add custom CSS or JavaScript via Settings → Code injection. This is the recommended way to customize your theme without editing source files. See the Design System section above for all available CSS variables you can override.

Example: Disable scroll-reveal animations

<style>
.reveal { opacity: 1 !important; transform: none !important; }
</style>

Example: Hide "Powered by Ghost" in footer

<style>
.gh-foot-meta { display: none; }
</style>

By default, Neon shows 10 posts per page. To change this, you need to edit the theme's package.json file:

1. Download the theme zip from Ghost Admin.
2. Extract and edit package.json.
3. Change "posts_per_page": 10 to your desired number.
4. Re-zip and upload the theme.

Neon supports Ghost's native commenting system. Enable it in Settings → Membership → Commenting.

Options:

• Off — No comments.
• All members — Free and paid members can comment.
• Paid members only — Only paid subscribers can comment.

Neon ships with full translation support. All user-facing UI strings use Ghost's {{t}} helper and are defined in locales/en.json.

How to translate Neon

1. Download and extract the theme zip.
2. Open locales/en.json to see all translatable strings.
3. Create a new file for your language, e.g. locales/fr.json for French, locales/de.json for German.
4. Copy the contents of en.json and translate the values (right side) while keeping the keys (left side) unchanged.
5. Set your site language in Settings → General → Publication language (e.g., fr for French).
6. Re-zip and upload the theme.

Example (French)

{
  "Subscribe": "S'abonner",
  "Sign in": "Se connecter",
  "Read more": "Lire la suite",
  "Previous": "Précédent",
  "Next": "Suivant"
}

Translatable strings

Neon includes translations for: navigation labels (Subscribe, Sign in, Account), post navigation (Previous, Next), paywall text, subscribe forms, error pages, member pages (signup, signin, account), and more. See locales/en.json for the complete list.

You can set up automatic theme deployment using GitHub Actions. When you push theme changes to your repository, the workflow builds, zips, and uploads the theme to your Ghost instance via the Admin API.

Requirements:

• A Ghost Admin API key (Settings → Integrations → Add custom integration).
• Store the key as a GitHub secret (e.g., GHOST_ADMIN_API_KEY).

See the Ghost Theme Docs for more details on the Admin API.