> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inploi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

> Control your careers site's colours, fonts, and visual style

# Themes

A theme is the design system for your careers site. It controls the colours, typography, and component styles — things like how buttons look, what font sizes are used, and the shades of your brand colour. Every page on the site uses your published theme automatically.

Changes to your theme apply site-wide. Saving a theme publishes it immediately, so every page is affected at once.

To open Themes, click **CMS** in the left-hand navigation, then select **Themes**.

<Warning>
  There is no separate draft step for themes. When you save a theme, it goes live everywhere at once. Make changes carefully and check your key pages afterwards.
</Warning>

## What you can configure

### Colours

The colour system is built around named roles — **Primary**, **Secondary**, **Tertiary**, **Neutral**, plus status colours (**Success**, **Warning**, **Error**). Each colour role generates a full 12-shade scale, so components across the site can use lighter or darker tints automatically.

You can also define **Swatches** — named colours and gradients that appear as options when choosing background colours in the page editor.

Name swatches for their role rather than their exact colour, using the `bg_` prefix and lowercase `snake_case` — for example `bg_primary`, `bg_overlay_dark`, or `bg_gradient_hero`. See [Naming conventions](/studio/cms/naming-conventions#themes-and-swatches).

### Fonts

Upload your brand typefaces in WOFF or WOFF2 format (OTF and TTF are also supported). Once uploaded, each font can be assigned weight and style variants (e.g. Regular 400, Bold 700, Italic).

<Tip>
  Use your brand font files from your design team rather than referencing a Google Fonts URL. Hosting fonts directly in Studio gives you more control over loading performance.
</Tip>

### Typography

The typography system defines a scale of named text styles used throughout the site. Each style is named as a size pair — for example **Display Large**, **Display Medium**, **Display Small**, through to **Label Small**:

| Style family | Sizes                                        |
| ------------ | -------------------------------------------- |
| **Display**  | Display Large, Display Medium, Display Small |
| **Heading**  | Heading Large, Heading Medium, Heading Small |
| **Body**     | Body Large, Body Medium, Body Small          |
| **Label**    | Label Large, Label Medium, Label Small       |

Each style has settings for font family, size, weight, line height, and letter spacing. When you update a style here, it changes everywhere that style is used across all pages.

### Component styles

Control the visual appearance of interactive UI elements used in blocks across your site:

**Buttons** — configure background colour, text colour, border, and shadow for each button variant (Primary, Secondary, Tertiary, Ghost, Neutral, Link, Success, Warning, Error), with separate states for default, hover, and active.

**Inputs** — set the appearance of form fields and search inputs for each variant, with default, hover, and focus states.

**Badges** — control the background, text, border, and corner radius of badge chips for each variant.

### Page defaults

| Setting                 | What it does                                                        |
| ----------------------- | ------------------------------------------------------------------- |
| **Page background**     | The default background colour for all pages                         |
| **Default text colour** | The base text colour used when no other colour is set               |
| **Text selection**      | The background and text colour shown when candidates highlight text |

### SEO defaults

| Setting              | What it does                                                                |
| -------------------- | --------------------------------------------------------------------------- |
| **Favicon**          | The small icon shown in the browser tab — upload an image (SVG recommended) |
| **Social thumbnail** | The fallback image used when pages are shared on social media               |

These defaults apply to all pages unless overridden in individual page settings.

### CSS overrides

For advanced customisation beyond what the theme settings offer, you can write raw CSS that is applied globally across the site. This is an advanced feature — use it with care, as errors here can affect the appearance of all pages.

To target a specific element rather than styling globally, give a column or block a label in the [page editor](/studio/cms/pages/page-editor#labelling-columns-and-blocks). Labels are applied as a `data-cms-label` attribute you can select in your CSS — for example, `[data-cms-label='hero-cta'] { color: red; }`.

## Editing and publishing your theme

Like pages, themes keep a version history you can return to. Unlike pages, a theme has no separate draft step — saving publishes it.

<Steps>
  ### Open your theme

  Go to **CMS → Themes** and click the theme you want to edit.

  ### Make your changes

  Update colours, fonts, typography styles, or component settings. The editor shows inline previews of swatches, text styles, and components as you work.

  ### Save & publish

  Click **Save & publish** to apply your changes. They go live across the whole site straight away.
</Steps>

<Warning>
  A theme update applies to every page on your site immediately. Make changes carefully and check your key pages — the home page, a job listing, and any campaign pages — afterwards.
</Warning>

## Generate palette

When editing a colour's shade scale, click **Generate** to build a full 12-shade palette from a single hex colour. Enter your brand colour, choose whether it is a main or neutral palette, and pick light or dark mode. Studio previews the shades before you apply them.

This uses a fixed colour-scale algorithm (similar to the approach used by Radix UI) — it is not AI-generated.

## Generate font size

When editing a text style's font size, an icon button opens the **Generate font size** tool. Enter a mobile and desktop size and Studio builds a responsive value that scales smoothly between the two across screen sizes.

## FAQs

<AccordionGroup>
  <Accordion title="Does changing the theme affect every page at once?">
    Yes. A theme update applies site-wide as soon as you **Save & publish**. Check your key pages — home, a job listing, and any campaign pages — afterwards.
  </Accordion>

  <Accordion title="Is the Generate palette tool AI-powered?">
    No. It uses a fixed colour-scale algorithm (similar to Radix UI) to build a 12-shade palette from one hex colour. The result is deterministic, not AI-generated.
  </Accordion>

  <Accordion title="Can I preview a theme change before it goes live?">
    Themes are save-and-publish only — there's no separate draft. The editor shows inline previews of swatches, text styles, and components as you edit, before you apply.
  </Accordion>
</AccordionGroup>

## Need help?

<Snippet file="contact-support.mdx" />

## Related articles

* [CMS glossary](/studio/cms/glossary)
* [Naming conventions](/studio/cms/naming-conventions)
* [The page editor](/studio/cms/pages/page-editor)
* [Uploads](/studio/cms/uploads)
* [Prefabs](/studio/cms/prefabs)