@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1,896 lines • 155 kB
JSON
{
"aliases": {
"PALETTE_PINK_50": {
"value": "#e3066a"
},
"PALETTE_NEUTRAL_15": {
"value": "#242424"
},
"PALETTE_VIOLET_15": {
"value": "#3d0157"
},
"PALETTE_YELLOW_70": {
"value": "#e4a201"
},
"PALETTE_BLUE_10": {
"value": "#001639"
},
"PALETTE_INDIGO_90": {
"value": "#e0e5f8"
},
"PALETTE_BLUE_65": {
"value": "#57a3fd"
},
"PALETTE_PINK_40": {
"value": "#b60554"
},
"PALETTE_PINK_95": {
"value": "#fef0f3"
},
"PALETTE_YELLOW_60": {
"value": "#ca8501"
},
"PALETTE_INDIGO_80": {
"value": "#bec7f6"
},
"PALETTE_YELLOW_50": {
"value": "#a86403"
},
"PALETTE_INDIGO_70": {
"value": "#9ea9f1"
},
"PALETTE_PINK_30": {
"value": "#8a033e"
},
"PALETTE_PURPLE_15": {
"value": "#300b60"
},
"PALETTE_TEAL_15": {
"value": "#072825"
},
"PALETTE_YELLOW_40": {
"value": "#8c4b02"
},
"PALETTE_YELLOW_95": {
"value": "#fbf3e0"
},
"PALETTE_INDIGO_60": {
"value": "#7f8ced"
},
"PALETTE_PINK_20": {
"value": "#61022a"
},
"PALETTE_PINK_65": {
"value": "#fe7298"
},
"PALETTE_YELLOW_30": {
"value": "#6f3400"
},
"PALETTE_ORANGE_90": {
"value": "#fedfd0"
},
"PALETTE_INDIGO_50": {
"value": "#5867e8"
},
"PALETTE_GREEN_15": {
"value": "#0c2912"
},
"PALETTE_PINK_10": {
"value": "#370114"
},
"PALETTE_YELLOW_20": {
"value": "#4f2100"
},
"PALETTE_ORANGE_80": {
"value": "#ffba90"
},
"PALETTE_INDIGO_40": {
"value": "#3a49da"
},
"PALETTE_BLUE_15": {
"value": "#03234d"
},
"PALETTE_INDIGO_95": {
"value": "#f1f3fb"
},
"PALETTE_YELLOW_10": {
"value": "#281202"
},
"PALETTE_YELLOW_65": {
"value": "#d79304"
},
"PALETTE_ORANGE_70": {
"value": "#fe9339"
},
"PALETTE_INDIGO_30": {
"value": "#2f2cb7"
},
"PALETTE_ORANGE_60": {
"value": "#dd7a01"
},
"PALETTE_INDIGO_20": {
"value": "#321D71"
},
"PALETTE_ORANGE_50": {
"value": "#a96404"
},
"PALETTE_INDIGO_10": {
"value": "#200647"
},
"PALETTE_INDIGO_65": {
"value": "#8e9bef"
},
"PALETTE_RED_90": {
"value": "#feded8"
},
"PALETTE_ORANGE_40": {
"value": "#825101"
},
"PALETTE_ORANGE_95": {
"value": "#fff1ea"
},
"PALETTE_PINK_15": {
"value": "#4b0620"
},
"PALETTE_ORANGE_30": {
"value": "#5f3e02"
},
"PALETTE_RED_80": {
"value": "#feb8ab"
},
"PALETTE_YELLOW_15": {
"value": "#2e2204"
},
"PALETTE_ORANGE_20": {
"value": "#3e2b02"
},
"PALETTE_RED_70": {
"value": "#fe8f7d"
},
"PALETTE_ORANGE_10": {
"value": "#201600"
},
"PALETTE_ORANGE_65": {
"value": "#f38303"
},
"PALETTE_RED_60": {
"value": "#fe5c4c"
},
"PALETTE_INDIGO_15": {
"value": "#1f0974"
},
"PALETTE_RED_50": {
"value": "#ea001e"
},
"PALETTE_RED_95": {
"value": "#fef1ee"
},
"PALETTE_CLOUD_BLUE_90": {
"value": "#cfe9fe"
},
"PALETTE_RED_40": {
"value": "#ba0517"
},
"PALETTE_CLOUD_BLUE_80": {
"value": "#90d0fe"
},
"PALETTE_RED_30": {
"value": "#8e030f"
},
"PALETTE_CLOUD_BLUE_70": {
"value": "#1ab9ff"
},
"PALETTE_BLUE_100": {
"value": "#ffffff"
},
"PALETTE_RED_20": {
"value": "#640103"
},
"PALETTE_ORANGE_15": {
"value": "#371e03"
},
"PALETTE_CLOUD_BLUE_60": {
"value": "#0d9dda"
},
"PALETTE_RED_10": {
"value": "#300c01"
},
"PALETTE_RED_65": {
"value": "#fe7765"
},
"PALETTE_CLOUD_BLUE_50": {
"value": "#107cad"
},
"PALETTE_HOT_ORANGE_90": {
"value": "#ffded5"
},
"PALETTE_NEUTRAL_90": {
"value": "#e5e5e5"
},
"PALETTE_CLOUD_BLUE_40": {
"value": "#05628a"
},
"PALETTE_VIOLET_90": {
"value": "#f2defe"
},
"PALETTE_CLOUD_BLUE_95": {
"value": "#eaf5fe"
},
"PALETTE_HOT_ORANGE_80": {
"value": "#feb9a5"
},
"PALETTE_NEUTRAL_80": {
"value": "#c9c9c9"
},
"PALETTE_CLOUD_BLUE_30": {
"value": "#084968"
},
"PALETTE_VIOLET_80": {
"value": "#e5b9fe"
},
"PALETTE_HOT_ORANGE_70": {
"value": "#ff906e"
},
"PALETTE_NEUTRAL_70": {
"value": "#aeaeae"
},
"PALETTE_CLOUD_BLUE_20": {
"value": "#023248"
},
"PALETTE_VIOLET_70": {
"value": "#d892fe"
},
"PALETTE_HOT_ORANGE_60": {
"value": "#ff5d2d"
},
"PALETTE_NEUTRAL_100": {
"value": "#ffffff"
},
"PALETTE_NEUTRAL_60": {
"value": "#939393"
},
"PALETTE_CLOUD_BLUE_10": {
"value": "#001a28"
},
"PALETTE_PURPLE_90": {
"value": "#ece1f9"
},
"PALETTE_VIOLET_60": {
"value": "#cb65ff"
},
"PALETTE_CLOUD_BLUE_65": {
"value": "#08abed"
},
"PALETTE_HOT_ORANGE_50": {
"value": "#d83a00"
},
"PALETTE_TEAL_90": {
"value": "#acf3e4"
},
"PALETTE_RED_15": {
"value": "#4a0c04"
},
"PALETTE_NEUTRAL_50": {
"value": "#747474"
},
"PALETTE_PURPLE_80": {
"value": "#D7BFF2"
},
"PALETTE_VIOLET_50": {
"value": "#ba01ff"
},
"PALETTE_HOT_ORANGE_40": {
"value": "#aa3001"
},
"PALETTE_TEAL_80": {
"value": "#04e1cb"
},
"PALETTE_HOT_ORANGE_95": {
"value": "#fef1ed"
},
"PALETTE_GREEN_90": {
"value": "#cdefc4"
},
"PALETTE_NEUTRAL_40": {
"value": "#5c5c5c"
},
"PALETTE_NEUTRAL_95": {
"value": "#f3f3f3"
},
"PALETTE_PURPLE_70": {
"value": "#c29ef1"
},
"PALETTE_VIOLET_40": {
"value": "#9602c7"
},
"PALETTE_HOT_ORANGE_30": {
"value": "#7e2600"
},
"PALETTE_TEAL_70": {
"value": "#01c3b3"
},
"PALETTE_VIOLET_95": {
"value": "#f9f0ff"
},
"PALETTE_GREEN_80": {
"value": "#91db8b"
},
"PALETTE_BLUE_90": {
"value": "#d8e6fe"
},
"PALETTE_NEUTRAL_30": {
"value": "#444444"
},
"PALETTE_PURPLE_60": {
"value": "#ad7bee"
},
"PALETTE_VIOLET_30": {
"value": "#730394"
},
"PALETTE_HOT_ORANGE_20": {
"value": "#4A2413"
},
"PALETTE_TEAL_60": {
"value": "#06a59a"
},
"PALETTE_GREEN_70": {
"value": "#45c65a"
},
"PALETTE_BLUE_80": {
"value": "#aacbff"
},
"PALETTE_NEUTRAL_20": {
"value": "#2e2e2e"
},
"PALETTE_PURPLE_50": {
"value": "#9050e9"
},
"PALETTE_VIOLET_20": {
"value": "#481A54"
},
"PALETTE_HOT_ORANGE_10": {
"value": "#281202"
},
"PALETTE_TEAL_50": {
"value": "#0b827c"
},
"PALETTE_HOT_ORANGE_65": {
"value": "#ff784f"
},
"PALETTE_GREEN_60": {
"value": "#3ba755"
},
"PALETTE_BLUE_70": {
"value": "#78b0fd"
},
"PALETTE_NEUTRAL_10": {
"value": "#181818"
},
"PALETTE_NEUTRAL_65": {
"value": "#a0a0a0"
},
"PALETTE_PURPLE_40": {
"value": "#7526e3"
},
"PALETTE_VIOLET_10": {
"value": "#2e0039"
},
"PALETTE_CLOUD_BLUE_15": {
"value": "#0a2636"
},
"PALETTE_TEAL_40": {
"value": "#056764"
},
"PALETTE_PURPLE_95": {
"value": "#f6f2fb"
},
"PALETTE_VIOLET_65": {
"value": "#d17dfe"
},
"PALETTE_TEAL_95": {
"value": "#def9f3"
},
"PALETTE_GREEN_50": {
"value": "#2e844a"
},
"PALETTE_BLUE_60": {
"value": "#1b96ff"
},
"PALETTE_PINK_90": {
"value": "#fddde3"
},
"PALETTE_PURPLE_30": {
"value": "#5a1ba9"
},
"PALETTE_TEAL_30": {
"value": "#024d4c"
},
"PALETTE_GREEN_40": {
"value": "#396547"
},
"PALETTE_BLUE_50": {
"value": "#0176d3"
},
"PALETTE_GREEN_95": {
"value": "#ebf7e6"
},
"PALETTE_PINK_80": {
"value": "#fdb6c5"
},
"PALETTE_PURPLE_20": {
"value": "#401075"
},
"PALETTE_TEAL_20": {
"value": "#023434"
},
"PALETTE_GREEN_30": {
"value": "#194e31"
},
"PALETTE_BLUE_40": {
"value": "#0b5cab"
},
"PALETTE_BLUE_95": {
"value": "#eef4ff"
},
"PALETTE_PINK_70": {
"value": "#fe8aa7"
},
"PALETTE_PURPLE_10": {
"value": "#240643"
},
"PALETTE_TEAL_10": {
"value": "#071b12"
},
"PALETTE_PURPLE_65": {
"value": "#b78def"
},
"PALETTE_TEAL_65": {
"value": "#03b4a7"
},
"PALETTE_YELLOW_90": {
"value": "#f9e3b6"
},
"PALETTE_GREEN_20": {
"value": "#1C3326"
},
"PALETTE_BLUE_30": {
"value": "#014486"
},
"PALETTE_PINK_60": {
"value": "#ff538a"
},
"PALETTE_HOT_ORANGE_15": {
"value": "#421604"
},
"PALETTE_YELLOW_80": {
"value": "#fcc003"
},
"PALETTE_GREEN_10": {
"value": "#071b12"
},
"PALETTE_BLUE_20": {
"value": "#032d60"
},
"PALETTE_GREEN_65": {
"value": "#41b658"
},
"FONT_SIZE_1": {
"value": "1.125rem"
},
"FONT_SIZE_2": {
"value": "1.266rem"
},
"FONT_SIZE_3": {
"value": "1.424rem"
},
"FONT_SIZE_4": {
"value": "1.602rem"
},
"FONT_SIZE_5": {
"value": "1.802rem"
},
"FONT_SIZE_6": {
"value": "2.027rem"
},
"FONT_SIZE_7": {
"value": "2.281rem"
},
"FONT_SIZE_8": {
"value": "2.566rem"
},
"FONT_SIZE_9": {
"value": "2.887rem"
},
"FONT_SIZE_10": {
"value": "3.247rem"
},
"FONT_SIZE_NEG_1": {
"value": "0.875rem"
},
"FONT_SIZE_NEG_2": {
"value": "0.8125rem"
},
"FONT_SIZE_NEG_3": {
"value": "0.75rem"
},
"FONT_SIZE_NEG_4": {
"value": "0.625rem"
},
"FONT_SIZE_RATIO": {
"value": "1.125"
},
"FONT_SIZE_BASE": {
"value": "1rem"
}
},
"props": {
"color-neutral-base-100": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"syntax": "<color>",
"name": "color-neutral-base-100",
"value": "#ffffff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 100 - if used as a background, please use Neutral Base 60-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-95": {
"originalValue": "{!PALETTE_NEUTRAL_95}",
"syntax": "<color>",
"name": "color-neutral-base-95",
"value": "#f3f3f3",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 95 - if used as a background, please use Neutral Base 50-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-90": {
"originalValue": "{!PALETTE_NEUTRAL_90}",
"syntax": "<color>",
"name": "color-neutral-base-90",
"value": "#e5e5e5",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 90 - if used as a background, please use Neutral Base 40-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-80": {
"originalValue": "{!PALETTE_NEUTRAL_80}",
"syntax": "<color>",
"name": "color-neutral-base-80",
"value": "#c9c9c9",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 80 - if used as a background, please use Neutral Base 30-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-70": {
"originalValue": "{!PALETTE_NEUTRAL_70}",
"syntax": "<color>",
"name": "color-neutral-base-70",
"value": "#aeaeae",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 70 - if used as a background, please use Neutral Base 20-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-65": {
"originalValue": "{!PALETTE_NEUTRAL_65}",
"syntax": "<color>",
"name": "color-neutral-base-65",
"value": "#a0a0a0",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 65 - if used as a background, please use Neutral Base 15-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-60": {
"originalValue": "{!PALETTE_NEUTRAL_60}",
"syntax": "<color>",
"name": "color-neutral-base-60",
"value": "#939393",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 60 - if used as a background, please use Neutral Base 100 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-50": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"syntax": "<color>",
"name": "color-neutral-base-50",
"value": "#747474",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 50 - if used as a background, please use Neutral Base 100-95 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-40": {
"originalValue": "{!PALETTE_NEUTRAL_40}",
"syntax": "<color>",
"name": "color-neutral-base-40",
"value": "#5c5c5c",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 40 - if used as a background, please use Neutral Base 100-90 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-30": {
"originalValue": "{!PALETTE_NEUTRAL_30}",
"syntax": "<color>",
"name": "color-neutral-base-30",
"value": "#444444",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 30 - if used as a background, please use Neutral Base 100-80 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-20": {
"originalValue": "{!PALETTE_NEUTRAL_20}",
"syntax": "<color>",
"name": "color-neutral-base-20",
"value": "#2e2e2e",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 20 - if used as a background, please use Neutral Base 100-70 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-15": {
"originalValue": "{!PALETTE_NEUTRAL_15}",
"syntax": "<color>",
"name": "color-neutral-base-15",
"value": "#242424",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 15 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines.",
"group": "theme"
},
"color-neutral-base-10": {
"originalValue": "{!PALETTE_NEUTRAL_10}",
"syntax": "<color>",
"name": "color-neutral-base-10",
"value": "#181818",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral Base 10 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-100": {
"originalValue": "{!PALETTE_BLUE_100}",
"syntax": "<color>",
"name": "color-brand-base-100",
"value": "#ffffff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 100 - if used as a background, please use Brand Base 60-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-95": {
"originalValue": "{!PALETTE_BLUE_95}",
"syntax": "<color>",
"name": "color-brand-base-95",
"value": "#eef4ff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 95 - if used as a background, please use Brand Base 50-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-90": {
"originalValue": "{!PALETTE_BLUE_90}",
"syntax": "<color>",
"name": "color-brand-base-90",
"value": "#d8e6fe",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 90 - if used as a background, please use Brand Base 40-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-80": {
"originalValue": "{!PALETTE_BLUE_80}",
"syntax": "<color>",
"name": "color-brand-base-80",
"value": "#aacbff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 80 - if used as a background, please use Brand Base 30-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-70": {
"originalValue": "{!PALETTE_BLUE_70}",
"syntax": "<color>",
"name": "color-brand-base-70",
"value": "#78b0fd",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 70 - if used as a background, please use Brand Base 20-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-65": {
"originalValue": "{!PALETTE_BLUE_65}",
"syntax": "<color>",
"name": "color-brand-base-65",
"value": "#57a3fd",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 65 - if used as a background, please use Brand Base 15-10 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-60": {
"originalValue": "{!PALETTE_BLUE_60}",
"syntax": "<color>",
"name": "color-brand-base-60",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 60 - if used as a background, please use Brand Base 100 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-50": {
"originalValue": "{!PALETTE_BLUE_50}",
"syntax": "<color>",
"name": "color-brand-base-50",
"value": "#0176d3",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 50 - if used as a background, please use Brand Base 100-95 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-40": {
"originalValue": "{!PALETTE_BLUE_40}",
"syntax": "<color>",
"name": "color-brand-base-40",
"value": "#0b5cab",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 40 - if used as a background, please use Brand Base 100-90 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-30": {
"originalValue": "{!PALETTE_BLUE_30}",
"syntax": "<color>",
"name": "color-brand-base-30",
"value": "#014486",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 30 - if used as a background, please use Brand Base 100-80 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-20": {
"originalValue": "{!PALETTE_BLUE_20}",
"syntax": "<color>",
"name": "color-brand-base-20",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 20 - if used as a background, please use Brand Base 100-70 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-15": {
"originalValue": "{!PALETTE_BLUE_15}",
"syntax": "<color>",
"name": "color-brand-base-15",
"value": "#03234d",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 15 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines.",
"group": "theme"
},
"color-brand-base-10": {
"originalValue": "{!PALETTE_BLUE_10}",
"syntax": "<color>",
"name": "color-brand-base-10",
"value": "#001639",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand Base 10 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines.",
"group": "theme"
},
"color-error-base-100": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"syntax": "<color>",
"name": "color-error-base-100",
"value": "#ffffff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 100 - if used as a background, please use Error Base 60-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-90": {
"originalValue": "{!PALETTE_RED_90}",
"syntax": "<color>",
"name": "color-error-base-90",
"value": "#feded8",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 90 - if used as a background, please use Error Base 50-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-80": {
"originalValue": "{!PALETTE_RED_80}",
"syntax": "<color>",
"name": "color-error-base-80",
"value": "#feb8ab",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 80 - if used as a background, please use Error Base 40-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-70": {
"originalValue": "{!PALETTE_RED_70}",
"syntax": "<color>",
"name": "color-error-base-70",
"value": "#fe8f7d",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 70 - if used as a background, please use Error Base 30-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-60": {
"originalValue": "{!PALETTE_RED_60}",
"syntax": "<color>",
"name": "color-error-base-60",
"value": "#fe5c4c",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 60 - if used as a background, please use Error Base 20-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-50": {
"originalValue": "{!PALETTE_RED_50}",
"syntax": "<color>",
"name": "color-error-base-50",
"value": "#ea001e",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 50 - if used as a background, please use Error Base 100-90 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-40": {
"originalValue": "{!PALETTE_RED_40}",
"syntax": "<color>",
"name": "color-error-base-40",
"value": "#ba0517",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 40 - if used as a background, please use Error Base 100-80 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-30": {
"originalValue": "{!PALETTE_RED_30}",
"syntax": "<color>",
"name": "color-error-base-30",
"value": "#8e030f",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 30 - if used as a background, please use Error Base 100-70 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-20": {
"originalValue": "{!PALETTE_RED_20}",
"syntax": "<color>",
"name": "color-error-base-20",
"value": "#640103",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 20 - if used as a background, please use Error Base 100-60 to meet accessibility guidelines.",
"group": "feedback"
},
"color-error-base-10": {
"originalValue": "{!PALETTE_RED_10}",
"syntax": "<color>",
"name": "color-error-base-10",
"value": "#300c01",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Error Base 10 - if used as a background, please use Error Base 100-50 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-100": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"syntax": "<color>",
"name": "color-warning-base-100",
"value": "#ffffff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 100 - if used as a background, please use Warning Base 60-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-90": {
"originalValue": "{!PALETTE_ORANGE_90}",
"syntax": "<color>",
"name": "color-warning-base-90",
"value": "#fedfd0",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 90 - if used as a background, please use Warning Base 50-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-80": {
"originalValue": "{!PALETTE_ORANGE_80}",
"syntax": "<color>",
"name": "color-warning-base-80",
"value": "#ffba90",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 80 - if used as a background, please use Warning Base 40-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-70": {
"originalValue": "{!PALETTE_ORANGE_70}",
"syntax": "<color>",
"name": "color-warning-base-70",
"value": "#fe9339",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 70 - if used as a background, please use Warning Base 30-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-60": {
"originalValue": "{!PALETTE_ORANGE_60}",
"syntax": "<color>",
"name": "color-warning-base-60",
"value": "#dd7a01",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 60 - if used as a background, please use Warning Base 20-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-50": {
"originalValue": "{!PALETTE_ORANGE_50}",
"syntax": "<color>",
"name": "color-warning-base-50",
"value": "#a96404",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 50 - if used as a background, please use Warning Base 100-90 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-40": {
"originalValue": "{!PALETTE_ORANGE_40}",
"syntax": "<color>",
"name": "color-warning-base-40",
"value": "#825101",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 40 - if used as a background, please use Warning Base 100-80 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-30": {
"originalValue": "{!PALETTE_ORANGE_30}",
"syntax": "<color>",
"name": "color-warning-base-30",
"value": "#5f3e02",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 30 - if used as a background, please use Warning Base 100-70 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-20": {
"originalValue": "{!PALETTE_ORANGE_20}",
"syntax": "<color>",
"name": "color-warning-base-20",
"value": "#3e2b02",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 20 - if used as a background, please use Warning Base 100-60 to meet accessibility guidelines.",
"group": "feedback"
},
"color-warning-base-10": {
"originalValue": "{!PALETTE_ORANGE_10}",
"syntax": "<color>",
"name": "color-warning-base-10",
"value": "#201600",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Warning Base 10 - if used as a background, please use Warning Base 100-50 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-100": {
"originalValue": "{!PALETTE_NEUTRAL_100}",
"syntax": "<color>",
"name": "color-success-base-100",
"value": "#ffffff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 100 - if used as a background, please use Success Base 60-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-90": {
"originalValue": "{!PALETTE_GREEN_90}",
"syntax": "<color>",
"name": "color-success-base-90",
"value": "#cdefc4",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 90 - if used as a background, please use Success Base 50-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-80": {
"originalValue": "{!PALETTE_GREEN_80}",
"syntax": "<color>",
"name": "color-success-base-80",
"value": "#91db8b",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 80 - if used as a background, please use Success Base 40-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-70": {
"originalValue": "{!PALETTE_GREEN_70}",
"syntax": "<color>",
"name": "color-success-base-70",
"value": "#45c65a",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 70 - if used as a background, please use Success Base 30-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-60": {
"originalValue": "{!PALETTE_GREEN_60}",
"syntax": "<color>",
"name": "color-success-base-60",
"value": "#3ba755",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 60 - if used as a background, please use Success Base 20-10 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-50": {
"originalValue": "{!PALETTE_GREEN_50}",
"syntax": "<color>",
"name": "color-success-base-50",
"value": "#2e844a",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 50 - if used as a background, please use Success Base 100-90 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-40": {
"originalValue": "{!PALETTE_GREEN_40}",
"syntax": "<color>",
"name": "color-success-base-40",
"value": "#396547",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 40 - if used as a background, please use Success Base 100-80 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-30": {
"originalValue": "{!PALETTE_GREEN_30}",
"syntax": "<color>",
"name": "color-success-base-30",
"value": "#194e31",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 30 - if used as a background, please use Success Base 100-70 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-20": {
"originalValue": "{!PALETTE_GREEN_20}",
"syntax": "<color>",
"name": "color-success-base-20",
"value": "#1C3326",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 20 - if used as a background, please use Success Base 100-60 to meet accessibility guidelines.",
"group": "feedback"
},
"color-success-base-10": {
"originalValue": "{!PALETTE_GREEN_10}",
"syntax": "<color>",
"name": "color-success-base-10",
"value": "#071b12",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Success Base 10 - if used as a background, please use Success Base 100-50 to meet accessibility guidelines.",
"group": "feedback"
},
"color-border-base-1": {
"originalValue": "{!PALETTE_NEUTRAL_80}",
"syntax": "<color>",
"name": "color-border-base-1",
"value": "#c9c9c9",
"scope": "global",
"cssProperties": [
"border-color"
],
"inherits": false,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Nuetral border color for UI elements.",
"group": "borders"
},
"color-border-base-2": {
"originalValue": "{!PALETTE_NEUTRAL_70}",
"syntax": "<color>",
"name": "color-border-base-2",
"value": "#aeaeae",
"scope": "global",
"cssProperties": [
"border-color"
],
"inherits": false,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral border color for UI elements.",
"group": "borders"
},
"color-border-base-3": {
"originalValue": "{!PALETTE_NEUTRAL_60}",
"syntax": "<color>",
"name": "color-border-base-3",
"value": "#939393",
"scope": "global",
"cssProperties": [
"border-color"
],
"inherits": false,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral border color for UI elements.",
"group": "borders"
},
"color-border-base-4": {
"originalValue": "{!PALETTE_NEUTRAL_50}",
"syntax": "<color>",
"name": "color-border-base-4",
"value": "#747474",
"scope": "global",
"cssProperties": [
"border-color"
],
"inherits": false,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Neutral border color for UI elements.",
"group": "borders"
},
"color-border-brand-1": {
"originalValue": "{!PALETTE_BLUE_70}",
"syntax": "<color>",
"name": "color-border-brand-1",
"value": "#78b0fd",
"scope": "global",
"cssProperties": [
"border-color"
],
"inherits": false,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Brand border color for UI elements.",
"group": "borders"
},
"color-border-brand-2": {
"originalValue": "{!PALETTE_BLUE_60}",
"syntax": "<color>",
"name": "color-border-brand-2",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"border-color"
],
"inherits": false,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Alternate brand border color for UI elements.",
"group": "borders"
},
"link-color": {
"originalValue": "{!PALETTE_BLUE_40}",
"syntax": "<color>",
"name": "link-color",
"value": "#0b5cab",
"scope": "global",
"cssProperties": [
"color"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Default color for hyperlinks.",
"group": "links"
},
"link-color-hover": {
"originalValue": "{!PALETTE_BLUE_30}",
"syntax": "<color>",
"name": "link-color-hover",
"value": "#014486",
"scope": "global",
"cssProperties": [
"color"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Default color on hover for hyperlinks.",
"group": "links"
},
"link-color-focus": {
"originalValue": "{!PALETTE_BLUE_30}",
"syntax": "<color>",
"name": "link-color-focus",
"value": "#014486",
"scope": "global",
"cssProperties": [
"color"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Default color on focus for hyperlinks.",
"group": "links"
},
"link-color-active": {
"originalValue": "{!PALETTE_BLUE_20}",
"syntax": "<color>",
"name": "link-color-active",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"color"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Default color on active for hyperlinks.",
"group": "links"
},
"color-palette-blue-10": {
"originalValue": "{!PALETTE_BLUE_10}",
"syntax": "<color>",
"name": "color-palette-blue-10",
"value": "#001639",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Blue 10",
"group": "reference"
},
"color-palette-blue-15": {
"originalValue": "{!PALETTE_BLUE_15}",
"syntax": "<color>",
"name": "color-palette-blue-15",
"value": "#03234d",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Blue 15",
"group": "reference"
},
"color-palette-blue-20": {
"originalValue": "{!PALETTE_BLUE_20}",
"syntax": "<color>",
"name": "color-palette-blue-20",
"value": "#032d60",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Blue 20",
"group": "reference"
},
"color-palette-blue-30": {
"originalValue": "{!PALETTE_BLUE_30}",
"syntax": "<color>",
"name": "color-palette-blue-30",
"value": "#014486",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Blue 30",
"group": "reference"
},
"color-palette-blue-40": {
"originalValue": "{!PALETTE_BLUE_40}",
"syntax": "<color>",
"name": "color-palette-blue-40",
"value": "#0b5cab",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Blue 40",
"group": "reference"
},
"color-palette-blue-50": {
"originalValue": "{!PALETTE_BLUE_50}",
"syntax": "<color>",
"name": "color-palette-blue-50",
"value": "#0176d3",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Blue 50",
"group": "reference"
},
"color-palette-blue-60": {
"originalValue": "{!PALETTE_BLUE_60}",
"syntax": "<color>",
"name": "color-palette-blue-60",
"value": "#1b96ff",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits": true,
"type": "color",
"namespace": "sds",
"category": "color",
"comment": "Blue 60",
"group": "reference"
},
"color-palette-blue-65": {
"originalValue": "{!PALETTE_BLUE_65}",
"syntax": "<color>",
"name": "color-palette-blue-65",
"value": "#57a3fd",
"scope": "global",
"cssProperties": [
"background-color",
"color",
"border-color",
"fill"
],
"inherits