Launchpad

Component Showcase

A reference of all UI components, patterns, and styles used throughout the theme.

Design System

Color tokens, surface elevation, typography specimens, code blocks, and buttons.

Color Tokens

All CSS custom properties that define the Launchpad color system.

--bg
--bg-elevated
--bg-card
--text
--text-secondary
--text-inverse
--accent
--accent-hover
--accent-gradient
--accent-subtle
--accent-subtle-border
--success
--success-subtle
--warning
--error
--info
--border
--border-light

Surface Elevation

Dark surfaces get progressively lighter to convey depth and hierarchy.

--bg (base)
--bg-elevated
--bg-card
--border (highest)

Typography

Space Grotesk for headings, Inter for body text, JetBrains Mono for code.

HERO Space Grotesk 700 clamp(2.5rem, 5vw, 4rem) / 1.25

Hero Heading Sample

H2 Space Grotesk 700 clamp(1.75rem, 3vw, 2.25rem) / 1.25

Section Heading Sample

H3 Space Grotesk 700 clamp(1.25rem, 2vw, 1.5rem) / 1.25

Subsection Heading Sample

H4 Space Grotesk 700 1.125rem / 1.25

Label Heading Sample

BODY Inter 400 1rem / 1.6

Good typography is invisible. When readers are absorbed in your content, they should not notice the typeface, the line spacing, or the margins. Every design decision has been calibrated to keep the focus on your words.

SMALL Inter 400 0.875rem / 1.5
This is small text used for captions, timestamps, and metadata.
MONO JetBrains Mono 400 0.9em / 1.6

const api = new GhostContentAPI({ url, key, version });

INLINE Various

Bold text, italic text, linked text, and inline code.

Code Block

Syntax-highlighted code with editor chrome, using JetBrains Mono.

api-client.js 
import GhostContentAPI from '@tryghost/content-api';

// Initialize the Ghost Content API client
const api = new GhostContentAPI({
    url: 'https://demo.ghost.io',
    key: '22444f78447824223cefc48062',
    version: 'v5.0'
});

async function fetchPosts(page = 1) {
    const posts = await api.posts.browse({
        limit: 10,
        page,
        include: 'tags,authors'
    });
    return posts;
}

Buttons

All button variants used across the theme.

Primary Button Secondary Button Upgrade Subscribe Now

Theme Components

Post cards, feature cards, category cards, changelog entries, and pricing cards.

Post Cards

Post cards rendered with real content via the post-card partial.

Feature Cards

Feature highlight cards used on the homepage and landing pages.

Kitchen Sink: Every Ghost Editor Element

A comprehensive demonstration of every Ghost editor element — headings, text formatting, images, code blocks, callouts, tables, and more.

The Complete Guide to Ghost Membership for SaaS Companies

Everything you need to know about using Ghost's membership system to drive SaaS signups — setup, tiers, gating strategies, and product integration.

Category Cards

Tags rendered as browsable category cards.

Blog

Insights on SaaS, AI, startup growth, and the future of developer tools.

Company

Team updates, culture insights, funding news, and the story behind building NeuralFlow.

Engineering

Deep dives into our technical architecture, infrastructure decisions, and engineering culture at NeuralFlow.

Product Updates

New features, improvements, and releases from the NeuralFlow team. Stay up to date with the latest product developments.

Changelog Entry

Timeline-style changelog entries used on the /changelog/ page.

Pricing Cards

Tier cards with monthly/yearly toggle, used on the pricing page.

Most Popular

Pro

Full access for professional developers

$19 / Per month $190 / Per year
  • Everything in Free tier
  • Premium technical deep-dives
  • Early access to new features
  • Advanced pipeline templates
  • Priority email support
  • 100,000 API calls per day
  • Custom model deployment
Get Started

Ghost Editor Cards

All 14 Ghost card types rendered inside the theme content wrapper.

Image Cards

Regular Width

A busy co-working space with developers at their desks

Wide Width

Close-up of a laptop displaying code on screen

Full Width

Aerial view of a data center at night with glowing blue lights

With Caption

Server room with rows of network equipment
A modern server room — the backbone of cloud infrastructure. Photo by Unsplash.
Team collaborating around a whiteboard
Designers reviewing wireframes on a monitor
Group of people brainstorming with sticky notes
Person typing on a mechanical keyboard
Dual monitor setup with code editor open

Embed Cards

YouTube Embed

YouTube embed — responsive 16:9 aspect ratio

Google Maps Embed

Google Maps embed — Eiffel Tower, Paris

Bookmark Card

Ghost: The Creator Economy Platform
Turn your audience into a business. Publishing, memberships, and newsletters — all in one place. Used by creators and journalists worldwide to build independent media companies.
Ghost Ghost Foundation ghost.org
Ghost platform preview

Callout Cards

💡
Tip: You can use keyboard shortcuts to speed up your workflow. Press Ctrl+Shift+P to open the command palette and access any action instantly.
⚠️
Warning: Changing your database schema without a migration script can cause data loss. Always back up before running destructive operations.
✅
Success: Your deployment completed in 12 seconds. All health checks passed and the new version is live.
📝
Note: This feature is currently in beta. The API surface may change before the stable release.
📎
Reference: For full API documentation, see the developer guide. All endpoints follow REST conventions and return JSON by default.

Toggle Cards

How do I reset my password?

Navigate to the login page and click "Forgot password." Enter the email address associated with your account. You will receive a link to create a new password within a few minutes. If you do not see the email, check your spam folder.

Can I cancel my subscription at any time?

Yes. You can cancel your subscription from your account settings at any time. Your access will continue until the end of your current billing period. No partial refunds are issued, but you will not be charged again after cancellation.

Button Card

Start Your Free Trial

Header Cards

Plain (Surface Background)

Stay up to date

Get the latest product news and engineering insights delivered weekly.

Background Image

Launch your next big idea

From prototype to production in record time.

Audio Card

Audio episode thumbnail
Episode 12: Scaling Your Infrastructure
0:00
24:36

Video Card

Video placeholder
0:00 3:42

File Card

Launchpad Brand Guidelines v2.1
Complete brand assets including logo usage, color palette, and typography specifications.
PDF — 4.2 MB

Product Card

Wireless noise-cancelling headphones

Launchpad Pro Headphones

Premium wireless headphones with active noise cancellation, 40-hour battery life, and studio-quality audio. Designed for marathon coding sessions and deep focus work.

Buy Now — $299

Signup Card

Content Elements

The best way to predict the future is to invent it. Good design is as little design as possible — less, but better, because it concentrates on the essential aspects.

This is an aside-style blockquote. Use it for tangential thoughts, editorial notes, or supplementary commentary that enriches the main narrative without interrupting its flow.

  • Unordered list item one
  • Unordered list item two with a longer description that might wrap onto a second line
  • Unordered list item three
  1. First ordered item
  2. Second ordered item with extra detail to show wrapping behavior
  3. Third ordered item
Feature Free Plan Pro Plan Enterprise
Team Members Up to 3 Up to 25 Unlimited
Storage 5 GB 100 GB 1 TB
API Access Read-only Full access Full + webhooks
Support Community Priority email Dedicated CSM

Portal & Membership

Authentication flows, subscription forms, pricing, content gating, and account states.

Sign In Form

Welcome back

Enter your email to receive a magic link.

Don't have an account yet? Sign up

Sign Up Form

Create your account

Start building today

Already have an account? Sign in

Check your inbox

We sent a login link to your email. Click the link to sign in — no password needed.

Newsletter Subscription

Standalone Newsletter Form

Pricing Tiers

Dynamic tiers from Ghost, with static fallback for demo.

Free

Get started with NeuralFlow basics

Free
  • Access to all blog posts and tutorials
  • Weekly newsletter with AI insights
  • Community Discord access
  • 1,000 API calls per day
Sign up

Pro

Full access for professional developers

$19 / month
  • Everything in Free tier
  • Premium technical deep-dives
  • Early access to new features
  • Advanced pipeline templates
  • Priority email support
  • 100,000 API calls per day
  • Custom model deployment
Subscribe

Content Gate

Shown when a visitor lacks access to a post. Two states demonstrated.

State 1: Not logged in

This article is for subscribers

Subscribe to get access to premium content and support independent publishing.

Subscribe Now

Already a member? Sign in

State 2: Logged in, needs upgrade

Unlock the full article

Upgrade your account to access all content and features.

View Plans

Member Account States

How the header navigation adapts based on authentication state.

Logged Out

Logged In

Jane Doe Member avatar Account

Sign Out

Sign out

Buttons that open Ghost Portal modals via data-portal attributes.

Portal: Sign up Portal: Sign in Portal: Account Portal: Plans Portal: Recommendations

Custom Interactions

Theme-specific JS-driven components and interaction patterns.

Table of Contents

Post content area

The TOC sidebar appears alongside long-form content. It scans h2/h3 headings and builds a navigable list with scroll-spy highlighting. Progress bar tracks reading position through the article.

Scroll Reveal

Elements with class .reveal fade in when they enter the viewport. Uses IntersectionObserver with threshold: 0.1.

Before (hidden)
After (visible)

CSS scroll-snap horizontal gallery.

SaaS dashboard showing real-time analytics
Real-time analytics dashboard for SaaS metrics
Revenue data visualization chart
Revenue growth visualization — Q4 2025
Engineering team at daily standup
Engineering team daily standup
Product launch live demo event
Product launch event — live demo

Pagination

Theme-Specific Interactions

Pricing Toggle (Monthly / Yearly)

The pricing page includes a monthly/yearly toggle. Clicking "Yearly" adds .show-yearly to the pricing grid, which swaps .pricing-monthly and .pricing-yearly visibility.

Glass-Morphism Header

The site header uses backdrop-filter: blur(12px) with a semi-transparent background (rgba(10, 10, 11, 0.8)). On scroll, it increases opacity to 0.95 and hides on scroll-down / reveals on scroll-up using requestAnimationFrame.

Reading Progress Bar

A gradient progress bar tracks how far the reader has scrolled through post content. It uses the accent gradient and is positioned fixed at the top of the viewport.

Page Templates

Sign In

Magic link email authentication form.

custom-signin.hbs

Sign Up

Registration with plan selection and account creation.

custom-signup.hbs

Account

Member dashboard with subscription management.

custom-account.hbs

Blog

Blog post feed with card grid layout.

custom-blog.hbs

Changelog

Timeline-style product update log.

custom-changelog.hbs

Pricing

Pricing page with monthly/yearly toggle.

custom-pricing.hbs

Full Width

Page layout without sidebar, edge-to-edge content.

custom-full-width.hbs No demo available

Tag Archive

Posts filtered by tag with description header.

tag.hbs

Author Archive

Author profile with bio and post grid.

author.hbs

404 Error

Custom page not found error with navigation.

error-404.hbs