Usage

Start with these tokens when customizing creative works:

--work-content-max-width and --work-content-max-width-mobile for readable line length

--work-title-* tokens to control title typography, spacing, and alignment

--work-authors-* and --work-abstract-* to style metadata slots

--work-toc and --work-toc-title to toggle and label the table of contents

Work tokens focus on the container and its major slots (title, authors, abstract, content, references). Content blocks inside the work still use their own node tokens (paragraphs, headings, figures, etc.).

These tokens apply to all creative work types: <stencila-article>, <stencila-skill>, <stencila-agent>, and <stencila-workflow>.

Tokens

Layout Tokens

Control the overall work width and responsive sizing.

Token	Description	Default Value
`--work-content-max-width`	Max width for work content blocks	`var(--content-width)`
`--work-content-max-width-mobile`	Max width for work content on mobile	`var(--content-width-mobile)`

Title Tokens

Typography and layout for the work title slot.

Token	Description	Default Value
`--work-title-font-family`	Font family for the work title	`var(--heading-font-family)`
`--work-title-font-size`	Title font size	`calc(var(--text-font-size) * 2.5)`
`--work-title-font-size-mobile`	Title font size on mobile	`calc(var(--text-font-size-print) * 2.0)`
`--work-title-font-size-print`	Title font size in print	`calc(var(--text-font-size-print) * 2.0)`
`--work-title-font-weight`	Title font weight	`var(--font-weight-bold)`
`--work-title-line-height`	Title line height	`var(--line-height-tight)`
`--work-title-line-height-mobile`	Title line height on mobile	`var(--line-height-tight)`
`--work-title-letter-spacing`	Letter spacing for the title	`-0.02em`
`--work-title-color`	Title text color	`var(--text-color-primary)`
`--work-title-text-align`	Title text alignment	`center`
`--work-title-max-width`	Max width for the title block	`calc(var(--work-content-max-width) * 0.9)`
`--work-title-margin-bottom`	Space below the title block	`var(--space-8)`

Authors Tokens

Typography and spacing for the authors slot.

Token	Description	Default Value
`--work-authors-font-size`	Authors font size	`var(--text-font-size)`
`--work-authors-color`	Authors text color	`var(--text-color)`
`--work-authors-text-align`	Authors text alignment	`left`
`--work-authors-margin-bottom`	Space below the authors block	`var(--space-6)`

Abstract Tokens

Styling for the abstract slot and its background.

Token	Description	Default Value
`--work-abstract-font-size`	Abstract font size	`var(--text-font-size)`
`--work-abstract-color`	Abstract text color	`var(--text-color)`
`--work-abstract-background`	Abstract background color	`var(--surface-background)`
`--work-abstract-text-align`	Abstract text alignment	`left`
`--work-abstract-max-width`	Max width for abstract content	`var(--work-content-max-width)`
`--work-abstract-margin-bottom`	Space below the abstract block	`var(--space-6)`

Table of Contents Tokens

Configuration for the automatic table of contents.

Token	Description	Default Value
`--work-toc`	TOC mode (`none`, `true`, or heading depth 1-6)	`none`
`--work-toc-title`	TOC heading text	`"Contents"`

Examples

Default Article

Standard article styling with the base layout and title treatments:

:root {
  /* No design token overrides */
}

Modeling coastal ecosystems under changing climates

Jordan Hayes, Priya Natarajan, and Emilio Vargas

Abstract

We present a coupled hydrodynamic and ecological model that improves predictive accuracy for nutrient cycling in estuarine systems.

The model integrates tidal fluxes with species-level responses to temperature, producing stable forecasts across seasonal regimes.

Editorial Title Treatment

Larger, left-aligned title with tighter tracking and centered authors:

:root {
  --work-title-text-align: left;
  --work-title-font-size: calc(var(--text-font-size) * 3);
  --work-title-letter-spacing: -0.03em;
  --work-title-max-width: var(--work-content-max-width);
  --work-authors-text-align: center;
}

Field notes from the edge of the ice

Marina Cho and Luca Romano

This report documents daily observations gathered during the 2024 polar expedition, with a focus on sea ice melt and microbial activity.

Abstract Callout and TOC

Highlight the abstract and enable a short table of contents:

:root {
  --work-abstract-background: var(--surface-sunken);
  --work-abstract-text-align: justify;
  --work-abstract-max-width: calc(var(--work-content-max-width) * 0.95);
  --work-toc: 3;
  --work-toc-title: "On this page";
}

Abstract

We introduce a new sampling method for long-term climate archives that reduces uncertainty in sediment-derived temperature reconstructions.

Methods

Core samples were extracted from five coastal sites and processed using standardized isotope ratios for calibration.

Tips

Readable width: Adjust --work-content-max-width first, then tune --work-title-max-width for balance.

TOC depth: Use --work-toc: 3 (or any 1-6 value) to keep the contents concise.

Metadata alignment: Match --work-title-text-align with --work-authors-text-align for a unified header.