Theme

Charts

Charts and chart-like rendering — maps, calendars, heatmaps, mtables — consume a dedicated set of --novem-* primitives. General colour primitives live on the Colors page.

AI assisted, human approved — novem uses AI to review and keep our documentation up to date.

Novem charts pick up most of their styling from the general-purpose primitives on the Colors page — status indicators, value sentiment, brand, the categorical palette, surface and text. The variables on this page cover everything that is specific to chart rendering: the chart drawing surface, axes, gridlines, legend, tooltips, annotations and chart shape primitives.

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

Plot area

The plot area covers the chart drawing surface itself along with the title, subtitle and caption that sit around it.

NameLightDarkAliases
--novem-plot-bgtransparenttransparent
--novem-chart-title-color--novem-text--novem-text
--novem-chart-subtitle-color--novem-text-secondary--novem-text-secondary
--novem-chart-caption-color--novem-axis-text--novem-axis-text

Title typography and its tight line spacing are also theme defaults. An authored ltx: or lmb: control overrides the corresponding token for that line.

VariableDefaultPurpose
--novem-chart-title-font-size18pxTitle text size
--novem-chart-title-font-weight500Title text weight
--novem-chart-title-margin-bottom2pxSpace after the title line
--novem-chart-subtitle-font-size12pxSubtitle text size
--novem-chart-subtitle-font-weight400Subtitle text weight
--novem-chart-subtitle-margin-bottom4pxSpace after the subtitle line
--novem-chart-label-padding-x3pxDefault horizontal datapoint-label plate padding
--novem-chart-label-padding-y2pxDefault vertical datapoint-label plate padding
--novem-chart-label-radius2pxCorner radius for flat plate ends

Bar positive / negative

Some charts paint positive and negative values in different colours, the most common examples being waterfall charts, P&L bars and year-over-year deltas. Novem keeps these tokens distinct from the diverging-gradient sentiment tokens (--novem-good and --novem-bad) so a finance theme can saturate its P&L colours without affecting how heatmaps render.

NameLightDarkAliases
--novem-bar-positive--novem-good--novem-good
--novem-bar-negative--novem-bad--novem-bad

Axes

NameLightDarkAliases
--novem-axis-color#212529#dee2e6
--novem-axis-text#495057#9aa3b3

Gridlines

NameLightDarkAliases
--novem-gridline-color#e9ecef#2a3a4a

Legend

NameLightDarkAliases
--novem-legend-bgtransparenttransparent
--novem-legend-text--novem-text--novem-text
--novem-legend-bordertransparenttransparent

Tooltip

NameLightDarkAliases
--novem-tooltip-bg#212529#dee2e6
--novem-tooltip-text#ffffff#1a1a2e

Annotations and reference lines

NameLightDarkAliases
--novem-annotation-color--novem-text-secondary--novem-text-secondary

Map

NameLightDarkAliases
--novem-map-fill#e9ecef#2a3a4a
--novem-map-stroke#ffffff#1a1a2e
--novem-map-missing-fill#adb5bd#495057

Calendar heatmap

NameLightDarkAliases
--novem-calendar-empty-bg--novem-surface--novem-surface

Matrix tables (mtable)

Mtable cells are data-driven, so the theme primitives here cover the fallback cases where a cell has no explicit colour instruction. The endpoints of diverging cell fills and conditional bar colours come from the Value sentiment section on the Colors page.

NameLightDarkAliases
--novem-cell-default-bg#808080#212121
--novem-bar-default--novem-on-light--novem-on-dark
--novem-bar-divider--novem-on-light--novem-on-dark

Sizes and shape

A handful of non-colour primitives also live with charts. They control the geometry of axes, gridlines, tooltips, annotations and the chart marks themselves.

VariableDefaultPurpose
--novem-bar-radius0pxBar corner radius
--novem-pie-inner-radius00 for a pie, 0.3 to 0.7 for a donut
--novem-point-size4pxScatter and line point radius
--novem-line-width2pxLine and area stroke width
--novem-line-curvelinearlinear, monotone, step, etc.
--novem-axis-font-size11pxAxis label size
--novem-axis-width1pxAxis line thickness
--novem-axis-tick-size5pxTick mark length
--novem-gridline-width1pxGridline thickness
--novem-gridline-dashnoneStroke-dasharray (none for solid)
--novem-tooltip-radius4pxTooltip border radius
--novem-annotation-dash4 2Reference-line stroke-dasharray