Sage Design Tokens

origin

origin-color-reference-only

Name Value Preview
originColorReferenceOnlyYin100
#000000ff
originColorReferenceOnlyYin010
#0000001a
originColorReferenceOnlyYin020
#00000033
originColorReferenceOnlyYin030
#0000004d
originColorReferenceOnlyYin055
#0000008c
originColorReferenceOnlyYin065
#000000a6
originColorReferenceOnlyYin075
#000000bf
originColorReferenceOnlyYin090
#000000e6
originColorReferenceOnlyYang100
#ffffffff
originColorReferenceOnlyYang010
#ffffff1a
originColorReferenceOnlyYang030
#ffffff4d
originColorReferenceOnlyYang080
#ffffffcc
originColorReferenceOnlyMalachite150
#b7dec0ff
originColorReferenceOnlyMalachite225
#92cda0ff
originColorReferenceOnlyMalachite300
#6dbc80ff
originColorReferenceOnlyMalachite375
#46aa5eff
originColorReferenceOnlyMalachite450
#1e983bff
originColorReferenceOnlyMalachite525
#00831fff
originColorReferenceOnlyMalachite600
#006e1aff
originColorReferenceOnlyMalachite675
#005a15ff
originColorReferenceOnlyMalachite750
#004611ff
originColorReferenceOnlyMalachite825
#00330cff
originColorReferenceOnlyMalachite900
#002108ff
originColorReferenceOnlyMalachite075
#dbeee0ff
originColorReferenceOnlyJade150
#b6ddcbff
originColorReferenceOnlyJade225
#91ccb1ff
originColorReferenceOnlyJade300
#6cba97ff
originColorReferenceOnlyJade375
#46a97cff
originColorReferenceOnlyJade450
#1e965fff
originColorReferenceOnlyJade525
#008247ff
originColorReferenceOnlyJade600
#006d3bff
originColorReferenceOnlyJade675
#005930ff
originColorReferenceOnlyJade750
#004526ff
originColorReferenceOnlyJade825
#00331cff
originColorReferenceOnlyJade900
#002112ff
originColorReferenceOnlyJade075
#dbeee5ff
originColorReferenceOnlyNavy150
#bdd9e7ff
originColorReferenceOnlyNavy225
#9cc6dbff
originColorReferenceOnlyNavy300
#7bb3cfff
originColorReferenceOnlyNavy375
#599fc2ff
originColorReferenceOnlyNavy450
#378cb6ff
originColorReferenceOnlyNavy525
#1478a9ff
originColorReferenceOnlyNavy600
#0c6490ff
originColorReferenceOnlyNavy675
#0a5175ff
originColorReferenceOnlyNavy750
#083f5bff
originColorReferenceOnlyNavy825
#062e43ff
originColorReferenceOnlyNavy900
#041e2bff
originColorReferenceOnlyNavy075
#deecf3ff
originColorReferenceOnlyTeal150
#bbdbdaff
originColorReferenceOnlyTeal225
#99c8c8ff
originColorReferenceOnlyTeal300
#76b6b6ff
originColorReferenceOnlyTeal375
#54a4a3ff
originColorReferenceOnlyTeal450
#319190ff
originColorReferenceOnlyTeal525
#0d7e7dff
originColorReferenceOnlyTeal600
#006a69ff
originColorReferenceOnlyTeal675
#005655ff
originColorReferenceOnlyTeal750
#004342ff
originColorReferenceOnlyTeal825
#003131ff
originColorReferenceOnlyTeal900
#002020ff
originColorReferenceOnlyTeal075
#ddededff
originColorReferenceOnlyCherry150
#edccd6ff
originColorReferenceOnlyCherry225
#e4b2c2ff
originColorReferenceOnlyCherry300
#db99adff
originColorReferenceOnlyCherry375
#d27f98ff
originColorReferenceOnlyCherry450
#c86483ff
originColorReferenceOnlyCherry525
#be466bff
originColorReferenceOnlyCherry600
#a53558ff
originColorReferenceOnlyCherry675
#862b47ff
originColorReferenceOnlyCherry750
#692238ff
originColorReferenceOnlyCherry825
#4d1929ff
originColorReferenceOnlyCherry900
#32101bff
originColorReferenceOnlyCherry075
#f6e5ebff
originColorReferenceOnlyTerra150
#f0ccc7ff
originColorReferenceOnlyTerra225
#e9b3abff
originColorReferenceOnlyTerra300
#e1998eff
originColorReferenceOnlyTerra375
#d97e71ff
originColorReferenceOnlyTerra450
#d16252ff
originColorReferenceOnlyTerra525
#c64532ff
originColorReferenceOnlyTerra600
#a63a2aff
originColorReferenceOnlyTerra675
#872f22ff
originColorReferenceOnlyTerra750
#69251bff
originColorReferenceOnlyTerra825
#4d1b14ff
originColorReferenceOnlyTerra900
#32110dff
originColorReferenceOnlyTerra075
#f8e6e3ff
originColorReferenceOnlyAmber150
#f6ce9aff
originColorReferenceOnlyAmber225
#f1b465ff
originColorReferenceOnlyAmber300
#ec992dff
originColorReferenceOnlyAmber375
#dd8009ff
originColorReferenceOnlyAmber450
#c17007ff
originColorReferenceOnlyAmber525
#a56006ff
originColorReferenceOnlyAmber600
#8b5005ff
originColorReferenceOnlyAmber675
#714104ff
originColorReferenceOnlyAmber750
#583303ff
originColorReferenceOnlyAmber825
#402502ff
originColorReferenceOnlyAmber900
#291802ff
originColorReferenceOnlyAmber075
#fbe7cdff
originColorReferenceOnlyGray150
#d4d4d4ff
originColorReferenceOnlyGray225
#bfbfbfff
originColorReferenceOnlyGray300
#abababff
originColorReferenceOnlyGray375
#979797ff
originColorReferenceOnlyGray450
#848484ff
originColorReferenceOnlyGray525
#717171ff
originColorReferenceOnlyGray600
#5e5e5eff
originColorReferenceOnlyGray675
#4c4c4cff
originColorReferenceOnlyGray750
#3b3b3bff
originColorReferenceOnlyGray825
#2b2b2bff
originColorReferenceOnlyGray900
#1b1b1bff
originColorReferenceOnlyGray1000
#000000ff
originColorReferenceOnlyGray000
#ffffffff
originColorReferenceOnlyGray075
#e9e9e9ff
originColorReferenceOnlySkin400
#ddb89eff
originColorReferenceOnlySkin500
#e84d4fff
originColorReferenceOnlySkin600
#b26e3dff
originColorReferenceOnlySkin700
#3a2417ff
originColorReferenceOnlyFuchsia450
#c557c8ff
originColorReferenceOnlyFuchsia525
#b934bdff

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