Subscribe

Component Showcase

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

Design System

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

Color Tokens

--bg #080808
--bg-elevated #121212
--card-bg #141414
--text #F0F0F0
--text-secondary #8A8A8A
--accent var(--ghost-accent-color)
--accent-hover accent 80% + white
--accent-subtle accent 80% + black
--accent-light accent 10%
--accent-glow accent 25%
--border #1E1E1E
--code-bg #0E0E18
--code-text #D4D4D8
badge-premium #f6d365 → #fda085
badge-members #7C3AED → #a78bfa
--success #10B981
--warning #F59E0B
--error #EF4444
--info #3B82F6

Surface Elevation

--bg Base canvas
--bg-elevated Auth cards, modals
--card-bg Post cards, CTA boxes
--code-bg Code blocks

Typography

HERO / H1 Playfair Display 900 clamp(2rem, 4.5vw, 3rem) / 1.15

The Future of AI

H2 Playfair Display 700 2rem / 1.25

Section Heading

H3 Playfair Display 700 1.5rem / 1.25

Subsection Heading

H4 Playfair Display 700 1.25rem / 1.25

Detail Heading

BODY Inter 400 1.125rem / 1.7

Body text rendered in Inter. Optimized for long-form editorial reading with generous line-height and careful letter-spacing. Antialiased for dark backgrounds.

SMALL / CAPTION Inter 400 0.875rem / 1.5

Caption text for metadata, dates, and secondary information displayed throughout the interface.

MONO / CODE JetBrains Mono 400 0.9rem / 1.7

const theme = 'cortex'; // monospace specimen

LABEL JetBrains Mono 400 0.6875rem / uppercase 0.15em
> Section Label Specimen
INLINE Bold, italic, link, code

Bold text, italic text, hyperlink, and inline code

Code Block

cortex.config.js 
// Cortex Theme Configuration
import { defineConfig } from '@ghost/theme-sdk';

export default defineConfig({
  name: 'cortex',
  typography: {
    heading: 'Playfair Display',
    body: 'Inter',
    mono: 'JetBrains Mono'
  },
  darkMode: true,
  features: ['toc', 'membership', 'search']
});

Buttons

Subscribe (Primary) CTA Button Gradient Button Premium Members Featured
Theme Components

Real content rendered through theme partials using Ghost data queries.

Post Cards

Category Cards

Artificial Intelligence
Artificial Intelligence

Machine learning, neural networks, LLMs, and the systems reshaping how we build software and understand data.

posts
Infrastructure
Infrastructure

Cloud platforms, containers, CI/CD, observability, and the plumbing that keeps modern applications running.

posts
Product & Strategy
Product & Strategy

Product thinking, startup lessons, business models, and strategic decisions at the intersection of technology and markets.

posts
Software Engineering
Software Engineering

Architecture, systems design, developer tools, and best practices for building production software at scale.

posts

Membership CTA

Get full access

Subscribe to get access to premium articles, weekly newsletters, and more.

Subscribe

Already have an account? Sign in

Ghost Editor Cards

All Ghost editor card types rendered with theme styles. Wrapped in post content for accurate styling.

Image Cards

AI neural network visualization
Robot hand reaching toward human hand
Wide image with caption — AI and human collaboration, the next frontier
Earth from space with network connections
Code on a dark screen
Matrix-style data visualization
Circuit board macro photo
Server room with blue lights
Network cables in a data center

Embed Cards

YouTube embed — responsive video player

Google Maps Embed

Google Maps embed — Eiffel Tower, Paris

Bookmark Card

Ghost: The Creator Economy Platform
The world's most popular modern publishing platform for creating a new media platform. Used by Apple, Tinder, OpenAI, and thousands more.
Ghost Ghost Foundation ghost.org
Ghost platform preview

Callout Cards

💡
Tip: Use CSS custom properties to maintain consistent theming across all components. The accent color propagates through var(--accent).
⚠️
Warning: This content requires a paid membership. Free members can preview the introduction only.
✅
Success: Your subscription has been activated. You now have full access to all premium content and newsletters.
📝
Note: This article was updated to reflect the latest API changes. Check the changelog for details.
📎
Reference: The complete source code is available in the GitHub repository. See the README for setup instructions.

Toggle Cards

What frameworks does Cortex support?

Cortex is built for Ghost CMS 5.0+ and uses Handlebars templating. It works with all Ghost hosting providers including Ghost(Pro), self-hosted, and custom setups.

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 automatically via var(--ghost-accent-color).

Button Card

Read Full Article

Header Cards

The AI Revolution

Exploring the intersection of machine intelligence and human creativity.

Deep Learning Decoded

From neural networks to transformer architectures

Subscribe for Full Access

Get premium articles, weekly newsletters, and exclusive deep-dives.

Subscribe

Audio Card

Podcast thumbnail
Episode 12: The Ethics of Autonomous Systems
4:32 / 12:45

Video Card

Video placeholder
0:00 8:24

File Card

Cortex Theme Documentation
Complete setup guide and configuration reference
PDF • 2.4 MB

Product Card

AI hardware product

Neural Processing Unit v3

★ ★ ★ ★ ★

Next-generation AI inference engine with 4x faster processing and 60% lower power consumption. Built for edge deployment.

Learn More

Signup Card

Content Elements

The best way to predict the future is to invent it. Technology is nothing more than an extension of human imagination.

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

  • Machine learning model architectures
  • Data pipeline optimization strategies
  • Edge computing deployment patterns
  1. Define the problem space and constraints
  2. Collect and preprocess training data
  3. Train, evaluate, and iterate on the model
Model Parameters Accuracy Latency
GPT-4 1.8T 96.2% 380ms
Claude 3.5 ~500B 94.8% 210ms
Gemini Ultra ~1T 95.1% 290ms
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

Join Cortex

Create a free account to get access to articles, newsletters, and more.

Already have an account? Sign in

Now check your email!

A sign in link has been sent to your email address. Click the link to securely sign in.

Newsletter Subscription

Get the latest in AI & tech

Subscribe to get access to premium articles, weekly newsletters, and more.

Standalone Newsletter Form

Minimal form with newsletter targeting via data-members-newsletter.

Pricing Tiers

Free

Free
  • All public articles
  • Weekly newsletter
  • Community access
Sign up

Premium

Full access to all content and features

$9 /month
  • Everything in Free
  • Technical playbooks and deep dives
  • Architecture decision records
  • Early access to new content
  • Members-only newsletter
  • Priority support
Subscribe

Content Gate

Logged Out

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

This article is for subscribers

Get access to premium articles, exclusive newsletters, and the full archive.

Subscribe Now

Already a member? Sign in

Needs Upgrade

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

Unlock the full article

This post is for paid subscribers. Upgrade to get full access to this and all premium content.

View Plans

Member Account States

Logged Out

Logged In (Free)

Sign Out

Custom Interactions

Theme-specific JavaScript-driven components and interactive features.

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 and a reading progress bar.

Scroll Reveal

Post cards, membership CTAs, and section labels fade in when they enter the viewport. Uses shared scroll-reveal.js with IntersectionObserver.

Before (hidden)

After (visible)

Share this article

Pagination

Page Templates

Template Previews

404 Error Page

404

Page not found

Back to homepage

Tag Archive

> Browsing

Machine Learning

12 posts

Author Archive

JD

Jane Doe

AI researcher & technical writer

Template Directory

Sign In

Magic link email authentication form.

custom-signin.hbs

Sign Up

Registration with newsletter subscription options.

custom-signup.hbs

Account

Member dashboard with subscription and tier management.

custom-account.hbs

Full Width

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

custom-full-width.hbs

Tag Archive

Posts filtered by tag with description header.

tag.hbs

Author Archive

Author profile with bio and post grid.

author.hbs

404 Error Page

Custom page not found with search and recent posts.

error-404.hbs