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