Skip to main content

​
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.
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.

​
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.

​
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).
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.

​
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 familySizes
DisplayDisplay Large, Display Medium, Display Small
HeadingHeading Large, Heading Medium, Heading Small
BodyBody Large, Body Medium, Body Small
LabelLabel 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

SettingWhat it does
Page backgroundThe default background colour for all pages
Default text colourThe base text colour used when no other colour is set
Text selectionThe background and text colour shown when candidates highlight text

​
SEO defaults

SettingWhat it does
FaviconThe small icon shown in the browser tab — upload an image (SVG recommended)
Social thumbnailThe 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. 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.
1
Open your theme
2
Go to CMS → Themes and click the theme you want to edit.
3
Make your changes
4
Update colours, fonts, typography styles, or component settings. The editor shows inline previews of swatches, text styles, and components as you work.
5
Save & publish
6
Click Save & publish to apply your changes. They go live across the whole site straight away.
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.

​
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

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

​
Need help?