Design System

Color Tokens

All CSS custom properties used across the theme for consistent color application.

Semantic Colors

Status and feedback colors for success, warning, error, and informational states.

Surface Elevation

Background hierarchy from base canvas through elevated surfaces.

Typography

Code Block

Syntax-highlighted code block with editor chrome.

async function fetchResources(query) {
    // Fetch resources from the API
    const response = await fetch(`/api/resources?q=${query}`);
    const data = await response.json();
    return data.filter(item => item.active);
}

Buttons

All button variants used across the Beacon theme.

Ghost Card Buttons

Theme Components

Listing Cards

The primary card used to display resources, tools, and directory entries.

Raycast — The Launcher That Replaces 10 Apps

Premium

A blazing-fast macOS launcher with built-in clipboard history, snippets, window management, and an extensible store of community plugins.

Developer Tools · Productivity

Linear — The Issue Tracker Built for Speed

Members

A streamlined project management tool that developers actually enjoy using. Keyboard-first design, Git integration, and real-time sync.

Developer Tools · Productivity

Kitchen Sink — All Ghost Editor Elements

A comprehensive showcase of every Ghost editor element, from headings and lists to callouts, toggles, embeds, and code blocks.

Blog

Featured Resources

Featured card variant with accent badge and larger image.

Featured Premium

Raycast — The Launcher That Replaces 10 Apps

A blazing-fast macOS launcher with built-in clipboard history, snippets, window management, and an extensible store of community plugins.

Developer Tools · Productivity

Featured Members

Linear — The Issue Tracker Built for Speed

A streamlined project management tool that developers actually enjoy using. Keyboard-first design, Git integration, and real-time sync.

Developer Tools · Productivity

Category Cards

Category cards for browsing resources by topic.

AI Tools

Artificial intelligence tools and platforms for content creation, code generation, data analysis, and automation. The future of work is here.

5 resources

Blog

Articles and guides about building resource directories, curating content, and using Ghost CMS to its full potential.

6 resources

Design Resources

Curated design tools, UI kits, icon libraries, and prototyping platforms for designers and creative teams. Level up your design workflow.

5 resources

Developer Tools

Essential tools and platforms that help developers build, test, and deploy software faster. From IDEs to CI/CD pipelines, find the best developer tooling.

9 resources

Ghost Editor Cards

Every Ghost card type rendered inside the content wrapper to verify styling.

Image Cards

Regular Width

Wide Width

Full Width

With Caption

Gallery Card

Embed Cards

YouTube

Google Maps

Bookmark Card

Ghost — The Professional Publishing Platform

Ghost is a powerful app for professional publishers to create, share, and grow a business around their content. It comes with modern tools to build a website.

Ghost Foundation ghost.org

Callout Cards

💡

This is a tip callout. Use it to highlight important information and best practices for your readers.

⚠️

This is a warning callout for critical issues that require immediate attention.

✅

This is a success callout confirming that an action completed successfully.

📝

This is a note callout for general informational notes and reminders.

📎

This is a neutral callout for supplementary information and attachments.

Toggle Cards

What is a toggle card?

Toggle cards are collapsible content sections, perfect for FAQs. This content is hidden by default and revealed when the heading is clicked.

How do toggle cards work?

They use the data-kg-toggle-state attribute to track open/close state. A click handler in main.js toggles between open and close.

Button Card

Primary Button

Header Cards

Plain (Surface Background)

Small Header Card

With a subtitle line underneath

Background Image

Large Header Card

Full-width with background image

Audio Card

Sample Audio Episode — Season 1, Episode 1

0:00 12:34 1x

Video Card

0:00 / 8:24

File Card

Project Documentation.pdf

Download the complete project documentation

documentation.pdf

2.4 MB

Product Card

Premium Ghost Theme

A beautifully crafted theme for Ghost CMS with all the features you need to build a professional publication.

Buy Now — $99

Signup Card

Subscribe to our newsletter

Get the latest resources delivered to your inbox every week.

Subscribe

No spam. Unsubscribe anytime.

Content Elements

This is a standard blockquote. It should be visually distinct from regular text, with appropriate indentation, border, or background styling.

This is an alternative blockquote (aside/pull quote). Ghost uses this for the aside style, which should look different from the standard blockquote.

---

Unordered List

• First item in the list
• Second item with a link inside
• Third item with bold and italic

Ordered List

1. First ordered item
2. Second ordered item
3. Third ordered item

Table

Feature	Free	Pro	Enterprise
Posts	10	Unlimited	Unlimited
Members	100	10,000	Unlimited
Custom Domain	---	Yes	Yes
Priority Support	---	---	Yes

Portal & Membership

Sign In Form

Sign Up Form

Magic Link Confirmation

Newsletter Subscription

Pricing Tiers

Content Gate

Content gating states shown when a visitor doesn't have access to a post.

Member Account States

Nav — Logged out

Sign in Sign up

Nav — Logged in

Jane Doe

Sign out

Sign out

Portal Trigger Links

Custom Interactions

Table of Contents

Scroll Reveal

Share Links

Carousel

CSS scroll-snap horizontal gallery with touch-friendly scrolling.

Pagination

Theme-Specific Interactions

Page Templates

All custom page templates available in this theme.