---
title: Style YAML reference
description: The accepted style leaves and their value grammar, generated from the loader.
styles: [scientific]
---

Start with [styles and your brand](https://richview.ai/docs/styles) 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 |