> ## 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 overview
> Understand the site-wide design settings managed through Themes.
export function LessonFooterBack() {
return
Back to CMS fundamentals
;
}
export function LessonHeaderBack() {
useEffect(() => {
const header = document.querySelector("#header");
if (!header || header.querySelector(".lesson-header-back")) {
return undefined;
}
const link = document.createElement("a");
link.className = "lesson-header-back";
link.href = "/learn/overview";
link.setAttribute("aria-label", "Back to CMS fundamentals");
link.setAttribute("title", "Back to CMS fundamentals");
link.innerHTML = `
`;
header.append(link);
return () => link.remove();
}, []);
return null;
}
## What you will learn
A theme is the design system for your careers site. It controls site-wide colours, fonts, typography, and component styles. This lesson explains what a theme contains so you can recognise when a change belongs there.
Themes have no separate draft stage. **Save & publish** applies changes across the whole site immediately. Only make a change when you have been asked to, then check key pages afterwards.
## What a theme controls
**Colours** — named brand roles: Primary, Secondary, Tertiary, and Neutral, plus Success, Warning, and Error. Each role has a shade scale. You can generate a palette from a hex colour or enter values yourself.
**Swatches and gradients** — named colours and linear or radial gradients that appear when choosing backgrounds in the page editor. Swatches can include transparency; gradients have named colour stops and direction settings.
**Fonts** — connect the font files uploaded in [Uploads](/learn/uploads) to the font family and weight or style they represent. The family name you set here is the name used in the project.
**Typography styles** — the Display, Heading, Body, and Label families, each with Large, Medium, and Small styles. A style sets its font family, size, weight, line height, and letter spacing. Updating a style changes it everywhere it is used.
**Components** — the appearance and states of buttons, inputs, and badges.
**Page defaults** — the page background, default text colour, and text-selection colours used when no more specific setting is applied.
**SEO defaults** — the favicon and social thumbnail used across the site unless a page overrides them.
Themes also include advanced options, such as CSS overrides. Ask your inploi contact before changing advanced settings.
Edited for clarity and current terminology.
### 0:00
Themes contain the site-wide visual settings: colours, fonts, typography, components, page defaults, and SEO defaults.
### 0:30
Colour roles include Primary, Secondary, Tertiary, Neutral, Success, Warning, and Error.
### 1:00
Generate a shade palette from a hex colour or set the colours manually.
### 1:30
Swatches provide additional named colours, including transparent colours, for backgrounds in the page editor.
### 2:00
You can also create named linear or radial gradients and set their direction.
### 2:30
In Fonts, select the uploaded file for each font family, weight, and style.
### 3:00
The family name set in Themes is the name used in the project.
### 3:30
Typography styles define how Display, Heading, Body, and Label text appears across the site.
### 4:00
Component settings control buttons, inputs, and badges.
### 4:30
Page defaults set the background, default text colour, and text-selection colours. SEO defaults include the favicon and social thumbnail. Select **Save & publish** to apply a theme change site-wide immediately.
## Related articles
* [Themes](/studio/cms/themes)
* [Naming conventions](/studio/cms/naming-conventions#themes-and-swatches)
* [Uploads](/studio/cms/uploads)
Next up: [Pages overview](/learn/pages-overview).