> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/crimson/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/crimson/custom-settings/brand-settings.md).

# Brand Settings

Ghost’s **Brand settings** control your site’s identity assets (logo/icon/cover) and core styling choices (accent color + typography). <code class="expression">space.vars.THEME\_NAME</code> supports these settings—but in a few places, <code class="expression">space.vars.THEME\_NAME</code> 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**

{% hint style="info" %}
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**.
{% endhint %}

<figure><img src="/files/DE9Wgl1kAiDyPhRLpQVp" alt=""><figcaption><p>Customize your publication</p></figcaption></figure>

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

<figure><img src="/files/kPnJ0lknoeSCnhZ0a7CQ" alt=""><figcaption><p>Brand settings in Customize popup</p></figcaption></figure>

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 <code class="expression">space.vars.THEME\_NAME</code> in **light mode**—commonly applied to buttons, links, highlights, UI accents, and emphasis elements.

<figure><img src="/files/ePsogeydcBOik1L3X71P" alt=""><figcaption><p>Accent color</p></figcaption></figure>

#### How <code class="expression">space.vars.THEME\_NAME</code> uses it

* **Light mode:** <code class="expression">space.vars.THEME\_NAME</code> uses Ghost’s Accent color as the primary accent.
* **Dark mode:** <code class="expression">space.vars.THEME\_NAME</code> uses a separate <code class="expression">space.vars.THEME\_NAME</code> **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.

<code class="expression">space.vars.THEME\_NAME</code> **demo example:**\
Accent color used: `#961600` (matches the <code class="expression">space.vars.THEME\_NAME</code> 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.

<figure><img src="/files/in8yj7c6kRlLx8v6hovG" alt=""><figcaption><p>Publication icon</p></figcaption></figure>

#### How <code class="expression">space.vars.THEME\_NAME</code> uses it

<code class="expression">space.vars.THEME\_NAME</code> 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 <code class="expression">space.vars.THEME\_NAME</code>, this appears in the **header**.

<figure><img src="/files/SWaUKCk2aF5SzNttWi8Z" alt=""><figcaption><p>Publication logo</p></figcaption></figure>

#### How <code class="expression">space.vars.THEME\_NAME</code> uses it

* **Header logo:** uses Ghost’s Publication logo.
* **Footer / Dark mode logo:** <code class="expression">space.vars.THEME\_NAME</code> 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.
* <code class="expression">space.vars.THEME\_NAME</code> demo logo size: `556×138 px`

#### Resizing the logo in <code class="expression">space.vars.THEME\_NAME</code> (optional)

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

**Ghost Admin → Settings → Code Injection → Site header**

{% code lineNumbers="true" %}

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

{% endcode %}

**How to adjust it:**

* Change `3rem` to your preference:
  * `2.5rem` (smaller)
  * `3.7rem` (bigger)
* Decimals are allowed.

<figure><img src="/files/IvNqvfpiIIEZyUeVhDbU" alt=""><figcaption><p>Paste the above styles in Code injection -> Site header and click Save.<br>Don't forget to change the height value as per your preference.</p></figcaption></figure>

#### 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**.

<figure><img src="/files/TP9apMRPKPdyQeAYaPVD" alt=""><figcaption><p>Publication cover</p></figcaption></figure>

#### How <code class="expression">space.vars.THEME\_NAME</code> uses it

<code class="expression">space.vars.THEME\_NAME</code> **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 <code class="expression">space.vars.THEME\_NAME</code> 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

<code class="expression">space.vars.THEME\_NAME</code> supports **two font roles**:

* **Headings (titles, H1–H6)**
* **Body text (paragraphs, UI text, reading content)**

<figure><img src="/files/UZVX3JvTvVHzr6sMdGYa" alt=""><figcaption><p>Typography</p></figcaption></figure>

#### Heading font

**What Ghost does**

Sets a custom font used for:

* Page and post titles
* Headings inside your content (H1–H6)

In <code class="expression">space.vars.THEME\_NAME</code> terms **t**his aligns with <code class="expression">space.vars.THEME\_NAME</code>’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 <code class="expression">space.vars.THEME\_NAME</code> terms this aligns with <code class="expression">space.vars.THEME\_NAME</code>’s **Secondary font** concept.

#### Using <code class="expression">space.vars.THEME\_NAME</code>’s built-in font pairs

If you want to use the font combinations that <code class="expression">space.vars.THEME\_NAME</code> 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)

<figure><img src="/files/fHf0dkE7Erjh1pM7bzv6" alt=""><figcaption><p>Choosing a font from <code class="expression">space.vars.THEME_NAME</code>'s fonts</p></figcaption></figure>

#### When should you use Ghost Typography instead?

Use Ghost Typography when:

* You want a font that is not included in <code class="expression">space.vars.THEME\_NAME</code>’s fonts
* You want Ghost to manage the font choice globally (and keep <code class="expression">space.vars.THEME\_NAME</code> font options unused)

***

### Troubleshooting

<details>

<summary>My accent color looks right in light mode but not in dark mode</summary>

That’s expected. In Crimson:

* **Light mode** uses Ghost Accent color
* **Dark mode** uses <code class="expression">space.vars.THEME\_NAME</code>’s **Accent Color for Dark Mode** custom setting

</details>

<details>

<summary>My favicon (publication icon) looks invisible in some browsers</summary>

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 <code class="expression">space.vars.THEME\_NAME</code>-we used a white circle background for a dark red logo icon)

</details>

<details>

<summary>My logo is too big/small</summary>

Use the Code Injection CSS snippet ([explained above](#publication-logo-header-logo)) and adjust `height: 3rem;` until it fits.

</details>

<details>

<summary>Changes don’t appear after saving</summary>

* 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)

</details>