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 |
|
| colorsLogo 🔗 |
#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
|
| 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
|
opacity 🔗
| Name | Value | Preview |
|---|---|---|
| opacity300 🔗 |
0.3 |
|
| opacity600 🔗 |
0.6 |
|
| opacity800 🔗 |
0.8 |
|