Sage Design Tokens / base / typography
| Name | Value | Preview |
|---|---|---|
| typographyAccordionTitleM 🔗 |
500 20px/125% Sage UI |
n/a
|
| typographyAccordionTitleS 🔗 |
500 16px/125% Sage UI |
n/a
|
| typographyAccordionSubtitleM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyAccordionSubtitleS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyAccordionParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyAccordionParagraphS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyActionPopoverMenuItemM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyAnchorNavLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyBadgeLabelM 🔗 |
500 12px/150% Sage UI |
n/a
|
| typographyBadgeLabelS 🔗 |
500 10px/150% Sage UI |
n/a
|
| typographyBreadcrumbSeparatorM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyBreadcrumbCurrentPageM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyButtonLabelS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyButtonLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyButtonLabelL 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyCardParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyCardSelectTitleM 🔗 |
700 16px/150% Sage UI |
n/a
|
| typographyCardSelectSubtitleM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyCardSelectParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyCardSelectFooterM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDatePickerCalendarDateM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyDatePickerCalendarDayM 🔗 |
700 14px/150% Sage UI |
n/a
|
| typographyDatePickerCalendarMonthM 🔗 |
700 16px/125% Sage UI |
n/a
|
| typographyDialogTitleXs 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogTitleS 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogTitleMs 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogTitleM 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogTitleMl 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogTitleL 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogTitleXl 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogTitleXxl 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyDialogSubtitleM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogSubtitleL 🔗 |
500 20px/150% Sage UI |
n/a
|
| typographyDialogParagraphXs 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogParagraphS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogParagraphMs 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogParagraphMl 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogParagraphL 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogParagraphXl 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDialogParagraphXxl 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyDrawerTitleM 🔗 |
700 22px/125% Sage UI |
n/a
|
| typographyDrawerParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFlashTextM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFlashTextL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyFormFieldLabelXs 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldLabelS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldLabelL 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyFormFieldHintTextXs 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldHintTextS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldHintTextM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldHintTextL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyFormFieldErrorMessageXs 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldErrorMessageS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldErrorMessageM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldErrorMessageL 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyFormFieldCautionMessageXs 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldCautionMessageS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldCautionMessageM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldCautionMessageL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyFormFieldInputTextXs 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldInputTextS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldInputTextM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldInputTextL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyFormFieldDropdownOptionsXs 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldDropdownOptionsS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldDropdownOptionsM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldDropdownOptionsL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyFormFieldSecondLabelXs 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldSecondLabelS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldSecondLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyFormFieldSecondLabelL 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyFormFieldCharacterCountXs 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldCharacterCountS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldCharacterCountM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyFormFieldCharacterCountL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyLinkTextS 🔗 |
400 12px/150% Sage UI |
n/a
|
| typographyLinkTextM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyLinkTextL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyLinkTextFocusS 🔗 |
400 12px/150% Sage UI |
n/a
|
| typographyLinkTextFocusM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyLinkTextFocusL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyLoaderMessageXs 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyLoaderMessageS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyLoaderMessageM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyLoaderMessageL 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyLoaderMessageXl 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyMenuLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyMenuLabelL 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyMenuSegmentTitleM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyMessageHeadingM 🔗 |
700 14px/150% Sage UI |
n/a
|
| typographyMessageHeadingL 🔗 |
700 16px/150% Sage UI |
n/a
|
| typographyMessageTextM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyMessageTextL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyNoteEditorNameM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyNoteDateM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyNoteParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyNoteParagraphListM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyNoteTitleM 🔗 |
700 18px/125% Sage UI |
n/a
|
| typographyPageStateTitleM 🔗 |
700 24px/125% Sage UI |
n/a
|
| typographyPageStateSubtitleM 🔗 |
500 18px/150% Sage UI |
n/a
|
| typographyPageStateParagraphM 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyPaginationLabelM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyPillLabelS 🔗 |
500 12px/150% Sage UI |
n/a
|
| typographyPillLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyPillLabelL 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyPillLabelXl 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyProfileEmailTextS 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailTextM 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailTextMl 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailTextL 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailTextXl 🔗 |
400 18px/125% Sage UI |
n/a
|
| typographyProfileEmailTextXxl 🔗 |
400 24px/125% Sage UI |
n/a
|
| typographyProfileEmailLinkS 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailLinkM 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailLinkMl 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailLinkL 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyProfileEmailLinkXl 🔗 |
400 18px/125% Sage UI |
n/a
|
| typographyProfileEmailLinkXxl 🔗 |
400 24px/125% Sage UI |
n/a
|
| typographyProfileInitialsS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyProfileInitialsM 🔗 |
500 18px/150% Sage UI |
n/a
|
| typographyProfileInitialsMl 🔗 |
500 24px/150% Sage UI |
n/a
|
| typographyProfileInitialsL 🔗 |
500 32px/150% Sage UI |
n/a
|
| typographyProfileInitialsXl 🔗 |
500 48px/150% Sage UI |
n/a
|
| typographyProfileInitialsXxl 🔗 |
500 56px/150% Sage UI |
n/a
|
| typographyProfileNameS 🔗 |
500 14px/125% Sage UI |
n/a
|
| typographyProfileNameM 🔗 |
500 14px/125% Sage UI |
n/a
|
| typographyProfileNameMl 🔗 |
500 16px/125% Sage UI |
n/a
|
| typographyProfileNameL 🔗 |
500 20px/125% Sage UI |
n/a
|
| typographyProfileNameXl 🔗 |
500 24px/125% Sage UI |
n/a
|
| typographyProfileNameXxl 🔗 |
500 32px/125% Sage UI |
n/a
|
| typographyProgressTrackerValueLabelS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyProgressTrackerValueLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyProgressTrackerValueLabelL 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographySidebarTitleXs 🔗 |
700 20px/125% Sage UI |
n/a
|
| typographySidebarTitleS 🔗 |
700 20px/125% Sage UI |
n/a
|
| typographySidebarTitleMs 🔗 |
700 20px/125% Sage UI |
n/a
|
| typographySidebarTitleM 🔗 |
700 20px/125% Sage UI |
n/a
|
| typographySidebarTitleMl 🔗 |
700 20px/125% Sage UI |
n/a
|
| typographySidebarTitleL 🔗 |
700 20px/125% Sage UI |
n/a
|
| typographySidebarTitleXl 🔗 |
700 20px/125% Sage UI |
n/a
|
| typographySidebarParagraphXs 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographySidebarParagraphS 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographySidebarParagraphMs 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographySidebarParagraphM 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographySidebarParagraphMl 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographySidebarParagraphL 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographySidebarParagraphXl 🔗 |
400 14px/125% Sage UI |
n/a
|
| typographyStepFlowCompleteLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyStepFlowCurrentLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyStepFlowIncompleteLabelM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographySwitchOptionLabelM 🔗 |
500 12px/150% Sage UI |
n/a
|
| typographySwitchOptionLabelL 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyTableHeaderTextXs 🔗 |
500 13px/150% Sage UI |
n/a
|
| typographyTableHeaderTextS 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyTableHeaderTextM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyTableHeaderTextL 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyTableHeaderTextXl 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyTableCellTextXs 🔗 |
400 13px/150% Sage UI |
n/a
|
| typographyTableCellTextS 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyTableCellTextM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyTableCellTextL 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyTableCellTextXl 🔗 |
400 16px/150% Sage UI |
n/a
|
| typographyTileParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyTileSubscriptionTitleM 🔗 |
700 18px/125% Sage UI |
n/a
|
| typographyTileSubscriptionParagraphM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyTileSubscriptionParagraphBoldM 🔗 |
500 14px/150% Sage UI |
n/a
|
| typographyTileSubscriptionPriceM 🔗 |
500 16px/150% Sage UI |
n/a
|
| typographyTooltipTextM 🔗 |
400 14px/150% Sage UI |
n/a
|
| typographyTooltipTextL 🔗 |
400 16px/150% Sage UI |
n/a
|