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