Usage

Start with these tokens when customizing lists:

--list-spacing and --list-item-spacing for vertical rhythm

--list-indent and --list-indent-nested for indentation hierarchy

--list-marker-color and --list-marker-gap for marker readability

--list-marker-content or --list-marker-unordered to change bullet shapes

Spacing and indentation scale with --content-spacing. Use --list-marker-content/--list-marker-nested-content to supply custom glyphs; keep them set to normal to use the --list-marker-unordered/--list-marker-ordered keywords instead.

Tokens

Design tokens for lists define spacing, indentation, marker appearance, and nesting behavior. These tokens allow for consistent control over both ordered and unordered lists at multiple nesting levels, with separate controls for visual hierarchy and readability.

Token	Description	Default Value
`--list-spacing`	Vertical spacing before lists (`margin-top`)	`var(--content-spacing)`
`--list-spacing-nested`	Vertical spacing before nested lists (`margin-top`)	`calc(var(--content-spacing) * 0.25)`
`--list-indent`	Main list indentation from page margin	`calc(var(--content-spacing) * 0.75)`
`--list-indent-nested`	Additional indentation for nested lists	`calc(var(--content-spacing) * 0.25)`
`--list-item-spacing`	Vertical spacing between list items (`margin-bottom`)	`calc(var(--list-spacing) * 0.25)`
`--list-marker-gap`	Space between marker and content	`var(--space-2)`
`--list-marker-color`	Color of bullets, numbers, and markers	`var(--text-color-muted)`
`--list-marker-color-dark`	Color of bullets, numbers, and markers in dark mode	`var(--text-color-muted-dark)`
`--list-marker-content`	Custom content for unordered markers (overrides `list-style-type` when set)	`normal`
`--list-marker-nested-content`	Custom content for nested unordered markers (overrides `list-style-type` when set)	`normal`
`--list-marker-unordered`	Style for unordered list markers (CSS `list-style-type`)	`disc`
`--list-marker-ordered`	Style for ordered list markers (CSS `list-style-type`)	`decimal`
`--list-marker-nested-unordered`	Style for nested unordered markers	`circle`
`--list-marker-nested-ordered`	Style for nested ordered markers	`lower-alpha`

Examples

Default Lists

Standard list styling with automatic responsive spacing and indentation:

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

Unordered Lists

First item with default bullet styling

Second item demonstrating spacing

Third item with nested content:

Nested item with automatic indentation

Another nested item

Third level nesting:

Deep nested item

Ordered Lists

First numbered item

Second item with proper numbering

Third item with nested content:

Nested numbered item

Another nested numbered item

Compact Lists

Perfect for dense content like documentation or scholarly papers:

:root {
  --list-indent: calc(var(--content-spacing) * 0.5);
  --list-item-spacing: var(--space-1);
  --list-marker-gap: var(--space-1);
}

Mercury (closest to Sun, 88-day orbit)

Venus (hottest planet, 462°C surface)

Earth (only known planet with life)

Mars (red color from iron oxide)

Spacious Lists

Better for readability in educational content and presentations:

:root {
  --list-indent: calc(var(--content-spacing) * 1.5);
  --list-item-spacing: var(--space-8);
  --list-marker-gap: var(--space-4);
}

Conduct literature review of existing research

Design experimental methodology and protocols

Collect and analyze data using statistical methods

Prepare manuscript for peer review

Minimal Lists

Clean, minimal styling with custom bullet markers:

:root {
  --list-indent: calc(var(--content-spacing) * 0.5);
  --list-item-spacing: var(--space-1);
  --list-marker-content: '• ';
  --list-marker-nested-content: '◦ ';
  --list-marker-color: var(--color-accent);
}

Python

pandas

numpy

ggplot2

dplyr

Julia

DataFrames.jl

Plots.jl

Custom Markers

Create unique list hierarchies with custom nested markers:

:root {
  --list-marker-ordered: upper-roman;
  --list-marker-nested-content: '▸ ';
  --list-marker-nested-ordered: lower-alpha;
}

Research Design

Hypothesis formulation

Variable identification

Data Collection

Sample selection

Measurement protocols

Tufte-Style Lists

Minimal lists with en-dash markers (Tufte's preferred style):

:root {
  --list-marker-content: '– ';
  --list-marker-nested-content: '– ';
  --list-marker-color: var(--text-color-muted);
  --list-indent: calc(var(--content-spacing) * 0.5);
  --list-item-spacing: calc(var(--content-spacing) * 0.15);
}

Introduction and background

Methods and materials

Study design

Data collection

Results and discussion

Conclusions

Tips

Custom markers: Use --list-marker-content and --list-marker-nested-content to supply glyphs for unordered lists; keep them normal to use list-style-type keywords instead.

Ordered lists: Use --list-marker-ordered and --list-marker-nested-ordered to control numbering styles for <ol>.

Marker spacing: Adjust --list-marker-gap to tune the distance between marker and content without changing list indentation.