Skip to main content

5 min — Themes overview

​
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 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.
Next up: Pages overview.