Design System

Design System

Label

Text

Overview

A mono micro-label: 0.8125rem, 700, 0.08em tracking, capitals, in accent-text. It names a region or a value.

Live example

Published postsSelect languageSep 23, 2026

Usage

  • Type the text in sentence case and let CSS set the capitals to prevent the screen reader to announce letters and announce words.
  • Use it for eyebrows, the listbox heading and counts: "Published posts". Keep it to two or three words.
  • accent-text on background, muted and secondary is 9.70:1 or better (AAA), so it stays readable at 13px. accent alone is 5.68:1 there, which is too thin for small capitals. Do not put the label on accent or on a photo.

Accessibility

This section is still in progress.

Related

This section is still in progress.

References

This section is still in progress.

On this page