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

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.