Skip to content

Component Showcase

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

Design System

Everything that defines the Ledger visual language — colors, typography, surfaces, and interactive elements.

Color Tokens

--color-bg#0B1120
--color-surface-1#111827
--color-surface-2#1E293B
--color-surface-3#334155
--color-text-primary#F1F5F9
--color-text-secondary#94A3B8
--color-text-tertiary#64748B
--color-accent-solid#3B82F6
--color-accent-hover#2563EB
--color-ticker-up#10B981
--color-ticker-down#EF4444
--color-warning#F59E0B
--color-premium-gold#D97706

Surface Elevation

Base canvas
Cards, elevated surfaces
Nested surfaces, code blocks
Hover states, active surfaces

Typography

H1 Newsreader 700 2.75rem / 1.2

Market Analysis Heading

H2 Newsreader 700 2.25rem / 1.2

Section Heading

H3 Newsreader 600 1.875rem / 1.2

Subsection Heading

H4 Newsreader 600 1.5rem / 1.2

Card Title Heading

BODY Inter 400 1.125rem / 1.7

The Federal Reserve's latest decision on interest rates has significant implications for both equity and fixed-income markets. This analysis explores the potential outcomes.

SMALL Inter 400 1rem / 1.5

Apr 8, 2026 · 8 min read · John Smith

DATA JetBrains Mono 500 1rem / 1.5

+2.34%   -1.67%   $4,892.15   1,234,567

INLINE Bold, italic, link, code

Bold text, italic text, linked text, inline code

Code Block

portfolio.js
function calculateReturns(portfolio) {
    const totalValue = portfolio.reduce((sum, position) => {
        return sum + position.shares * position.currentPrice;
    }, 0);

    const totalCost = portfolio.reduce((sum, position) => {
        return sum + position.shares * position.avgCost;
    }, 0);

    return {
        value: totalValue,
        gain: totalValue - totalCost,
        returnPct: ((totalValue - totalCost) / totalCost * 100).toFixed(2)
    };
}

Buttons

Theme Components

Real content rendered through theme partials using Ghost data queries.

Post Cards

Category Cards

Data Table

Ticker Price Change Volume
AAPL $198.45 +2.34% 48.2M
MSFT $412.78 -0.87% 22.1M
GOOGL $175.23 +1.45% 31.5M
AMZN $187.92 -1.23% 55.8M
NVDA $892.15 +4.56% 62.3M

Author Credibility Card

FN

10+ Years
500+ Reports
87% Accuracy
2.4K Subscribers

Disclosure: The information provided is for educational and informational purposes only and does not constitute financial advice. Past performance is not indicative of future results.

Ghost Editor Cards

All Ghost editor card types rendered with theme styles.

Image Cards

Regular image — trading dashboard
Regular image — standard content width
Wide image with caption — market data visualization
Wide image with caption — market data visualization
Full-bleed image — panoramic chart view
Full-bleed image — extends beyond content column

Embed Cards

YouTube embed — How The Economic Machine Works (Ray Dalio)
Google Maps embed

Bookmark Card

Ghost: The Creator Economy Platform
The world's most popular modern publishing platform for creating a new media business. Used by Apple, Stripe, and the BBC.

Callout Cards

Tip: Use CSS custom properties for consistent theming.
Warning: This content requires a paid membership.
Success: Your subscription has been activated.
Note: This article was updated to reflect the latest data.
Reference: See the methodology section for data sources.

Toggle Cards

What data sources does Ledger support?

Ledger works with any data you include in Ghost posts. Tables with financial data are automatically styled with alternating rows and monospace numbers.

How do I customize the accent color?

Go to Ghost Admin > Settings > Design > Brand. Change the accent color and it will propagate through all CSS custom properties.

Button Card

Header Cards

Plain (surface background)

Market Intelligence

Data-driven insights for the modern investor.

Accent gradient background

Weekly Research Brief

Premium analysis delivered every Monday morning

Background image + CTA button

Deep Analysis

Understanding market dynamics through rigorous research

Start Reading

Audio Card

Static Mockup

Episode 12: Market Outlook Q2 2026
12:45 / 36:20

Video Card

Native video player (static mockup with poster)

Ghost's native video card with poster image and playback controls

File Card

Product Card

Market Analysis Toolkit

Market Analysis Toolkit

★★★★☆
4.0

Professional-grade research templates with data tables, chart placeholders, and disclosure sections. Built for serious financial analysis.

Signup Card

Content Elements

The best way to predict the future is to study the past. Markets are cyclical — understanding patterns gives you an edge.


  • Fundamental analysis frameworks
  • Technical indicator methodologies
  • Portfolio risk management strategies
  1. Define the investment thesis
  2. Analyze financial statements and metrics
  3. Evaluate risk-reward and make allocation decisions
Ticker Price Change Volume
SPY$523.45+0.82%78.4M
QQQ$441.23+1.15%45.2M
IWM$198.67-0.34%28.9M

Portal & Membership

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

Sign In Form

Welcome back

Sign in to your account with a magic link — no password needed.

Don't have an account? Sign up

Sign Up Form

Create your free account

Get access to free research, newsletters, and more.

Already have an account? Sign in

Newsletter Subscription

Get Our Research Delivered Weekly

Free market analysis, every Monday morning.

Join 5,000+ investors. Unsubscribe anytime.

Standalone Newsletter Form

Minimal form with newsletter targeting.

Pricing Tiers

Free

$0 per month
  • All free research articles
  • Weekly market pulse newsletter
  • Quarterly market reviews
Get Started
Most Popular

Premium Research

$29 per month
  • Deep-dive investment research
  • Real-time trade alerts
  • Model portfolio updates
  • Monthly live Q&A
  • Earnings season analysis
  • Exclusive macro outlook reports
Subscribe Now

Content Gate

Content Gate — Logged Out

This is a preview of the gated content. The text fades out and a paywall CTA appears below...

This research is for premium subscribers

Subscribe for full access to our market analysis and investment research.

View Plans Sign in

Content Gate — Needs Upgrade

This is a preview of paid content. The member needs to upgrade their plan to access the full article...

Upgrade to premium for full access

Your current plan does not include access to this research. Upgrade to unlock.

Upgrade

Member Account States

Logged Out

Sign in Subscribe

Logged In (Free)

Your account

Custom Interactions

Theme-specific JavaScript-driven components and interactive features.

Table of Contents

Visual Demo

The TOC sidebar appears alongside long-form content. It scans h2/h3 headings and builds a navigable list with scroll-spy highlighting.

Scroll Reveal

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

Before (hidden)

opacity: 0; transform: translateY(20px);

After (visible)

opacity: 1; transform: translateY(0);

Pagination

Page Templates

Page Template Previews