tokens

Typography

Type scale tokens that define font sizes, line heights, and font weights across the design system. The scale is built on a harmonious progression from small labels up to large display headings, ensuring consistent visual hierarchy.

Usage Guidance

When to use

  • +Reference specific font sizes, weights, and line heights.
  • +Apply consistent type styling across custom components.
  • +Use --brz-font-* CSS custom properties in stylesheets.

When not to use

  • −Don't use arbitrary font sizes — always reference the type scale.
  • −Don't override font family — use the system font stack.

Examples

Code Samples

Heading Scale

Heading sizes from 3xl down to sm, used for page titles, section headers, and card headings.

<div style="display: flex; flex-direction: column; gap: 16px;">
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 30px; font-weight: 700; line-height: 1.2; color: #111827;">Heading 3XL</span>
    <span style="font-size: 12px; color: #9CA3AF;">30px / 700 / 1.2</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 24px; font-weight: 700; line-height: 1.25; color: #111827;">Heading 2XL</span>
    <span style="font-size: 12px; color: #9CA3AF;">24px / 700 / 1.25</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 20px; font-weight: 600; line-height: 1.3; color: #111827;">Heading XL</span>
    <span style="font-size: 12px; color: #9CA3AF;">20px / 600 / 1.3</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 18px; font-weight: 600; line-height: 1.35; color: #111827;">Heading LG</span>
    <span style="font-size: 12px; color: #9CA3AF;">18px / 600 / 1.35</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 16px; font-weight: 600; line-height: 1.4; color: #111827;">Heading MD</span>
    <span style="font-size: 12px; color: #9CA3AF;">16px / 600 / 1.4</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px;">
    <span style="font-size: 14px; font-weight: 600; line-height: 1.4; color: #111827;">Heading SM</span>
    <span style="font-size: 12px; color: #9CA3AF;">14px / 600 / 1.4</span>
  </div>
</div>

Body Sizes

Body text sizes for paragraphs, descriptions, labels, and captions.

<div style="display: flex; flex-direction: column; gap: 16px;">
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 16px; font-weight: 400; line-height: 1.5; color: #374151;">Body Large - Used for prominent paragraphs and lead text that needs extra emphasis.</span>
    <span style="font-size: 12px; color: #9CA3AF; white-space: nowrap;">16px / 400 / 1.5</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 14px; font-weight: 400; line-height: 1.5; color: #374151;">Body Default - The standard body size for most paragraph text and descriptions throughout the interface.</span>
    <span style="font-size: 12px; color: #9CA3AF; white-space: nowrap;">14px / 400 / 1.5</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 12px; font-weight: 400; line-height: 1.5; color: #374151;">Body Small - Used for secondary descriptions, helper text, and compact UI elements.</span>
    <span style="font-size: 12px; color: #9CA3AF; white-space: nowrap;">12px / 400 / 1.5</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px;">
    <span style="font-size: 11px; font-weight: 400; line-height: 1.45; color: #374151;">Caption - Used for timestamps, footnotes, and fine-print annotations.</span>
    <span style="font-size: 12px; color: #9CA3AF; white-space: nowrap;">11px / 400 / 1.45</span>
  </div>
</div>

Font Weights

Available font weight tokens from regular through bold.

<div style="display: flex; flex-direction: column; gap: 16px;">
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 18px; font-weight: 400; color: #111827; min-width: 280px;">Regular (400) - Body text</span>
    <span style="font-size: 12px; color: #9CA3AF;">font-weight: 400</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 18px; font-weight: 500; color: #111827; min-width: 280px;">Medium (500) - Labels &amp; emphasis</span>
    <span style="font-size: 12px; color: #9CA3AF;">font-weight: 500</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px;">
    <span style="font-size: 18px; font-weight: 600; color: #111827; min-width: 280px;">Semibold (600) - Subheadings</span>
    <span style="font-size: 12px; color: #9CA3AF;">font-weight: 600</span>
  </div>
  <div style="display: flex; align-items: baseline; gap: 16px;">
    <span style="font-size: 18px; font-weight: 700; color: #111827; min-width: 280px;">Bold (700) - Headings &amp; titles</span>
    <span style="font-size: 12px; color: #9CA3AF;">font-weight: 700</span>
  </div>
</div>

Guidelines

Do

  • ✓Use the type scale consistently (--brz-font-size for body, specific sizes for headings).
  • ✓Reference font-weight tokens instead of numeric values.

Don't

  • ✗Don't mix type scales or create intermediate sizes.
  • ✗Don't use font sizes below --brz-font-size-xs for readable content.