Document

Novem documents draw their general colours, fonts and surfaces from the Colors primitives that every visualisation consumes. The variables on this page cover document-only chrome: the cover page, running header and footer, page numbers, tables, callouts and the inline content elements that show up inside body copy.

The Aliases column lists named-color tokens that resolve to the variable when used in API instructions.

Tables

Tables in novem documents follow a single set of theme tokens that covers the header row, the alternating stripe, the cell border and the totals or section rows that often appear at the bottom or between groups of rows.

Callouts

Novem callouts draw their semantic colour from the Status indicators on the Colors page (--novem-ok, --novem-warn, --novem-err and --novem-info plus their -bg and -on-* companions). The visual treatment of the callout box itself is themed here — the border style and width, the corner radius and the inner padding. These primitives sit alongside the colour tokens because they're inseparable from callout theming in practice.

Inline emphasis

Inline marks inside body text — highlights, marked spans, definition emphasis — are controlled through a small pair of tokens.

Author byline

The author byline is the small block that displays a sender or author alongside the avatar, name and handle. It shows up in mails as the "from" header and in docs that surface authorship metadata.

Call to action

A call to action is a styled content link that points the reader at another resource — a "Read more", "Open dashboard" or "View report" block. It's especially common in mails, where it acts as the visual focal point of the message, and shows up in docs and grids whenever the content needs to direct the reader somewhere else. A CTA is a piece of content rather than a UI button, so the size primitives sit alongside the colour ones.

Page types

A page can declare a free-form type: value in its meta to receive a matching CSS class on the page itself. Themes use this hook to apply page-specific styling without inventing per-page tokens.

{{ page type: centered }}
# A centered page

Vislib emits novem--doc--page--type-centered on .novem--doc--page, alongside the existing data-page-type attribute and the --doc-title / --doc-author / --doc-date custom properties — so all type-specific theming sits on a single element:

.novem--doc--page--type-centered .novem--doc--page-content {
  align-items: center;
  justify-content: center;
}

In the continuous blog/web flow the same class is applied to the .novem--doc--blog-header (cover-style entries) or .novem--doc--blog-content section that stands in for a page, so a single selector keeps working across both layouts. The value is sanitised before it reaches the DOM:

• Only the first whitespace-delimited word is used — type: cover sheet becomes cover
• Lowercased
• Reduced to [a-z0-9] — hyphens, underscores and other punctuation are stripped
• Leading digits are removed — type: 2col becomes col
• An empty result is dropped, so no class is added

Document meta and generated text

Frontmatter reaches CSS as four document-wide custom properties, so a running header or footer can print it on every page. The engine quote-wraps and escapes each value, so it drops straight into a content: property.

These are not the --doc-* properties above: those carry cover semantics and are stripped on auto-pagination continuations, while --doc-meta-* are document-wide and repeat on continuations.

A literal string in a content: rule is the same text in every document that uses the theme — including documents not written in the theme author's language. So keep words out of generated text and take the whole line from the document; punctuation and glyphs are fine, they carry no language.

/* Wrong — "UPDATED" is fixed by the theme, so a German document
   renders "UPDATED 3. MÄRZ 2026" */
.novem--doc--page-header::after {
  content: "UPDATED " var(--doc-meta-date);
}

/* Right — the frontmatter carries the words as well as the date */
.novem--doc--page-header::after {
  content: var(--doc-meta-date);
}

The words now live where a translator can reach them:

---
date: AKTUALISIERT 3. MÄRZ 2026
---

The same rule covers any label a theme prefixes onto document text — a content: "BY " ahead of the cover author, say. If the wording has to follow the document's language, it belongs in the document.

For a running line that is real text rather than pseudo-element content, the header: and footer: page options interpolate any frontmatter key into the header and footer bands, and the theme only styles the band:

---
date: 3 MARCH 2026
header: UPDATED {meta.date}
---

In frontmatter it applies document-wide; inside a {{ page }} block it overrides that one page, and false hides the band.

Cover

The cover page sits at the start of a document and typically uses the brand surface colours from the Colors page. The variables below let you override those defaults specifically for the cover without affecting other surfaces.

Page header

The running header that appears at the top of every page has its own small set of tokens for the background, the bottom rule and the text.

Page footer and numbering

The running footer follows the same pattern as the header, with a separate token for the page number colour because brands often want it to stand out.

Spacing

Page padding is controlled per direction so you can tune portrait and landscape layouts independently.

Shape and decoration

A small set of non-colour primitives controls the corner radius, the default shadow and the table cell padding.

Presenter mode

When a document is opened in presenter mode (the /present route) the deck takes over the viewport. The variables below control the backdrop behind the slides and the highlight ring drawn around the currently- selected thumbnail in the overview grid. They have no effect outside the presenter — the regular doc view ignores them.

--novem-presenter-progress accepts any value the CSS background-image property accepts, so themes can use a solid colour (#0184a7), a gradient (the default), or even a layered set of backgrounds. The strip is sized to 100vw 100% so the colour band runs end-to-end of the deck regardless of how full the bar is.