Colors & Typography
Set the colors and fonts that define your course’s visual identity. These settings apply to the entire course player, including buttons, links, navigation, and content areas.
Color settings
Section titled “Color settings”The theme editor provides five color controls:
| Setting | What it controls |
|---|---|
| Primary color | Buttons, links, active states, and accent elements |
| Primary text color | 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 color | Button hover state. Auto-derived from primary by default, or set manually. |
| Outline color | 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 color
Section titled “Auto-derive primary text color”By default, Slate picks the text color on these buttons and active areas based on the brightness of your primary color: 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 color. 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 color
Section titled “Auto-derive hover color”By default, the hover color is automatically calculated from your primary color (darkened slightly). Uncheck Auto-derive to set a custom hover color 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 colors 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