Typography

Search:

Typography	Config
heading.hero text-heading-hero Primary heading for hero sections in pages with minimal content. Limited to 1 per page.	Font Size 32 px Font Family Inter Font Weight 500 Line Height 48 px
heading.page text-heading-page Page-level heading for standard layouts	Font Size 20 px Font Family Inter Font Weight 500 Line Height 32 px
heading.section text-heading-section Section divider heading that organizes content into logical groups. Multiple allowed per page.	Font Size 16 px Font Family Inter Font Weight 500 Line Height 24 px
title.sm text-title-sm Component-level titles for modal header	Font Size 14 px Font Family Inter Font Weight 500 Line Height 20 px
title.xs text-title-xs Default component-level titles for input label, table header, alert, banner & other interactive components.	Font Size 13 px Font Family Inter Font Weight 500 Line Height 16 px
title.2xs text-title-2xs Component-level titles for space-limited elements. Used sparingly.	Font Size 12 px Font Family Inter Font Weight 500 Line Height 16 px
body.sm text-body-sm Large body text	Font Size 14 px Font Family Inter Font Weight 400 Line Height 20 px
body.sm (strong) text-body-sm (strong) Large body text that needs emphasized or inline link	Font Size 14 px Font Family Inter Font Weight 600 Line Height 20 px
body.xs text-body-xs Default body text in components, detailed or descriptive content	Font Size 13 px Font Family Inter Font Weight 400 Line Height 16 px
body.xs (strong) text-body-xs (strong) Default body text that needs emphasized or inline link	Font Size 13 px Font Family Inter Font Weight 600 Line Height 16 px
body.2xs text-body-2xs Small body text that should be used sparingly for secondary level content	Font Size 12 px Font Family Inter Font Weight 400 Line Height 16 px
body.2xs (strong) text-body-2xs (strong) Small body text that needs emphasized or inline link	Font Size 12 px Font Family Inter Font Weight 600 Line Height 16 px
description.xs text-description-xs	Font Size 13 px Font Family Inter Font Weight 400 Line Height 16 px
description.2xs text-description-2xs	Font Size 12 px Font Family Inter Font Weight 400 Line Height 16 px
data.label text-data-label Data label, title	Font Size 12 px Font Family Inter Font Weight 600 Line Height 16 px
data.number text-data-number Tabular numbers with monospace to align vertically. Used in data tables.	Font Size 12 px Font Family Inter Font Weight 400 Line Height 16 px
code.xs text-code-xs For default text in code editor & code block	Font Size 13 px Font Family JetBrains Mono Font Weight 400 Line Height 16 px
code.xs (strong) text-code-xs (strong) For default text in code editor & code block that needs emphasized	Font Size 13 px Font Family JetBrains Mono Font Weight 500 Line Height 16 px
code.2xs text-code-2xs For text in limited space in code block	Font Size 12 px Font Family JetBrains Mono Font Weight 400 Line Height 16 px
code.2xs (strong) text-code-2xs (strong) For text in limited space in code block that needs emphasize	Font Size 12 px Font Family JetBrains Mono Font Weight 500 Line Height 16 px
button.sm text-button-sm For large button	Font Size 14 px Font Family Inter Font Weight 500 Line Height 20 px
button.xs text-button-xs For medium button (default)	Font Size 13 px Font Family Inter Font Weight 500 Line Height 16 px
button.2xs text-button-2xs For small button	Font Size 12 px Font Family Inter Font Weight 500 Line Height 16 px