Creating basic themes with the Theme Builder

When you create a new theme, the left-side pane will start with the Details menu category open. Here you can enter a name and description for the theme so that you and your collaborators can recognise it and know what type of stories to use it with:

Click the Logo menu item in the left pane to upload a logo file for your theme. Provide an image that is at least 60px high, to ensure it will display well across screen types. We recommend using a PNG file. PNG transparency is supported and advised if your logo isn't rectangular.

Add the URL that you would like the logo to link to in your theme, such as the address of your main website. The link needs to include https:// at the start to work.

Add Image alt text to your logo so that it can be read by screen readers. Consider using the standard format: "[Organisation name] logo."

​

Choose the Typography menu item in the left pane to select up to six fonts to add to the theme. Two fonts will already be specified. If you don't wish to use these, click the trash-can icon beside them, then click ADD A NEW FONT. A menu will open with a range of fonts to choose from:

Select a font name, and the font will be added to your set.

The menu also includes buttons to Browse more fonts, which will open a menu displaying many more Google fonts to choose from. You can search the menu (handy if you know the name of a particular Google font), filter the list by font style, and sort it in several ways.

Scrolling further down the left pane, you'll see fields where you can apply any of your selected fonts to various story components that use text. These include four heading styles, body text, button text and blockquotes. As you choose from the drop down fields, you'll see your selected fonts applied in the main preview window.

Headings may use the same or a different font from that used for body text. Often a bolder or more decorative font is used for headings, with a more neutral font for body text. Consider accessibility best practices.

Choose the Palette Colours menu item and you'll see the list of colours already contained in the theme, along with their HEX code and a name. Each of these colours can be replaced. To do so, either click one of the coloured dots and choose a new colour from the colour picker that displays (its HEX code will be automatically added to the table), or directly enter the HEX code of a colour to add (the coloured circle will update to show the appropriate colour):

Naming your theme colours will help you and your story collaborators to identify the colours within the Editor. This is useful to ensure your colours can easily be applied consistently in your stories, especially if your theme has multiple similar colours: for instance it might be beneficial to name colours as "Heading blue", "Background blue", and "Highlight blue".

If you aren’t sure which colours to use, consider using a tool like Coolors or the AI Creative Companion to generate a palette.

The Shorthand Editor provides section options to choose between two different colour themes for each section in a story. These are labelled as a Light and a Dark option. When creating a story these options are an easy way to apply variations of a theme to a section with a single click. Typically the Light option contains a light-coloured background with contrasting text colour, and the Dark option contains a dark-coloured background with a contrasting text colour.

Within the Theme Builder, these Light and Dark options are configurable in the Theming menu item:

Choose the colours to apply as defaults for the Text and Background (+ overlays) for the Light and Dark options for your theme. Use the right-hand side of the window to see the colours applied and ensure they present enough contrast with your chosen fonts.

It is common for themes to use inversions of the same colours for their Light and Dark versions — however, the terms "Light" and "Dark" are merely suggestions. Your two variations could both be light in tone, both dark, close variations of the same colours, or starkly different.

Not all your stories may have or need internal navigation, but when they do, it appears as a row at the top of the page. Styling for that navigation row can also be set in the theme. In the example below, the navigation row has been set in the left panel to have a blue background and white text, which is previewed in the right-hand preview pane:

When you are finished creating your theme with the Theme Builder, click the SAVE AS NEW button at the top right of the screen.

To apply the theme to your story, navigate back to your workspace, select the story you’d like to apply the new theme to, and open the THEMES panel, then click Apply beside the new theme: