Style YAML reference

Start with styles and your brand for a small working override. This page lists the author-settable leaves from the same grammar that validates style files. Internal layout mechanics are excluded.

How the cascade works

Source styles is an ordered list. Later leaves win and lists replace lists. A list containing only local files starts from the default builtin. CLI --style supplies a replacement list for that call; repeat it to choose a builtin and then a file. A chart’s explicit local style takes priority over inherited chart defaults.

Safe leaves are the normal customization surface. Experimental leaves apply but emit style.experimental; inspect the result at the widths you intend to share. Unknown leaves report style.unknown-key, invalid values report style.schema, and attempts to change internal page mechanics report style.internal. A bad leaf is skipped while the rest of the file applies. YAML parse failures still need repair.

Use OKLCH for colour authoring. Font stacks name bundled families, or a font setting names a family and a local WOFF2 file. This interface accepts validated data, not arbitrary CSS or JavaScript.

Safe leaves

Path	Accepted value
`tokens.bg`	CSS colour, preferably OKLCH — Page surface
`tokens.bg-elev`	CSS colour, preferably OKLCH — Raised surface: code, readout
`tokens.bg-chart`	CSS colour, preferably OKLCH — Chart surface
`tokens.ink`	CSS colour, preferably OKLCH — Text
`tokens.ink-soft`	CSS colour, preferably OKLCH — Secondary text
`tokens.ink-faint`	CSS colour, preferably OKLCH — Ticks and leaders; never text
`tokens.chart-ink`	CSS colour, preferably OKLCH — Axis text and the baseline
`tokens.rule`	CSS colour, preferably OKLCH — Rules and hairlines
`tokens.rule-soft`	CSS colour, preferably OKLCH — Gridlines
`tokens.accent`	CSS colour, preferably OKLCH — The one accent: marks, rules, focus rings
`tokens.accent-soft`	CSS colour, preferably OKLCH — Band and brush fills
`tokens.link`	CSS colour, preferably OKLCH — Links and the table’s row summary
`tokens.brand`	CSS colour, preferably OKLCH — The style’s shade of the brand blue, for the wordmark
`tokens.up`	CSS colour, preferably OKLCH — Rising delta and callout title
`tokens.down`	CSS colour, preferably OKLCH — Falling delta and callout title
`tokens.hold`	CSS colour, preferably OKLCH — Hold callout title
`tokens.font-display`	Font family stack — A font stack; the first family must be bundled or declared
`tokens.font-text`	Font family stack — A font stack; the first family must be bundled or declared
`tokens.font-ui`	Font family stack — A font stack; the first family must be bundled or declared
`tokens.font-mono`	Font family stack — A font stack; the first family must be bundled or declared
`tokens.radius-s`	Nonnegative number or length — Small corners: inline code, the readout
`tokens.radius-m`	Nonnegative number or length — Medium corners: images, embeds, code
`tokens.shadow-float`	`none` or x, y, blur and colour — The shadow of floating elements
`tokens.scheme`	`light`, `dark` — The colour scheme the page colours make
`tokens.print-as`	Builtin style name — The light builtin a dark style prints as
`tokens.density`	Number from 0.5 to 2 — Space inside blocks, as a multiplier
`tokens.block-gap`	Nonnegative number or length — Space between blocks and before sections
`tokens.block-gap-phone`	Nonnegative number or length — The block gap on phones
`motion.enabled`	`true` or `false` — `false` renders charts settled
`motion.character`	`still`, `restrained`, `gentle`, `playful`, `crisp` — The style’s motion in one word; the blocks, charts and controls follow it
`motion.duration`	Number from 0 to 2000 — How long a block or a chart’s data takes to arrive, in ms
`motion.easing`	`standard`, `out`, `soft`, `spring`, `snap` — The curve of that arrival
`motion.stagger`	Number from 0 to 120 — The gap between marks that arrive one after another, in ms
`motion.block-entrance`	`none`, `fade`, `fade-up` — How blocks below the first screen arrive
`motion.distance`	Number from 0 to 40 — How far a fade-up block rises, in px
`components.deck.style`	`italic`, `normal` — The line under the title
`components.callout.border-width`	Nonnegative number or length — The callout rule’s weight
`components.header.border-top`	Nonnegative number or length — The bar above the header
`components.header.border-bottom`	Nonnegative number or length — The bar below the header
`components.rules.style`	`hairline`, `pencil` — Hairline or pencil rules
`components.title.transform`	`none`, `uppercase` — Letter case
`components.title.weight`	Font weight, 1–1000 or a weight name — Font weight
`components.title.letter-spacing`	`normal` or signed length — Tracking
`components.title.font`	`display`, `text`, `ui`, `mono` — Which face role it uses
`components.heading.transform`	`none`, `uppercase` — Letter case
`components.heading.weight`	Font weight, 1–1000 or a weight name — Font weight
`components.heading.letter-spacing`	`normal` or signed length — Tracking
`components.heading.font`	`display`, `text`, `ui`, `mono` — Which face role it uses
`components.table-head.transform`	`none`, `uppercase` — Letter case
`components.table-head.weight`	Font weight, 1–1000 or a weight name — Font weight
`components.table-head.letter-spacing`	`normal` or signed length — Tracking
`components.table-head.font`	`display`, `text`, `ui`, `mono` — Which face role it uses
`components.source-label.transform`	`none`, `uppercase` — Letter case
`components.source-label.weight`	Font weight, 1–1000 or a weight name — Font weight
`components.source-label.letter-spacing`	`normal` or signed length — Tracking
`components.source-label.font`	`display`, `text`, `ui`, `mono` — Which face role it uses
`components.figure.frame`	`none`, `shaded`, `outline`, `rule-above` — How a chart’s figure is framed: nothing, a shaded panel, an outline or a rule above
`components.figure.title`	`above`, `below` — Where the chart title sits relative to the plot
`components.figure.description`	`above`, `below`, `below-boxed` — Where the chart description sits: above the plot, below it, or below it in a box
`chart.palette`	Builtin palette or 1–8 colours — Series colours
`chart.ramp`	Exactly 3 colours — Sequential ramp, low to high
`chart.negative-ramp`	Exactly 3 colours — Ramp for negative heatmap values
`chart.font-family`	Font family stack — Face of all chart lettering
`chart.font-numeric`	Font family stack — Tabular-figure face of ticks and readout values
`chart.bar-radius`	Number from 0 to 64 — Rounding of bar ends
`chart.decals`	`true` or `false` — Hatches and dashes that stand in for colour
`chart.curve`	`linear`, `monotone`, `step`, `step_before`, `step_after` — Default line curve
`chart.curvature`	Number from 0 to 1 — How strongly a curve bends
`chart.sign-cue`	`none`, `hatch` — How negative heatmap cells show their sign beyond colour
`chart.legend`	`top`, `bottom` — Where the legend sits
`chart.line.smoothing`	`straight`, `monotone`, `current` — Line smoothing (replaced by curve)
`density`	`comfortable`, `loose`, `airmax` — Space inside blocks: x1, x1.25, x1.5
`block-gap`	`regular`, `tight`, `wide` — Space between blocks: 4, 3 or 5 rem
`type-size`	`large`, `small`, `bigger` — The whole type scale x1, x0.9, x1.1
`accent`	CSS colour, preferably OKLCH — The accent, first series and links
`palette`	Builtin palette or 1–8 colours — Series colours
`company.color`	Opaque colour — The company’s primary colour
`company.secondary`	Opaque colour — An optional second brand colour
`company.base`	Builtin style name — The builtin style underneath the brand
`motion`	`on`, `off` — `off` renders every chart settled
`colophon`	`show`, `hide` — The ‘Made with RichView’ line
`fonts.display`	Bundled font stack or `{family, file}` with local WOFF2 — A bundled family or a brand font file
`fonts.text`	Bundled font stack or `{family, file}` with local WOFF2 — A bundled family or a brand font file
`fonts.ui`	Bundled font stack or `{family, file}` with local WOFF2 — A bundled family or a brand font file
`fonts.mono`	Bundled font stack or `{family, file}` with local WOFF2 — A bundled family or a brand font file

Experimental leaves

Path	Accepted value
`tokens.size-small`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-small-phone`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-base`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-base-phone`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-h3`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-h3-phone`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-h2`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-h2-phone`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-h1`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-h1-phone`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-display`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.size-display-phone`	Nonnegative number or length — One step of the type scale; `type-size` scales the whole scale
`tokens.line-base`	Nonnegative number or length — Line height of body text
`components.metric.style`	`rule`, `bracket`, `knockout`, `underline` — How a metric is framed
`components.thumbnail.rule`	`none`, `hairline`, `ink-bars`, `pencil` — The structural mark of the story’s link-preview thumbnail
`components.callout.style`	`rule`, `bracket` — A callout under a rule, or beside a bracket
`company.name`	Non-empty company name — The company name
`company.logo`	Report-relative image file — A report-relative raster logo
`company.logo-dark`	Report-relative image file — An optional logo for dark styles