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
|
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
|