Usage

Thematic breaks (<hr>) separate sections or signal transitions. Start with these tokens when customizing:

--thematic-break-spacing-top and --thematic-break-spacing-bottom to align breaks with the document rhythm

--thematic-break-border-width, --thematic-break-border-color, and --thematic-break-border-style for line weight and character

--thematic-break-width plus --thematic-break-margin-left/--thematic-break-margin-right to control alignment and centered rules

--thematic-break-border-width-print for thinner rules in print output

Spacing defaults to --content-spacing, so breaks scale automatically across screen, mobile, and print without extra media queries.

Tokens

Design tokens for thematic breaks control the appearance of horizontal rules (<hr>) used to separate sections or indicate thematic transitions in documents.

Token	Description	Default Value
`--thematic-break-spacing-top`	Vertical spacing above break (automatic responsive scaling)	`var(--content-spacing)`
`--thematic-break-spacing-bottom`	Vertical spacing below break (automatic responsive scaling)	`var(--content-spacing)`
`--thematic-break-border-width`	Line thickness	`var(--border-width-default)`
`--thematic-break-border-width-print`	Line thickness for print media	`var(--border-width-default)`
`--thematic-break-border-color`	Line color	`var(--border-color-default)`
`--thematic-break-border-style`	Line style (solid, dashed, double, etc.)	`solid`
`--thematic-break-width`	Horizontal width of the line	`100%`
`--thematic-break-margin-left`	Left margin (use with width for alignment)	`0`
`--thematic-break-margin-right`	Right margin (use with width for alignment)	`0`

Examples

Default Thematic Breaks

Standard horizontal rule with automatic responsive spacing:

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

This is content before the first thematic break.

This is content after the first thematic break.

This is content after the second thematic breaks.

Decorative Breaks

Ornamental rules with special styling:

:root {
  --thematic-break-border-width: 2px;
  --thematic-break-border-style: double;
  --thematic-break-border-color: var(--color-accent);
  --thematic-break-width: 50%;
  --thematic-break-margin-left: auto;
  --thematic-break-margin-right: auto;
}

Section one with decorative separation.

Section two following a centered ornamental rule.

Dashed Breaks

Informal, casual styling:

:root {
  --thematic-break-border-style: dashed;
  --thematic-break-border-color: var(--color-gray-400);
}

Casual content section.

Another casual section with dashed separator.

Compact Breaks

Reduced spacing for dense content:

:root {
  --thematic-break-spacing-top: calc(var(--content-spacing) * 0.5);
  --thematic-break-spacing-bottom: calc(var(--content-spacing) * 0.5);
  --thematic-break-border-width: 1px;
  --thematic-break-border-color: var(--color-gray-500);
}

Dense content that needs tight spacing.

More dense content with minimal separation.

Short Centered Breaks

Partial-width rules centered on the page:

:root {
  --thematic-break-width: 30%;
  --thematic-break-margin-left: auto;
  --thematic-break-margin-right: auto;
  --thematic-break-border-width: 1px;
}

Content separated by a short centered rule.

The short rule creates a refined visual break.

Tips

Rhythm: Break spacing is tied to --content-spacing, so adjust --thematic-break-spacing-top/bottom only when you want breaks to diverge from the document rhythm.

Alignment: Use --thematic-break-width with left/right margins to create centered or inset rules without custom CSS.

Print: Use --thematic-break-border-width-print when you want thinner rules in print than on screen.