Configuration

Customization

Most visual changes can be made without touching a template file, through Ghost's built-in Code Injection. Everything below assumes Settings → Code injection → Site header unless noted otherwise.

CSS variables

Fold's entire palette and spacing scale is defined as CSS custom properties on :root, so you can override any of them without editing the theme's source files.

Variable	Default	Used for
`--fold-color-bg`	`#f6f6f3`	Page background (paper).
`--fold-color-surface`	`#ffffff`	Feature-image mattes, raised surfaces.
`--fold-color-text`	`#16181c`	Body text, headings (ink).
`--fold-color-muted`	`#5a5e64`	Bylines, dates, excerpts.
`--fold-color-border`	`#dcdcd6`	Every hairline rule and divider.
`--fold-color-accent`	`#16181c`	Primary button fill. Fixed to ink by default — not wired to Ghost's Accent Color picker.
`--fold-color-signal`	`#8a231c`	The fold itself — the paywall section background and lock badges.
`--fold-color-signal-deep`	`#6e1c16`	Hover state for red-context controls and the primary button's hover.
`--fold-color-on-signal`	`#fdf6f2`	Text/foreground color inside the red paywall field.

Code injection recipes

Change the fold's color. Overrides the paywall red without touching a template.

Code injection: Site header

<style>
  :root {
    --fold-color-signal: #1c3d8a;
    --fold-color-signal-deep: #16266e;
  }
</style>

Make the primary button follow your brand color instead of ink. This is how to make Ghost's Accent Color actually apply, if you want that.

Code injection: Site header

<style>
  :root {
    --fold-color-accent: var(--ghost-accent-color, #16181c);
  }
</style>

Widen the article reading column. Fold caps body copy at roughly 68 characters per line by design; raise it if your content runs shorter lines (lists, short paragraphs) more often than long-form prose.

Code injection: Site header

<style>
  .fold-content-body .inner,
  .fold-article-header .inner {
    max-width: 48rem;
  }
</style>

Fonts

Set your heading and body typefaces from Settings → Design and branding → Brand → Typography in Ghost Admin, not through code injection. Fold reads those choices back through the --gh-font-heading and --gh-font-body variables, so the admin picker is the supported path — pasting a font-family override in code injection will fight with it instead of extending it.

The default stack (used until you change it) is a serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif — deliberately one editorial voice for both headings and body copy, rather than a display sans paired with a body serif.

File map, for template edits

Fold is plain Handlebars, CSS, and minimal JS — no visual-builder dependency. If code injection and theme settings don't cover what you need, these are the files that make up the theme:

File	Renders
`default.hbs`	The outer shell — masthead, footer, everything every page shares.
`index.hbs`	Homepage: the publication intro banner and the dispatch-index post feed.
`post.hbs`	A single post: header, content, the paywall (when gated), footer subscribe CTA, and "more posts" rail.
`page.hbs`	Static pages.
`tag.hbs`	Tag archive listing.
`author.hbs`	Author archive listing.
`partials/post-card.hbs`	One row in the dispatch-index feed, including the "Members only" lock badge on gated posts.
`assets/css/screen.css`	All styling — source file, compiled to `assets/built/screen.css` on build.

Don't edit assets/built

Required

Edit assets/css/screen.css (or the equivalent source under assets/js), never the compiled files under assets/built/. Those are generated by pnpm run build and get silently overwritten the next time anyone builds or zips the theme — any change made directly there disappears without warning.