Home

Copyright

Usage

The copyright component is typically in the footer. Start with:

  • --copyright-font-size and --copyright-color for tone

  • --copyright-link-color and --copyright-link-color-hover for holder links

Tokens

TokenDescriptionDefault Value
--copyright-font-familyFont familyvar(--layout-font-family)
--copyright-font-sizeFont sizevar(--layout-font-size)
--copyright-colorText colorvar(--text-color-secondary)
--copyright-link-colorHolder link colorvar(--text-color-secondary)
--copyright-link-color-hoverHolder link hover colorvar(--text-color-primary)

Examples

Muted Footer Legal

:root {
  --copyright-color: var(--text-color-muted);
  --copyright-link-color: var(--text-color-muted);
  --copyright-link-color-hover: var(--text-color-secondary);
}

Compact Footer Text

:root {
  --copyright-font-size: var(--font-size-xs);
}

Tips

Match footer tone: Use muted colors so legal text does not compete with navigation.

Link clarity: Keep hover color distinct enough to signal interactivity.

© 2026 Stencila