Colours & type

Appearance → Editor → Styles. Colour and typography are separate variations, so you can pair any palette with any typeface — 40 combinations, each a couple of clicks.

The palettes

Variation Primary Suits
Teal #0f766e The default. Online academies, general education
Indigo #4338ca Universities, colleges, research institutes
Forest #15803d Language schools, environmental and outdoor programmes
Slate #334155 Bootcamps, professional and technical training
Plum #9333ea Arts, music and creative studios
Ember #c2410c Primary schools, kindergartens, children's classes
Midnight #7dd3fc Dark by default — technical and evening programmes
Graphite #5eead4 Dark by default — neutral and editorial

Every palette defines the same ten slugs, so changing one restyles the whole site, patterns included. Two of them — Midnight and Graphite — are dark grounds, and set their button text accordingly so a call to action never comes out light-on-light.

Contrast

Every text and control colour in every palette meets WCAG AA on its own ground, in both the light and the dark scheme. That is measured, not asserted: the HTML template Academia grew out of used #1eb2a6, which is 2.63:1 on white and fails as both text and a button ground, so the palette keeps the hue and darkens it to 5.47:1.

If you change a palette colour yourself, check it. A primary that is too pale makes a button read as disabled.

The typefaces

Variation Headings Body Suits
Manrope & Inter Manrope Inter The default. Clear and contemporary
Fraunces & Inter Fraunces Inter Universities and anything wanting authority
Poppins & Nunito Poppins Nunito Schools and children's classes
Space Grotesk & Inter Space Grotesk Inter Bootcamps and technical programmes
Inter Inter Inter Neutral throughout

All six families are self-hosted in the theme — no Google Fonts request, no third-party connection. Each is a variable font subset to latin and latin-ext.

Dark mode

The sun/moon button in the header is for your visitors, and their choice is remembered and applied before the page paints, so there is no flash of the wrong scheme.

It lifts your palette rather than replacing it: a Forest site stays green in the dark. The neutrals swap to a dark set and the palette's own colours are lightened just enough to stay legible on it.

Don't want it? Delete the button from the header template part. Its script and stylesheet then never load.

Spacing and type scale

Both are fluid. One value covers a phone and a wide desktop, so there are no breakpoint jumps — a section that is 96px tall on a desktop is 48px on a phone without a media query. The spacing scale has seven steps and the theme uses no value outside it, which is what keeps a course page and a contact page on the same rhythm.