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