Themes — Cairn

Start hereNavigation and lookThemesA theme is your site's look: its colours, fonts, sizes, corners and spacing. Your pages stay exactly as they are when you change theme; only the way they look changes.The Themes screenOpen Themes under Content in the sidebar. Only administrators see it. Themes come in two groups:

Your themes: your site's own. You can change and delete them freely, and nothing will overwrite them.

Built in: themes that come with Cairn. They are updated with Cairn, so they can't be deleted. To make one your own, duplicate it.

Each card shows your own home page as it would look in that theme, drawn live, so you can compare themes before you choose. (If your site has no home page yet, the cards use a sample page.) The theme in use is marked Active.Each card previews your own home page in that theme.Choosing a themePress Activate on a theme's card. The whole site switches to it straight away, for every visitor.The small buttons on each card are Duplicate (make an editable copy), Export zip (download the theme as a file) and, on your own themes, Delete. Import zip at the top of the screen installs a theme someone has sent you as a .zip file.To change a built-in theme, press Duplicate first. The copy starts looking exactly like the original, including any changes you had made to it, appears under Your themes, and is yours to edit. Activate the copy to use it.Changing colours, fonts and sizesPress Edit on a theme's card. The editor has three columns: the list of settings groups on the left, the settings in the middle, and a live preview of every kind of block on the right, drawn in this theme.Each setting in a theme is one value used all over the site: "the primary colour", "the heading font", "medium corner rounding". Change it once and every block that uses it follows. The groups are:

Foundations: Colors, Typography (fonts, sizes and weights), Shadows, Radius & borders (how rounded corners are), Spacing (the size of each padding step), Block spacing (the gap under each kind of block), Motion (how fast effects run) and Page widths.

Components: how particular pieces look, such as the Header menu, Mobile menu, Buttons, Form fields, Messages & alerts, Cards & panels, Links and Emails.

Most component settings start out blank, shown as Not set. Blank means "work it out from the foundations", and the line under each one says what it uses instead. Set one only when you want that piece to differ.Editing a theme's colours, with the live preview.Colours and readabilityThe main colours are Primary (your brand colour, used for buttons and links), Secondary, Accent, Background, Text, Muted text, Card surface and Border. Each "On …" colour, such as On primary, is the text colour used on top of it.Next to each text colour, a badge says how easy it is to read against the colour behind it: AAA or AA is good, Large text only is fine for headings and buttons but not paragraphs, and Low is hard to read. Hover over the badge for the details.The colours marked (on dark), such as Text (on dark) and Primary (on dark), are used inside any Section whose Text tone is set to dark. A brand colour that looks right on white is often too dim on a dark band, which is what these are for. Under Buttons, Primary on dark bands does the same for buttons.A small dot next to a setting's name means you have changed it from the theme's own value.FontsSans font is used for body text and Display font (headings) for headings. Each is a list of font names separated by commas; the visitor's browser uses the first one it has. H1 size to H6 size, Heading weight and the line heights are in the same group.Typing a font's name does not install it. A font only shows if the theme already loads it, or the visitor's device happens to have it. To use a new web font, ask whoever set up your site to add it to the theme.Saving, previewing and resettingChanges save themselves a moment after you make them (Auto-saves). There is no separate publish step.If the theme you are editing is the active one, visitors see each change as soon as it saves. To try ideas out in private, duplicate the theme, edit the copy, and only press Activate when it is right.Use the preview on the right as you work. The Emails group shows a real email in this theme instead, because your site's emails take their colours from it too. See Emails the site sends.Reset, at the top of the editor, puts every setting back to the theme's own values. It can't be undone.Built-in themes can be opened with Edit too. Anything you change is kept as your site's adjustment on top of the theme, and Reset removes it. For a lasting look of your own, a duplicate is the safer place to do it.A different look for one part of the siteA page can have its own theme, header and footer, and every page under it takes them too. It is for a landing page, a campaign, or a part of the site that should look like something else.Open the page, go to its Settings, and find Look. Choose a Theme, a Header and a Footer, or leave any of them as it is to keep the one from the page above, or the site's own. A header or footer is any reusable block, so make it in the Library first. Changes to the look apply straight away, without pressing Publish.The editor keeps showing your site's own theme while you work. Press View to see the page in its own.To see it in action, look at the sample sites: each one is a part of this site with a look of its own.← The site menuLogo, icons, header and footer →Getting startedPagesBuilding with blocksNavigation and lookMediaForms and leadsCatalogueShopBookings and membersRunning the siteCairnWebsites for businesses that need more than a brochure. Built, hosted and kept running by us.StartBuildRun© 2026 Cairn. All rights reserved.Built with Cairn.