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">
  <meta content="note" data-field="hint-type">
  <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-tint="warm" data-tint-dark="" data-rune="hint" data-density="compact" style="--tint-background: var(--rf-color-surface-active); --tint-primary: var(--rf-color-text); --tint-accent: var(--rf-color-warning); --tint-border: var(--rf-color-border); --tint-dark-background: #2a2018; --tint-dark-primary: var(--rf-color-text); --tint-dark-accent: var(--rf-color-warning); --tint-dark-border: #4a3f33">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">note</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">
  <meta content="check" data-field="hint-type">
  <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-tint="custom" data-rune="hint" data-density="compact" style="--tint-background: #ecfdf5; --tint-accent: #059669; --tint-border: #a7f3d0">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">check</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>
</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">
  <meta content="note" data-field="hint-type">
  <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-tint="custom" data-color-scheme="dark" data-rune="hint" data-density="compact" style="--tint-background: #1e293b; --tint-primary: #e2e8f0; --tint-accent: #38bdf8; --tint-border: #334155">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">note</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>
</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-*:

Token	CSS Property	Purpose
`background`	`--tint-background`	Section background colour
`surface`	`--tint-surface`	Raised surface colour (cards, panels)
`primary`	`--tint-primary`	Primary text colour
`secondary`	`--tint-secondary`	Secondary/muted text colour
`accent`	`--tint-accent`	Accent colour (links, highlights)
`border`	`--tint-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-background, var(--rf-color-bg));
  --rf-color-text: var(--tint-primary, var(--rf-color-text));
  --rf-color-primary: var(--tint-accent, var(--rf-color-primary));
  /* ... */
}

Attributes

On the `tint` child rune

Attribute	Type	Default	Description
`preset`	`string`	—	Named tint from theme config as starting point
`mode`	`string`	`"auto"`	Colour scheme: `auto`, `dark`, or `light`

On any parent rune

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-background: #fdf6e3"`
`--tint-dark-*` styles	Dark tokens	`style="--tint-dark-background: #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.

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Tint

Named tint (attribute form)

Inline tint (child rune form)

Colour scheme override

Light and dark definitions

Preset with overrides

Mode-only (no colour tokens)

Token set

Attributes

On the `tint` child rune

On any parent rune

Identity transform output

Nesting

Theme configuration

Tint

Named tint (attribute form)

Inline tint (child rune form)

Colour scheme override

Light and dark definitions

Preset with overrides

Mode-only (no colour tokens)

Token set

Attributes

On the tint child rune

On any parent rune

Identity transform output

Nesting

Theme configuration

On the `tint` child rune