Custom CSS

You never have to write CSS: Admin → Brand turns one color, your logos and your type into a readable academy in light and dark. When you want more than that — a different header, rounder cards, your product's exact button — Admin → Brand → Custom CSS takes a stylesheet of your own.

This page is the reference it's written against. Everything named here is a contract: it stays stable through every platform release, and a test in our build fails if any of it changes. Anything not named here (the class names you see in the page source, the order of elements inside a card) may change without notice, so a rule that targets it can stop working. Write against the reference and your stylesheet keeps working.

How it applies

• Learner pages only. Your stylesheet loads on every page of the academy learners see — home, courses, lessons, labs, certificates, the profile, shared progress reports — after the academy's own theme. The admin never wears it, and neither does the sign-in page (it is shared platform chrome that already carries your brand).
• It wins by default. Most of the academy's own styles live in CSS cascade layers, and your stylesheet loads last, unlayered, so a rule of yours beats the academy's at equal specificity without !important.
• Light and dark through light-dark(). The academy's palette is a set of CSS variables that already swap for dark mode. Set a token on :root and every place that reads it follows. To give a value per mode, write light-dark(<light>, <dark>): the academy sets color-scheme to whichever mode is in effect, so the function follows the reader's switch in the header and an academy locked to one mode. For showing an element in one mode only, the .theme-light-only / .theme-dark-only classes do the same job. Avoid hard-coded colors on text or backgrounds unless you give both modes.
• Draft, preview, publish. Save draft keeps your work as you go. Preview the draft on the academy shows it to you alone on the real pages (a banner says so); learners keep seeing the published stylesheet until you press Publish draft (an empty draft offers Remove custom CSS instead). Every publish is kept; History lists the last 20, and any of them is one click (Load as draft) from becoming the draft again.
• Limits. Up to 64 KB. No @import; url() only to https:// addresses or inline data:; no expression(), behavior: or -moz-binding. A save that breaks a rule tells you the line.

Color tokens

Set on :root, with light-dark() for a value per mode. Every component reads these; a brand color set on the Brand page already derives them all, so override only what you want different.

The status colors (--ok, --bad, --warn, --info) are the same in every academy on purpose: green means passed everywhere. Change them only with a reason.

Type and shape tokens

To use a font that isn't on the Brand page's list, declare an @font-face with an https:// source and point a type token at it.

Landmarks

Structural parts of the page carry a data-part attribute. Target them as [data-part="header"]. They are stable; the elements inside them are not, so style the landmark, or descendants by the classes below.

Classes

Controls share classes you can target without knowing their utility class names:

Examples

A dark navy header with white links, in both modes:

[data-part="header"] {
  background: #0b1d3a;
  border-bottom-color: #0b1d3a;
}
[data-part="header"] a,
[data-part="header"] button {
  color: #ffffff;
}

Rounder, bolder buttons everywhere:

.m-button {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

Your own display face for headings, and a warmer light-mode page:

@font-face {
  font-family: "Acme Display";
  src: url(https://cdn.acme.dev/fonts/acme-display.woff2) format("woff2");
  font-display: swap;
}
:root {
  --font-display: "Acme Display";
  --canvas: light-dark(#fbf8f3, #141210);
}

What stays out

• JavaScript. A stylesheet can't read a learner's session or change what a page records; a script could. Scripts stay out, so every academy's labs, progress and certificates stay trustworthy. Integrations go through webhooks and the API — see Integrations & exports.
• The admin. Staff screens keep the platform's own look so states read the same in every academy. Your brand shows in their previews.

For rows of your own on the home — a banner, a strip of cards, or a block of sanitized HTML your stylesheet can target — see Home & catalogs.