Enterprise preview: content, claims and integrations remain subject to review.View launch readiness
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