Tint

Override colour tokens within a single rune's scope. The tint rune produces no visible output — it modifies how the containing section renders by setting --tint-* CSS custom properties and data-tint attributes.

Named tint (attribute form)

The simplest form. Reference a named tint defined in the theme configuration as an attribute on any block rune.

{% hint type="note" tint="warm" %}
This hint uses a **warm** tint from the theme. The colours come from the theme's `tints.warm` definition.
{% /hint %}

<section data-field="content-section" data-rune="hint" data-rune-fields="{&quot;hintType&quot;:&quot;note&quot;}">
  <div data-name="body">
    <p>
      This hint uses a
      <strong marker="**">warm</strong>
      tint from the theme. The colours come from the theme's
      <code>tints.warm</code>
      definition.
    </p>
  </div>
  <meta data-field="tint" content="warm">
</section>

This hint uses a warm tint from the theme. The colours come from the theme's tints.warm definition.

<section data-field="content-section" class="rf-hint rf-hint--note rf-hint--tinted" data-hint-type="note" data-elevation="sunken" data-tint="warm" data-tint-dark="" data-rune="hint" data-density="compact" style="--tint-bg: var(--rf-color-surface-active); --tint-text: var(--rf-color-text); --tint-primary: var(--rf-color-warning); --tint-border: var(--rf-color-border); --tint-dark-bg: #2a2018; --tint-dark-text: var(--rf-color-text); --tint-dark-primary: var(--rf-color-warning); --tint-dark-border: #4a3f33">
  <div data-name="header" data-zone="header" data-zone-layout="bar" class="rf-hint__header" data-section="header">
    <span>
      <span data-icon-group="hint" data-icon="note"></span>
      <span data-meta-value="">note</span>
    </span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>
      This hint uses a 
      <strong marker="**">warm</strong>
       tint from the theme. The colours come from the theme's 
      <code>tints.warm</code>
       definition.
    </p>
  </div>
</section>

Inline tint (child rune form)

For one-off colour overrides. Token values are defined as list items inside the tint body. The tint must be the first child of the parent rune.

{% hint type="check" %}

{% tint %}
- background: #ecfdf5
- accent: #059669
- border: #a7f3d0
{% /tint %}

This hint has custom colours defined inline. Only the listed tokens are overridden — unlisted ones fall through to the page defaults.

{% /hint %}

<section data-field="content-section" data-rune="hint" data-rune-fields="{&quot;hintType&quot;:&quot;check&quot;}">
  <div data-name="body">
    <p>This hint has custom colours defined inline. Only the listed tokens are overridden — unlisted ones fall through to the page defaults.</p>
  </div>
  <meta data-field="tint" content="custom">
  <meta data-field="tint-background" content="#ecfdf5">
  <meta data-field="tint-accent" content="#059669">
  <meta data-field="tint-border" content="#a7f3d0">
</section>

This hint has custom colours defined inline. Only the listed tokens are overridden — unlisted ones fall through to the page defaults.

<section data-field="content-section" class="rf-hint rf-hint--check rf-hint--tinted" data-hint-type="check" data-elevation="sunken" data-tint="custom" data-rune="hint" data-density="compact" style="--tint-border: #a7f3d0">
  <div data-name="header" data-zone="header" data-zone-layout="bar" class="rf-hint__header" data-section="header">
    <span>
      <span data-icon-group="hint" data-icon="check"></span>
      <span data-meta-value="">check</span>
    </span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>This hint has custom colours defined inline. Only the listed tokens are overridden — unlisted ones fall through to the page defaults.</p>
  </div>
  <meta data-field="tint-background" content="#ecfdf5" />
  <meta data-field="tint-accent" content="#059669" />
</section>

Colour scheme override

The mode attribute forces dark or light mode on a section, regardless of the user's OS preference.

{% hint type="note" %}

{% tint mode="dark" %}
- background: #1e293b
- primary: #e2e8f0
- accent: #38bdf8
- border: #334155
{% /tint %}

This section is forced into **dark mode** with custom token values.

{% /hint %}

<section data-field="content-section" data-rune="hint" data-rune-fields="{&quot;hintType&quot;:&quot;note&quot;}">
  <div data-name="body">
    <p>
      This section is forced into
      <strong marker="**">dark mode</strong>
      with custom token values.
    </p>
  </div>
  <meta data-field="tint" content="custom">
  <meta data-field="tint-mode" content="dark">
  <meta data-field="tint-background" content="#1e293b">
  <meta data-field="tint-primary" content="#e2e8f0">
  <meta data-field="tint-accent" content="#38bdf8">
  <meta data-field="tint-border" content="#334155">
</section>

This section is forced into dark mode with custom token values.

<section data-field="content-section" class="rf-hint rf-hint--note rf-hint--tinted" data-hint-type="note" data-elevation="sunken" data-tint="custom" data-color-scheme="dark" data-rune="hint" data-density="compact" style="--tint-primary: #e2e8f0; --tint-border: #334155">
  <div data-name="header" data-zone="header" data-zone-layout="bar" class="rf-hint__header" data-section="header">
    <span>
      <span data-icon-group="hint" data-icon="note"></span>
      <span data-meta-value="">note</span>
    </span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>
      This section is forced into 
      <strong marker="**">dark mode</strong>
       with custom token values.
    </p>
  </div>
  <meta data-field="tint-background" content="#1e293b" />
  <meta data-field="tint-accent" content="#38bdf8" />
</section>

Light and dark definitions

Provide separate token sets for light and dark colour schemes using headings inside the tint body.

{% hint type="note" %}

{% tint %}
## Light
- background: #fdf6e3
- primary: #5c4a32
- accent: #c47d3b
- border: #e0d5c0

## Dark
- background: #2a2118
- primary: #e8d5b7
- accent: #e0a86e
- border: #4a3f33
{% /tint %}

This section adapts its warm tint to both colour schemes.

{% /hint %}

When no headings are present, all tokens are treated as light-mode values. The ## Light heading is only needed when ## Dark is also present.

Preset with overrides

Start from a named tint and override specific tokens.

{% hint type="note" %}

{% tint preset="warm" %}
- accent: #e94560
{% /tint %}

Inherits all tokens from the "warm" preset, with a custom accent colour.

{% /hint %}

Mode-only (no colour tokens)

Switch the colour scheme without custom colours using the tint-mode attribute directly on the parent rune.

{% hero layout="full" tint-mode="dark" %}
# Welcome
Build something amazing.
{% /hero %}

This applies the theme's standard dark mode styles without any custom colour tokens.

Token set

The tint rune operates on six colour tokens, namespaced as --tint-*. Field names align with the design token contract (SPEC-053) — each tint token maps to its --rf-color-* counterpart:

Token	CSS Property	Maps to	Purpose
`bg`	`--tint-bg`	`--rf-color-bg`	Section background colour
`surface`	`--tint-surface`	`--rf-color-surface`	Raised surface colour (cards, panels)
`text`	`--tint-text`	`--rf-color-text`	Body text colour
`muted`	`--tint-muted`	`--rf-color-muted`	Secondary / muted text colour
`primary`	`--tint-primary`	`--rf-color-primary`	Interactive primary colour (links, accents)
`border`	`--tint-border`	`--rf-color-border`	Border and divider colour

Tokens are namespaced as --tint-* rather than directly overriding theme tokens. The theme's CSS bridges the two with fallbacks:

[data-tint] {
  --rf-color-bg: var(--tint-bg, var(--rf-color-bg));
  --rf-color-text: var(--tint-text, var(--rf-color-text));
  --rf-color-primary: var(--tint-primary, var(--rf-color-primary));
  /* ... */
}

Attributes

Attribute	Type	Required	Description
`preset`	`string`	—	Named tint preset from the theme
`mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

Not available	Why
bg, dropcap, elevation, frame, inset, motion (reveal, stagger), prominence, reading, spacing, substrate, tint, width	this rune supplies axis values to its parent rather than carrying its own

The tint axis on other runes

Every rune that carries the tint axis accepts these directly — no {% tint %} child needed.

Attribute	Type	Default	Description
`tint`	`string`	—	Named tint from theme config
`tint-mode`	`string`	—	Colour scheme override: `auto`, `dark`, or `light`

Identity transform output

The tint rune adds attributes and inline styles to the parent rune's root element:

Output	Condition	Example
`data-tint`	Named or inline tint	`data-tint="warm"` or `data-tint="custom"`
`data-color-scheme`	Mode is not `auto`	`data-color-scheme="dark"`
`data-tint-dark`	Dark tokens provided	`data-tint-dark`
`--tint-*` styles	Light tokens	`style="--tint-bg: #fdf6e3"`
`--tint-dark-*` styles	Dark tokens	`style="--tint-dark-bg: #2a2118"`
`--tinted` modifier	Tokens present	`.rf-hint--tinted`

Nesting

Tints can nest. An inner tint overrides an outer tint within its scope. CSS custom property inheritance handles this naturally.

{% hero tint="dark" layout="full" %}
# Our Recipes

{% hint tint="warm" %}
This hint has warm colours inside a dark hero.
{% /hint %}

{% /hero %}

Theme configuration

Themes define named tints in their configuration. Light values are set as inline styles (no FOUC). Dark values are provided by the theme's CSS.

// theme config
tints: {
  warm: {
    light: {
      background: '#fdf6e3',
      primary: '#5c4a32',
      accent: '#c47d3b',
      border: '#e0d5c0',
    },
    dark: {
      background: '#2a2118',
      primary: '#e8d5b7',
      accent: '#e0a86e',
      border: '#4a3f33',
    },
  },
  dark: {
    mode: 'dark',
    dark: {
      background: '#1a1a2e',
      primary: '#e0e0e0',
      accent: '#e94560',
    },
  },
}

A theme without tint bridge CSS simply ignores tint tokens — the section renders with page defaults.

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan