Style Name Attributes Selectors Used For

Body text

  • Metropolis Regular
  • color: #565656
  • font-size: 14px
  • letter-spacing: normal
p, .p1
  • Default text styling (page_bodyText)
  • Sidenav text (sidenav_text)
  • Body text in cards (card_text)
  • Text and dropdowns (dropdown_text)
  • Tab navigation links (tab_text)
  • Wizard steps and table of contents
  • General paragraphs, sentences, lists

Section header

  • Metropolis Medium
  • color: #565656
  • font-size: 13px
  • letter-spacing: normal
.p2
  • Stack view header (stackview_header)
  • Form headers
  • Tree view headers

Table, grid, and form text

  • Metropolis Regular
  • color: #565656
  • font-size: 13px
  • letter-spacing: normal
.p3
  • Button text
  • Text in alerts (alert_text)
  • Stack view text (stackview_text)
  • Datagrid text (table_text)
  • Text in HTML tables (table_text)
  • Text in tooltips and validations (tooltip_text)
  • Form text
  • Treeview text

Form labels and column headers

  • Metropolis Semibold
  • color: #565656
  • font-size: 12px
  • letter-spacing: normal
.p4
  • Table and datagrid headers (table_header)
  • Dropdown headers (dropdown_header)

Table footers and chart data

  • Metropolis Regular
  • color: #565656
  • font-size: 12px
  • letter-spacing: normal
.p5
  • Table and datagrid footers
  • Chart and data visualization info

Small headers

  • Metropolis Semibold
  • color: #565656
  • font-size: 11px
  • letter-spacing: 0.03em
.p6
  • Usually used in all caps

Tags and labels

  • Metropolis Regular
  • color: #565656
  • font-size: 11px
  • letter-spacing: 0.03em
.p7
  • Text inside tags and labels (label_text)

Badges

  • Metropolis Regular
  • color: #565656
  • font-size: 10px
  • letter-spacing: 0.03em
.p8
  • Text inside badges

<p class="p1">Body text</p>
<p class="p2">Section header</p>
<p class="p3">Table, grid, and form text</p>
<p class="p4">Form labels and column headers</p>
<p class="p5">Table footers and chart data</p>
<p class="p6">Mostly buttons</p>
<p class="p7">Tags and labels</p>
<p class="p8">Badges</p>