Colours & Typography
Set the colours and fonts that define your course’s visual identity. These settings apply to the entire course player, including buttons, links, navigation, and content areas.
The Brand section of the theme editor brings your logo and colours together in one place. You can upload a logo, set your colours by hand, or pull both from a website in one step.
Upload a logo to display in the course player. Supported formats are PNG, JPG, WebP, and GIF, up to 2 MB. The logo is saved to your media library, so you can reuse it across courses without re-uploading.
Brand from a website
Section titled “Brand from a website”Instead of setting colours and uploading a logo by hand, paste a website address and let Slate pull its brand for you. This is available on the Standard and Pro plans.
- In the Brand section, find From a website and enter a site address (for example,
acme.com) - Slate reads the site and shows a preview with the logo it found and a row of brand colours
- Pick the colour that looks right, choose your own with the colour picker, or select no colour to leave your current one unchanged
- Keep the suggested logo, replace it with your own file, or remove it
- Click Use this brand to apply your choices to the course
Colour is never applied unless you pick one, so importing a brand will not overwrite your existing primary colour by accident. If a site does not share a logo or colours Slate can read, you can add the brand manually from the same panel. Everything you apply this way can still be fine-tuned with the colour controls below and the Logo upload above.
Colour settings
Section titled “Colour settings”The theme editor provides five colour controls:
| Setting | What it controls |
|---|---|
| Primary colour | Buttons, links, active states, and accent elements |
| Primary text colour | Text colour on buttons and active areas that use your primary colour: the Next button, knowledge-check Submit button, assessment Start/Submit/Retry buttons, the current lesson in the sidebar, the cover page button, and similar. Auto-derived from the primary by default, or set manually. |
| Hover colour | Button hover state. Auto-derived from primary by default, or set manually. |
| Outline colour | Button borders. Applies to every primary action button in the player. |
| Outline thickness | Button border width (0-4px). Set to 0 to remove borders entirely. |
Auto-derive primary text colour
Section titled “Auto-derive primary text colour”By default, Slate picks the text colour on these buttons and active areas based on the brightness of your primary colour: mid-tone and darker primaries (most blues, oranges, greens) keep white text, while light pastels (pink, pale yellow, mint, soft lavender) flip to near-black so the text stays readable.
Uncheck Auto-derive to choose a custom text colour. This is useful when you’ve paired a light primary with a dark logo or when custom CSS calls for a specific text shade.
Auto-derive hover colour
Section titled “Auto-derive hover colour”By default, the hover colour is automatically calculated from your primary colour (darkened slightly). Uncheck Auto-derive to set a custom hover colour manually.
Typography settings
Section titled “Typography settings”Slate lets you set separate fonts for headings and body text.
Heading font
Section titled “Heading font”The heading font applies to all heading levels (H1 through H4) in your course. Choose a font family and weight.
Body font
Section titled “Body font”The body font applies to paragraph text and general content. Choose a font family and weight.
Available weights
Section titled “Available weights”Both heading and body fonts support these weight options, depending on the font:
- 100 (Thin) through 900 (Black), in increments of 100
When you switch fonts, the weight automatically adjusts to the closest available weight for the new font.
Font sources
Section titled “Font sources”Google Fonts
Section titled “Google Fonts”Slate includes 30 Google Fonts organized by category: Sans-Serif, Serif, Display, Handwriting, and Monospace. Popular options include Inter, Open Sans, Roboto, Lato, Poppins, Playfair Display, and Merriweather.
All Google Fonts are available on every plan.
Custom fonts
Section titled “Custom fonts”Upload your own brand fonts for use in your courses. Custom fonts appear in a “Your Fonts” section at the top of the font picker. See Custom Fonts for upload details.
Custom font uploads require a Standard or Pro plan.
Layout settings
Section titled “Layout settings”In addition to colours and fonts, the theme editor includes layout controls:
- Border radius - how rounded your buttons and containers appear
- Spacing - the amount of padding between content elements