Brand Settings

Ghost’s Brand settings control your site’s identity assets (logo/icon/cover) and core styling choices (accent color + typography). Crimson supports these settings—but in a few places, Crimson adds its own theme-specific alternatives (especially for dark mode and font pairing).

Where to find Brand settings in Ghost

In Ghost Admin, go to:

Settings → Design & branding → Customize

Depending on your Ghost version/hosting, the wording may vary slightly, but you’re looking for the section where Ghost lets you set Accent color, Publication icon, Publication logo, Publication cover, Typography.

Customize your publication

Once you click Customize, a popup should appear. Ensure you are on the Brand tab.

Brand settings in Customize popup

You can change the settings to change the look of your website. Let's explore each setting below.

---

Accent color

What it is

Ghost’s Accent color is the site-wide highlight color used by Crimson in light mode—commonly applied to buttons, links, highlights, UI accents, and emphasis elements.

Accent color

How Crimson uses it

• Light mode: Crimson uses Ghost’s Accent color as the primary accent.

• Dark mode: Crimson uses a separate Crimson custom setting (Accent Color for Dark Mode), so your dark mode brand color can be different from light mode.

Recommendation

Pick a color that comes directly from your brand identity—usually a dominant color from your logo.

Crimson demo example: Accent color used: #961600 (matches the Crimson demo logo’s red shade)

Best practices

• Choose a color with good contrast against white backgrounds (light mode UI).

• Check contrast for links/buttons.

• Keep it consistent with the brand palette (avoid changing it too frequently).

---

Publication icon (Favicon)

What it is

This is your site’s favicon—the small icon shown in the browser tab, bookmarks, and sometimes share previews.

Publication icon

How Crimson uses it

Crimson doesn’t modify the favicon. Ghost serves the publication icon globally for the site.

Key design notes

• It must look good on both light and dark browser UI, because you cannot change it dynamically based on the user’s theme.

• Usually a square image with a transparent background works best.

Recommended size + performance

• Ghost suggests 60×60 px, but creating a cleaner source like 250×250 px is totally fine.

• Keep the file lightweight:

  • compress it

  • reduce dimensions if heavy

  • prefer simple shapes (favicons render tiny)

---

Publication logo (Header Logo)

What it is

Your main brand logo. In Crimson, this appears in the header.

Publication logo

How Crimson uses it

• Header logo: uses Ghost’s Publication logo.

• Footer / Dark mode logo: Crimson uses a separate custom setting (e.g., “Logo for Dark Mode”), so you can supply a logo optimized for dark backgrounds and/or footer usage.

Recommended format & size

• Use a transparent background (PNG/SVG where applicable).

• Publication logos should be at least 600px × 72px for crisp rendering.

• Crimson demo logo size: 556×138 px

Resizing the logo in Crimson (optional)

If you want to make the header/footer logo larger or smaller, add this CSS in:

Ghost Admin → Settings → Code Injection → Site header

<style>
  .site-logo img,
  .site-logo-footer img {
    height: 3rem;
  }
</style>

How to adjust it:

• Change 3rem to your preference:

  • 2.5rem (smaller)

  • 3.7rem (bigger)

• Decimals are allowed.

Paste the above styles in Code injection -> Site header and click Save. Don't forget to change the height value as per your preference.

Tips

• After saving Code Injection, refresh your site using a hard reload (Ctrl/Cmd + Shift + R).

• If the logo looks blurry, upload a higher-resolution logo (retina-friendly).

---

Publication cover

What it is

An image that Ghost stores as your publication cover.

Publication cover

How Crimson uses it

Crimson does not use the Publication cover in the theme layout—so your site design won’t change if it’s empty.

Why you should still upload it

Even if Crimson doesn’t display it, the cover may be used in link sharing previews (social platforms, messaging apps, etc.). A strong cover improves how your site looks when shared.

Recommended size

• Use an image with minimum width ~1500px so it looks good across devices and share formats.

---

Typography

Crimson supports two font roles:

• Headings (titles, H1–H6)

• Body text (paragraphs, UI text, reading content)

Typography

Heading font

What Ghost does

Sets a custom font used for:

• Page and post titles

• Headings inside your content (H1–H6)

In Crimson terms this aligns with Crimson’s Primary font concept.

Body font

What Ghost does

Sets a custom font used for:

• Body content (paragraphs)

• Other theme text and UI copy

In Crimson terms this aligns with Crimson’s Secondary font concept.

Using Crimson’s built-in font pairs

If you want to use the font combinations that Crimson provides through its Custom Settings:

1. Go to Settings → Brand → Typography

2. Set both Heading font and Body font to Theme default

3. Then go to Theme (tab next to Brand) → Primary font/Secondary font

4. Choose:

   • Primary font (for headings)

   • Secondary font (for body)

Choosing a font from Crimson's fonts

When should you use Ghost Typography instead?

Use Ghost Typography when:

• You want a font that is not included in Crimson’s fonts

• You want Ghost to manage the font choice globally (and keep Crimson font options unused)

---

Troubleshooting

My accent color looks right in light mode but not in dark mode

That’s expected. In Crimson:

• Light mode uses Ghost Accent color

• Dark mode uses Crimson’s Accent Color for Dark Mode custom setting

My favicon (publication icon) looks invisible in some browsers

Your icon likely lacks contrast. Use:

• a bolder shape

• stronger contrast edges

• transparent background with a solid mark

• if it is very dark or very light, try to add a contrasting background (like we have done for Crimson-we used a white circle background for a dark red logo icon)

My logo is too big/small

Use the Code Injection CSS snippet (explained above) and adjust height: 3rem; until it fits.

Changes don’t appear after saving

• Hard refresh the browser (Ctrl/Cmd + Shift + R)

• Clear CDN/Cloudflare/browser cache if you use caching

• Confirm you saved in the correct place (Brand vs Design vs Code Injection)