Skip to content

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.

The theme editor provides four color controls:

SettingWhat it controls
Primary colorButtons, links, active states, and accent elements
Hover colorButton hover state. Auto-derived from primary by default, or set manually.
Outline colorButton borders and divider lines
Outline thicknessButton border width (0-4px). Set to 0 to remove borders entirely.

By default, the hover color is automatically calculated from your primary color (darkened slightly). Uncheck Auto-derive to set a custom hover color manually.

Slate lets you set separate fonts for headings and body text.

The heading font applies to all heading levels (H1 through H4) in your course. Choose a font family and weight.

The body font applies to paragraph text and general content. Choose a font family and weight.

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.

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.

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.

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