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 16px/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
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