Design System

Color Palette

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

Surface Elevation

Background hierarchy from base canvas through elevated surfaces.

Typography

Code Block

Syntax-highlighted code block with editor chrome.

const config = {
    theme: 'simplicity',
    version: '1.0.0',
    fonts: {
        heading: 'Inter',
        body: 'Inter',
        mono: 'JetBrains Mono'
    }
};
// Export for theme initialization
export default config;

Buttons

All button variants used across the Simplicity theme.

Theme Components

Service Cards

Numbered service cards displayed on the homepage, populated via pages tagged with #service.

Strategic Business Consulting

Transform your business with data-driven strategy consulting. Meridian helps companies identify growth opportunities and build sustainable competitive advantages.

Digital Transformation Services

Modernize your operations with our digital transformation consulting. We help businesses adopt the right technology stack and workflows for sustainable growth.

Operations Excellence Consulting

Streamline your business operations for maximum efficiency. Our operational consulting identifies bottlenecks, reduces waste, and improves team productivity.

Data Analytics and Business Intelligence

Turn your data into actionable insights. Our analytics consulting helps businesses make better decisions through modern BI tools and custom dashboards.

Post Cards

Post listing cards used on archive and tag pages.

Tag Cards

Tag cards used for category browsing and topic navigation.

Contact Card

Contact information card used on the homepage contact section.

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.

Ghost Foundation ghost.org

Callout Cards

💡

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

⚠️

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.

Toggle Cards Interactive

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. Ghost's cards.min.js handles the interactivity.

Button Card

Primary Button

Header Cards

Accent Background

Small Header Card

With a subtitle line underneath

Background Image

Large Header Card

Full-width with background image

Audio Card Static

Sample Audio Episode — Season 1, Episode 1

0:00 12:34 1x

Video Card Static

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 updates delivered to your inbox.

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.

---

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 does not have access.

State: Not logged in

Shown to anonymous visitors who are not signed in. Prompts them to subscribe or sign in.

State: Needs upgrade

Shown to free members who try to access paid content. Prompts them to upgrade their plan.

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 Static

For long-form posts, a table of contents is auto-generated from h2/h3 headings. The active heading highlights as the user scrolls.

Scroll Reveal Animation Static

Share Links Interactive

Carousel Interactive

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

Pagination Static

Page Templates

All .hbs template files at theme root. Custom templates are routed via routes.yaml, core templates are used by Ghost automatically.