Sage Design Tokens / base

colors

Name Value Preview
colorsUtilityMajor100
#ccd6dbff
colorsUtilityMajor150
#b3c2c9ff
colorsUtilityMajor200
#99adb7ff
colorsUtilityMajor300
#668494ff
colorsUtilityMajor400
#335b70ff
colorsUtilityMajor450
#19475eff
colorsUtilityMajor500
#00324cff
colorsUtilityMajor800
#00141eff
colorsUtilityMajor025
#f2f5f6ff
colorsUtilityMajor010
#fafbfbff
colorsUtilityMajor040
#edf1f2ff
colorsUtilityMajor050
#e6ebedff
colorsUtilityMajor075
#d9e0e4ff
colorsUtilityMajorTransparent
#00000000
colorsUtilityYin100
#000000ff
colorsUtilityYin030
#0000004d
colorsUtilityYin055
#0000008c
colorsUtilityYin065
#000000a6
colorsUtilityYin090
#000000e6
colorsUtilityYang100
#ffffffff
colorsUtilityYang080
#ffffffcc
colorsUtilityDisabled400
#f2f5f6ff
colorsUtilityDisabled500
#e6ebedff
colorsUtilityDisabled600
#ccd6dbff
colorsUtilityReadOnly400
#f2f5f6ff
colorsUtilityReadOnly500
#e6ebedff
colorsUtilityReadOnly600
#ccd6dbff
colorsActionMajor150
#b3d9c8ff
colorsActionMajor350
#4da77eff
colorsActionMajor450
#198e59ff
colorsActionMajor500
#007e45ff
colorsActionMajor600
#006738ff
colorsActionMajor700
#004d2aff
colorsActionMajor025
#f2f9f6ff
colorsActionMajorTransparent
#00000000
colorsActionMajorYin030
#0000004d
colorsActionMajorYin055
#0000008c
colorsActionMajorYin065
#000000a6
colorsActionMajorYin090
#000000e6
colorsActionMajorYang100
#ffffffff
colorsActionMajorYang030
#ffffff4d
colorsActionMinor100
#e6ebedff
colorsActionMinor150
#d9e0e4ff
colorsActionMinor200
#ccd6dbff
colorsActionMinor250
#b3c2c9ff
colorsActionMinor300
#99adb7ff
colorsActionMinor400
#668494ff
colorsActionMinor500
#335b70ff
colorsActionMinor550
#19475eff
colorsActionMinor600
#00324cff
colorsActionMinor700
#00283dff
colorsActionMinor850
#001926ff
colorsActionMinor900
#00141eff
colorsActionMinor025
#fafbfbff
colorsActionMinor050
#f2f5f6ff
colorsActionMinorTransparent
#00000000
colorsActionMinorYin030
#0000004d
colorsActionMinorYin055
#0000008c
colorsActionMinorYin065
#000000a6
colorsActionMinorYin090
#000000e6
colorsActionMinorYang100
#ffffffff
colorsActionMinorGray700
#4d4d4dff
colorsActionDisabled400
#f2f5f6ff
colorsActionDisabled500
#e6ebedff
colorsActionDisabled600
#ccd6dbff
colorsActionReadOnly400
#f2f5f6ff
colorsActionReadOnly500
#e6ebedff
colorsActionReadOnly600
#ccd6dbff
colorsSemanticNeutral200
#ccd6dbff
colorsSemanticNeutral400
#668494ff
colorsSemanticNeutral500
#335b70ff
colorsSemanticNeutral600
#00324cff
colorsSemanticNeutralTransparent
#00000000
colorsSemanticNeutralYin030
#0000004d
colorsSemanticNeutralYin055
#0000008c
colorsSemanticNeutralYin065
#000000a6
colorsSemanticNeutralYin090
#000000e6
colorsSemanticNeutralYang100
#ffffffff
colorsSemanticFocus250
#ffda80ff
colorsSemanticFocus500
#ffbc19ff
colorsSemanticFocusTransparent
#00000000
colorsSemanticPositive400
#33a14dff
colorsSemanticPositive500
#00821fff
colorsSemanticPositive600
#006819ff
colorsSemanticPositiveTransparent
#00000000
colorsSemanticPositiveYin030
#0000004d
colorsSemanticPositiveYin055
#0000008c
colorsSemanticPositiveYin065
#000000a6
colorsSemanticPositiveYin090
#000000e6
colorsSemanticPositiveYang100
#ffffffff
colorsSemanticNegative350
#db7380ff
colorsSemanticNegative450
#d04b5cff
colorsSemanticNegative500
#cb374aff
colorsSemanticNegative600
#a22c3bff
colorsSemanticNegativeTransparent
#00000000
colorsSemanticNegativeYin030
#0000004d
colorsSemanticNegativeYin055
#0000008c
colorsSemanticNegativeYin065
#000000a6
colorsSemanticNegativeYin090
#000000e6
colorsSemanticNegativeYang100
#ffffffff
colorsSemanticCaution400
#f28533ff
colorsSemanticCaution500
#ef6700ff
colorsSemanticCaution600
#bf5200ff
colorsSemanticCaution650
#a74800ff
colorsSemanticCautionTransparent
#00000000
colorsSemanticCautionYin030
#0000004d
colorsSemanticCautionYin055
#0000008c
colorsSemanticCautionYin065
#000000a6
colorsSemanticCautionYin090
#000000e6
colorsSemanticCautionYang100
#ffffffff
colorsSemanticInfo150
#b3cfe5ff
colorsSemanticInfo400
#3380b9ff
colorsSemanticInfo500
#0060a7ff
colorsSemanticInfo600
#004d86ff
colorsSemanticInfoTransparent
#00000000
colorsSemanticInfoYin030
#0000004d
colorsSemanticInfoYin055
#0000008c
colorsSemanticInfoYin065
#000000a6
colorsSemanticInfoYin090
#000000e6
colorsSemanticInfoYang100
#ffffffff
colorsSemanticNotification600
#bb4f00ff
colorsSemanticNotificationTransparent
#00000000
colorsSemanticNotificationYin100
#000000ff
colorsSemanticNotificationYang100
#ffffffff
#00d639ff
colorsTransparent
#00000000
colorsYin100
#000000ff
colorsYin030
#0000004d
colorsYin055
#0000008c
colorsYin065
#000000a6
colorsYin075
#000000bf
colorsYin090
#000000e6
colorsYang100
#ffffffff
colorsYang030
#ffffff4d
colorsYang080
#ffffffcc
colorsGray600
#666666ff
colorsGray700
#4d4d4dff
colorsGray750
#404040ff
colorsGray850
#262626ff
colorsGray900
#191919ff
colorsGray1000
#000000ff
colorsGray000
#ffffffff
colorsDisabled400
#f2f5f6ff
colorsDisabled500
#e6ebedff
colorsDisabled600
#ccd6dbff
colorsReadOnly400
#f2f5f6ff
colorsReadOnly500
#e6ebedff
colorsReadOnly600
#ccd6dbff
colorsComponentsLeftnavWinterStandardBackground
#262626ff
colorsComponentsLeftnavWinterStandardBackgroundChild
#404040ff
colorsComponentsLeftnavWinterStandardDividerOnDark
#0000008c
colorsComponentsLeftnavWinterStandardHover
#007e45ff
colorsComponentsLeftnavWinterStandardSelected
#ffffff4d
colorsComponentsLeftnavWinterStandardContent
#ffffffff
colorsComponentsMenuSpringStandard500
#e6ebedff
colorsComponentsMenuSpringStandard600
#007e45ff
colorsComponentsMenuSpringStandard700
#d9e0e4ff
colorsComponentsMenuSpringParent500
#e6ebedff
colorsComponentsMenuSpringParent600
#007e45ff
colorsComponentsMenuSpringParent700
#d9e0e4ff
colorsComponentsMenuSpringChild400
#ccd6dbff
colorsComponentsMenuSpringChild500
#ffffffff
colorsComponentsMenuSpringChild600
#007e45ff
colorsComponentsMenuSpringChildAlt400
#ccd6dbff
colorsComponentsMenuSpringChildAlt500
#e6ebedff
colorsComponentsMenuSpringChildAlt600
#007e45ff
colorsComponentsMenuSummerStandard400
#ccd6dbff
colorsComponentsMenuSummerStandard500
#ffffffff
colorsComponentsMenuSummerStandard600
#007e45ff
colorsComponentsMenuSummerStandard700
#e6ebedff
colorsComponentsMenuSummerStandard800
#e6ebedff
colorsComponentsMenuSummerParent400
#ccd6dbff
colorsComponentsMenuSummerParent500
#ffffffff
colorsComponentsMenuSummerParent600
#007e45ff
colorsComponentsMenuSummerParent700
#e6ebedff
colorsComponentsMenuSummerParent800
#e6ebedff
colorsComponentsMenuSummerChild300
#b3c2c9ff
colorsComponentsMenuSummerChild400
#ccd6dbff
colorsComponentsMenuSummerChild500
#e6ebedff
colorsComponentsMenuSummerChild600
#007e45ff
colorsComponentsMenuSummerChild700
#e6ebedff
colorsComponentsMenuSummerChild800
#e6ebedff
colorsComponentsMenuSummerChildAlt300
#b3c2c9ff
colorsComponentsMenuSummerChildAlt400
#ccd6dbff
colorsComponentsMenuSummerChildAlt500
#d9e0e4ff
colorsComponentsMenuSummerChildAlt600
#007e45ff
colorsComponentsMenuSummerChildAlt700
#d9e0e4ff
colorsComponentsMenuSummerChildAlt800
#d9e0e4ff
colorsComponentsMenuAutumnStandard500
#00324cff
colorsComponentsMenuAutumnStandard600
#007e45ff
colorsComponentsMenuAutumnStandard700
#19475eff
colorsComponentsMenuAutumnParent500
#00324cff
colorsComponentsMenuAutumnParent600
#007e45ff
colorsComponentsMenuAutumnParent700
#19475eff
colorsComponentsMenuAutumnChild400
#19475eff
colorsComponentsMenuAutumnChild500
#001926ff
colorsComponentsMenuAutumnChild600
#007e45ff
colorsComponentsMenuAutumnChildAlt400
#19475eff
colorsComponentsMenuAutumnChildAlt500
#00324cff
colorsComponentsMenuAutumnChildAlt600
#007e45ff
colorsComponentsMenuWinterStandard400
#4d4d4dff
colorsComponentsMenuWinterStandard500
#000000ff
colorsComponentsMenuWinterStandard600
#007e45ff
colorsComponentsMenuWinterStandard700
#262626ff
colorsComponentsMenuWinterStandard800
#262626ff
colorsComponentsMenuWinterParent400
#4d4d4dff
colorsComponentsMenuWinterParent500
#000000ff
colorsComponentsMenuWinterParent600
#007e45ff
colorsComponentsMenuWinterParent700
#262626ff
colorsComponentsMenuWinterParent800
#262626ff
colorsComponentsMenuWinterChild300
#666666ff
colorsComponentsMenuWinterChild400
#4d4d4dff
colorsComponentsMenuWinterChild500
#262626ff
colorsComponentsMenuWinterChild600
#007e45ff
colorsComponentsMenuWinterChild700
#262626ff
colorsComponentsMenuWinterChild800
#262626ff
colorsComponentsMenuWinterChildAlt300
#666666ff
colorsComponentsMenuWinterChildAlt400
#4d4d4dff
colorsComponentsMenuWinterChildAlt500
#404040ff
colorsComponentsMenuWinterChildAlt600
#007e45ff
colorsComponentsMenuWinterChildAlt700
#404040ff
colorsComponentsMenuWinterChildAlt800
#404040ff
colorsComponentsMenuYin100
#000000ff
colorsComponentsMenuYin065
#000000a6
colorsComponentsMenuYin090
#000000e6
colorsComponentsMenuYang100
#ffffffff
colorsComponentsMenuYang080
#ffffffcc
colorsComponentsMenuYang030
#ffffff4d
colorsComponentsMenuTransparent
#00000000

sizing

Name Value Preview
sizing100
8px
sizing125
10px
sizing150
12px
sizing175
14px
sizing200
16px
sizing225
18px
sizing250
20px
sizing275
22px
sizing300
24px
sizing350
28px
sizing375
30px
sizing400
32px
sizing450
36px
sizing500
40px
sizing525
42px
sizing550
44px
sizing600
48px
sizing700
56px
sizing800
64px
sizing900
72px
sizing1000
80px
sizing1100
88px
sizing1200
96px
sizing1300
104px
sizing1500
120px
sizing1600
128px
sizing2000
160px
sizing2500
200px
sizing3000
240px
sizing7000
560px
sizing010
1px
sizing025
2px
sizing050
4px
sizing075
6px
sizingLogowidth
40px

spacing

Name Value Preview
spacing100
8px
spacing110
9px
spacing125
10px
spacing150
12px
spacing175
14px
spacing200
16px
spacing250
20px
spacing300
24px
spacing400
32px
spacing500
40px
spacing600
48px
spacing700
56px
spacing800
64px
spacing900
72px
spacing1000
80px
spacing000
0
spacing010
1px
spacing025
2px
spacing035
3px
spacing050
4px
spacing060
5px
spacing075
6px
spacingNeg010
-1px
spacingNeg025
-2px
spacingNeg050
-4px
spacingNeg075
-6px
spacingNeg100
-8

borderWidth

Name Value Preview
borderWidth100
1px
borderWidth200
2px
borderWidth300
3px
borderWidth400
4px
borderWidth600
6px
borderWidth000
0px

fontSizes

Name Value Preview
fontSizes100
14px
Aa
fontSizes200
16px
Aa
fontSizes300
18px
Aa
fontSizes400
20px
Aa
fontSizes500
22px
Aa
fontSizes600
24px
Aa
fontSizes700
32px
Aa
fontSizes800
40px
Aa
fontSizes900
48px
Aa
fontSizes1000
56px
Aa
fontSizes010
10px
Aa
fontSizes025
12px
Aa
fontSizes050
13px
Aa

boxShadow

Name Value Preview
boxShadow100
0 5px 5px 0 #00141e33, 0 10px 10px 0 #00141e1a
boxShadow150
0 -4px 12px 0 #00141e0d
boxShadow200
0 10px 20px 0 #00141e33, 0 20px 40px 0 #00141e1a
boxShadow300
0 10px 30px 0 #00141e1a, 0 30px 60px 0 #00141e1a
boxShadow400
0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a
boxShadow010
inset 0 -1px 0 0 #e6ebedff
boxShadow050
0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26
boxShadow075
inset 0 6px 4px -4px #00141e0d
boxShadow090
0 4px 8px -4px #00141e1a
boxShadow091
4px 0 8px -4px #00141e1a

fontWeights

Name Value Preview
fontWeights400
400
Aa
fontWeights500
500
Aa
fontWeights700
700
Aa

lineHeights

Name Value Preview
lineHeights300
100%
Aa
lineHeights400
125%
Aa
lineHeights500
150%
Aa

fontFamilies

Name Value Preview
fontFamiliesDefault
Sage UI
n/a
fontFamiliesIos
San Francisco
n/a
fontFamiliesAndroid
Roboto
n/a
fontFamiliesOther
Open Sans
n/a

borderRadius

Name Value Preview
borderRadius100
8px
borderRadius200
16px
borderRadius400
32px
borderRadiusCircle
50%
borderRadius000
0px
borderRadius010
1px
borderRadius025
2px
borderRadius050
4px

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

opacity

Name Value Preview
opacity300
0.3
opacity600
0.6
opacity800
0.8