salesforce-lightning.json

{
  "palette": {
    "$type": "color",
    "blue10": { "$value": "#001639" },
    "blue15": { "$value": "#03234d" },
    "blue20": { "$value": "#032d60" },
    "blue30": { "$value": "#014486" },
    "blue40": { "$value": "#0b5cab" },
    "blue50": { "$value": "#0176d3" },
    "blue60": { "$value": "#1b96ff" },
    "blue65": { "$value": "#57a3fd" },
    "blue70": { "$value": "#78b0fd" },
    "blue80": { "$value": "#aacbff" },
    "blue90": { "$value": "#d8e6fe" },
    "blue95": { "$value": "#eef4ff" },
    "cloudBlue10": { "$value": "#001a28" },
    "cloudBlue15": { "$value": "#0a2636" },
    "cloudBlue20": { "$value": "#023248" },
    "cloudBlue30": { "$value": "#084968" },
    "cloudBlue40": { "$value": "#05628a" },
    "cloudBlue50": { "$value": "#107cad" },
    "cloudBlue60": { "$value": "#0d9dda" },
    "cloudBlue65": { "$value": "#08abed" },
    "cloudBlue70": { "$value": "#1ab9ff" },
    "cloudBlue80": { "$value": "#90d0fe" },
    "cloudBlue90": { "$value": "#cfe9fe" },
    "cloudBlue95": { "$value": "#eaf5fe" },
    "green10": { "$value": "#071b12" },
    "green15": { "$value": "#0c2912" },
    "green20": { "$value": "#0e3522" },
    "green30": { "$value": "#194e31" },
    "green40": { "$value": "#22683e" },
    "green50": { "$value": "#2e844a" },
    "green60": { "$value": "#3ba755" },
    "green65": { "$value": "#41b658" },
    "green70": { "$value": "#45c65a" },
    "green80": { "$value": "#91db8b" },
    "green90": { "$value": "#cdefc4" },
    "green95": { "$value": "#ebf7e6" },
    "hotOrange10": { "$value": "#281202" },
    "hotOrange15": { "$value": "#421604" },
    "hotOrange20": { "$value": "#541d01" },
    "hotOrange30": { "$value": "#7e2600" },
    "hotOrange40": { "$value": "#aa3001" },
    "hotOrange50": { "$value": "#d83a00" },
    "hotOrange60": { "$value": "#ff5d2d" },
    "hotOrange65": { "$value": "#ff784f" },
    "hotOrange70": { "$value": "#ff906e" },
    "hotOrange80": { "$value": "#feb9a5" },
    "hotOrange90": { "$value": "#ffded5" },
    "hotOrange95": { "$value": "#fef1ed" },
    "indigo10": { "$value": "#200647" },
    "indigo15": { "$value": "#1f0974" },
    "indigo20": { "$value": "#260f8f" },
    "indigo30": { "$value": "#2f2cb7" },
    "indigo40": { "$value": "#3a49da" },
    "indigo50": { "$value": "#5867e8" },
    "indigo60": { "$value": "#7f8ced" },
    "indigo65": { "$value": "#8e9bef" },
    "indigo70": { "$value": "#9ea9f1" },
    "indigo80": { "$value": "#bec7f6" },
    "indigo90": { "$value": "#e0e5f8" },
    "indigo95": { "$value": "#f1f3fb" },
    "neutral10": { "$value": "#181818" },
    "neutral20": { "$value": "#2e2e2e" },
    "neutral30": { "$value": "#444444" },
    "neutral40": { "$value": "#5c5c5c" },
    "neutral50": { "$value": "#747474" },
    "neutral60": { "$value": "#939393" },
    "neutral70": { "$value": "#aeaeae" },
    "neutral80": { "$value": "#c9c9c9" },
    "neutral90": { "$value": "#e5e5e5" },
    "neutral95": { "$value": "#f3f3f3" },
    "neutral100": { "$value": "#ffffff" },
    "orange10": { "$value": "#201600" },
    "orange15": { "$value": "#371e03" },
    "orange20": { "$value": "#3e2b02" },
    "orange30": { "$value": "#5f3e02" },
    "orange40": { "$value": "#825101" },
    "orange50": { "$value": "#a96404" },
    "orange60": { "$value": "#dd7a01" },
    "orange65": { "$value": "#f38303" },
    "orange70": { "$value": "#fe9339" },
    "orange80": { "$value": "#ffba90" },
    "orange90": { "$value": "#fedfd0" },
    "orange95": { "$value": "#fff1ea" },
    "pink10": { "$value": "#370114" },
    "pink15": { "$value": "#4b0620" },
    "pink20": { "$value": "#61022a" },
    "pink30": { "$value": "#8a033e" },
    "pink40": { "$value": "#b60554" },
    "pink50": { "$value": "#e3066a" },
    "pink60": { "$value": "#ff538a" },
    "pink65": { "$value": "#fe7298" },
    "pink70": { "$value": "#fe8aa7" },
    "pink80": { "$value": "#fdb6c5" },
    "pink90": { "$value": "#fddde3" },
    "pink95": { "$value": "#fef0f3" },
    "purple10": { "$value": "#240643" },
    "purple15": { "$value": "#300b60" },
    "purple20": { "$value": "#401075" },
    "purple30": { "$value": "#5a1ba9" },
    "purple40": { "$value": "#7526e3" },
    "purple50": { "$value": "#9050e9" },
    "purple60": { "$value": "#ad7bee" },
    "purple65": { "$value": "#b78def" },
    "purple70": { "$value": "#c29ef1" },
    "purple80": { "$value": "#d78ff5" },
    "purple90": { "$value": "#ece1f9" },
    "purple95": { "$value": "#f6f2fb" },
    "red10": { "$value": "#300c01" },
    "red15": { "$value": "#4a0c04" },
    "red20": { "$value": "#640103" },
    "red30": { "$value": "#8e030f" },
    "red40": { "$value": "#ba0517" },
    "red50": { "$value": "#ea001e" },
    "red60": { "$value": "#fe5c4c" },
    "red65": { "$value": "#fe7765" },
    "red70": { "$value": "#fe8f7d" },
    "red80": { "$value": "#feb8ab" },
    "red90": { "$value": "#feded8" },
    "red95": { "$value": "#fef1ee" },
    "teal10": { "$value": "#071b12" },
    "teal15": { "$value": "#072825" },
    "teal20": { "$value": "#023434" },
    "teal30": { "$value": "#024d4c" },
    "teal40": { "$value": "#056764" },
    "teal50": { "$value": "#0b827c" },
    "teal60": { "$value": "#06a59a" },
    "teal65": { "$value": "#03b4a7" },
    "teal70": { "$value": "#01c3b3" },
    "teal80": { "$value": "#04e1cb" },
    "teal90": { "$value": "#acf3e4" },
    "teal95": { "$value": "#def9f3" },
    "violet10": { "$value": "#2e0039" },
    "violet15": { "$value": "#3d0157" },
    "violet20": { "$value": "#520066" },
    "violet30": { "$value": "#730394" },
    "violet40": { "$value": "#9602c7" },
    "violet50": { "$value": "#ba01ff" },
    "violet60": { "$value": "#cb65ff" },
    "violet65": { "$value": "#d17dfe" },
    "violet70": { "$value": "#d892fe" },
    "violet80": { "$value": "#e5b9fe" },
    "violet90": { "$value": "#f2defe" },
    "violet95": { "$value": "#f9f0ff" },
    "yellow10": { "$value": "#281202" },
    "yellow15": { "$value": "#2e2204" },
    "yellow20": { "$value": "#4f2100" },
    "yellow30": { "$value": "#6f3400" },
    "yellow40": { "$value": "#8c4b02" },
    "yellow50": { "$value": "#a86403" },
    "yellow60": { "$value": "#ca8501" },
    "yellow65": { "$value": "#d79304" },
    "yellow70": { "$value": "#e4a201" },
    "yellow80": { "$value": "#fcc003" },
    "yellow90": { "$value": "#f9e3b6" },
    "yellow95": { "$value": "#fbf3e0" }
  },
  "color": {
    "$type": "color",
    "background": { "$value": "{color.gray3}" },
    "backgroundActionbarIconUtility": { "$value": "{color.gray9}" },
    "backgroundAlt": { "$value": "{palette.neutral100}" },
    "backgroundAlt2": { "$value": "{color.gray3}" },
    "backgroundAltInverse": { "$value": "{palette.blue20}" },
    "backgroundAnchor": { "$value": "{color.gray3}" },
    "backgroundBackdrop": { "$value": "#ffffffbf" },
    "backgroundBackdropTint": { "$value": "{color.gray2}" },
    "backgroundBrowser": { "$value": "{color.gray9}" },
    "backgroundCustomer": { "$value": "{palette.orange70}" },
    "backgroundDark": { "$value": "{color.gray4}" },
    "backgroundDestructive": { "$value": "{palette.red40}" },
    "backgroundDestructiveActive": { "$value": "{palette.red30}" },
    "backgroundDestructiveHover": { "$value": "{palette.red40}" },
    "backgroundError": { "$value": "{palette.red60}" },
    "backgroundErrorDark": { "$value": "{palette.red40}" },
    "backgroundHighlight": { "$value": "#faffbd" },
    "backgroundHighlightSearch": { "$value": "#fff03f" },
    "backgroundImageOverlay": { "$value": "#00000099" },
    "backgroundInfo": { "$value": "{color.gray9}" },
    "backgroundInputCheckboxDisabled": { "$value": "{color.gray5}" },
    "backgroundInputDisabled": { "$value": "{color.gray4}" },
    "backgroundInverse": { "$value": "{palette.blue10}" },
    "backgroundInverseLight": { "$value": "{palette.blue20}" },
    "backgroundLight": { "$value": "{palette.neutral100}" },
    "backgroundNotificationNew": { "$value": "{color.gray3}" },
    "backgroundOffline": { "$value": "{color.gray10}" },
    "backgroundPayload": { "$value": "{color.gray2}" },
    "backgroundPost": { "$value": "{color.gray3}" },
    "backgroundPrimary": { "$value": "{color.gray3}" },
    "backgroundRowActive": { "$value": "{color.gray4}" },
    "backgroundRowHover": { "$value": "{color.gray3}" },
    "backgroundRowNew": { "$value": "#cdefc4" },
    "backgroundRowSelected": { "$value": "{color.gray4}" },
    "backgroundScrollbar": { "$value": "{color.gray4}" },
    "backgroundScrollbarTrack": { "$value": "{color.gray6}" },
    "backgroundSecondary": { "$value": "{palette.neutral100}" },
    "backgroundSelection": { "$value": "{palette.blue90}" },
    "backgroundShade": { "$value": "{color.gray4}" },
    "backgroundShadeDark": { "$value": "{color.gray5}" },
    "backgroundSpinnerDot": { "$value": "{color.gray7}" },
    "backgroundStencil": { "$value": "{color.gray3}" },
    "backgroundStencilAlt": { "$value": "{color.gray4}" },
    "backgroundSuccess": { "$value": "#45c65a" },
    "backgroundSuccessDark": { "$value": "#2e844a" },
    "backgroundSuccessDarker": { "$value": "#194e31" },
    "backgroundTempModal": { "$value": "{color.gray8}" },
    "backgroundTempModalTint": { "$value": "#08070799" },
    "backgroundToast": { "$value": "{color.gray9}" },
    "backgroundToggle": { "$value": "{color.gray7}" },
    "backgroundToggleDisabled": { "$value": "{color.gray7}" },
    "backgroundToggleHover": { "$value": "{color.gray8}" },
    "backgroundUtilityBarHover": { "$value": "{color.gray4}" },
    "backgroundWarning": { "$value": "{palette.orange70}" },
    "backgroundWarningDark": { "$value": "{palette.orange70}" },
    "border": { "$value": "{color.gray5}" },
    "borderBrand": { "$value": "{palette.blue60}" },
    "borderBrandDark": { "$value": "{palette.blue30}" },
    "borderButtonDefault": { "$value": "{color.gray5}" },
    "borderButtonFocusInverse": { "$value": "{color.gray4}" },
    "borderCustomer": { "$value": "{palette.orange70}" },
    "borderDestructive": { "$value": "{palette.red50}" },
    "borderDestructiveActive": { "$value": "{palette.red30}" },
    "borderDestructiveHover": { "$value": "{palette.red40}" },
    "borderError": { "$value": "{palette.red50}" },
    "borderErrorAlt": { "$value": "{palette.red70}" },
    "borderErrorDark": { "$value": "{palette.red70}" },
    "borderInfo": { "$value": "{color.gray9}" },
    "borderInput": { "$value": "{color.gray5}" },
    "borderInputDisabled": { "$value": "{color.gray6}" },
    "borderInverse": { "$value": "{palette.blue10}" },
    "borderLinkFocusInverse": { "$value": "{color.gray4}" },
    "borderOffline": { "$value": "{color.gray10}" },
    "borderPrimary": { "$value": "{color.gray5}" },
    "borderReminder": { "$value": "{color.gray4}" },
    "borderRowSelected": { "$value": "{palette.blue50}" },
    "borderRowSelectedHover": { "$value": "{palette.blue60}" },
    "borderSelection": { "$value": "{palette.blue50}" },
    "borderSelectionActive": { "$value": "{color.gray2}" },
    "borderSelectionHover": { "$value": "{palette.blue60}" },
    "borderSeparator": { "$value": "{color.gray2}" },
    "borderSeparatorAlt": { "$value": "{color.gray5}" },
    "borderSeparatorAlt2": { "$value": "{color.gray6}" },
    "borderSeparatorInverse": { "$value": "{palette.blue20}" },
    "borderSuccess": { "$value": "#91db8b" },
    "borderSuccessDark": { "$value": "#2e844a" },
    "borderWarning": { "$value": "{palette.orange70}" },
    "brand": { "$value": "{palette.blue60}" },
    "brandDark": { "$value": "{palette.blue50}" },
    "brandDarker": { "$value": "{palette.blue30}" },
    "contrastPrimary": { "$value": "{color.gray3}" },
    "contrastSecondary": { "$value": "{color.gray3}" },
    "gray1": { "$value": "#ffffff" },
    "gray2": { "$value": "#fafaf9" },
    "gray3": { "$value": "#f3f2f2" },
    "gray4": { "$value": "#ecebea" },
    "gray5": { "$value": "#dddbda" },
    "gray6": { "$value": "#c9c7c5" },
    "gray7": { "$value": "#b0adab" },
    "gray8": { "$value": "#969492" },
    "gray9": { "$value": "#706e6b" },
    "gray10": { "$value": "#514f4d" },
    "gray11": { "$value": "#3e3e3c" },
    "gray12": { "$value": "#2b2826" },
    "gray13": { "$value": "#080707" },
    "pickerSliderThumbColorBackground": { "$value": "{color.gray3}" },
    "strokeBrand": { "$value": "{palette.blue50}" },
    "strokeBrandActive": { "$value": "{palette.blue20}" },
    "strokeBrandHover": { "$value": "{palette.blue50}" },
    "strokeDisabled": { "$value": "{color.gray4}" },
    "strokeHeaderButton": { "$value": "{color.gray7}" },
    "textActionLabel": { "$value": "{color.gray10}" },
    "textActionLabelActive": { "$value": "{color.gray13}" },
    "textBrand": { "$value": "{palette.blue60}" },
    "textBrandPrimary": { "$value": "{palette.neutral100}" },
    "textButtonDefaultDisabled": { "$value": "{color.gray5}" },
    "textButtonDefaultHint": { "$value": "{color.gray7}" },
    "textButtonInverse": { "$value": "{color.gray4}" },
    "textCustomer": { "$value": "{palette.orange70}" },
    "textDefault": { "$value": "{color.gray13}" },
    "textDestructive": { "$value": "{palette.red50}" },
    "textDestructiveHover": { "$value": "{palette.red40}" },
    "textError": { "$value": "{palette.red50}" },
    "textIconDefault": { "$value": "{color.gray9}" },
    "textIconDefaultDisabled": { "$value": "{color.gray5}" },
    "textIconDefaultHint": { "$value": "{color.gray7}" },
    "textIconDefaultHintBorderless": { "$value": "{color.gray4}" },
    "textIconInverse": { "$value": "{palette.neutral100}" },
    "textIconInverseActive": { "$value": "{palette.neutral100}" },
    "textIconInverseHover": { "$value": "{palette.neutral100}" },
    "textIconUtility": { "$value": "{color.gray7}" },
    "textInputDisabled": { "$value": "{color.gray10}" },
    "textInputIcon": { "$value": "{color.gray7}" },
    "textInverse": { "$value": "{palette.neutral100}" },
    "textInverseActive": { "$value": "{palette.blue60}" },
    "textInverseHover": { "$value": "{color.gray7}" },
    "textInverseWeak": { "$value": "{color.gray7}" },
    "textLabel": { "$value": "{color.gray10}" },
    "textLink": { "$value": "{palette.blue50}" },
    "textLinkActive": { "$value": "{palette.blue20}" },
    "textLinkDisabled": { "$value": "{palette.blue20}" },
    "textLinkFocus": { "$value": "{palette.blue30}" },
    "textLinkHover": { "$value": "{palette.blue30}" },
    "textLinkInverse": { "$value": "{palette.neutral100}" },
    "textLinkInverseActive": { "$value": "#ffffff80" },
    "textLinkInverseDisabled": { "$value": "#ffffff26" },
    "textLinkInverseHover": { "$value": "#ffffffbf" },
    "textModalButton": { "$value": "{color.gray10}" },
    "textPlaceholder": { "$value": "{color.gray9}" },
    "textPlaceholderInverse": { "$value": "{color.gray4}" },
    "textRequired": { "$value": "#ea001e" },
    "textSecondary": { "$value": "{color.gray10}" },
    "textStageLeft": { "$value": "{color.gray4}" },
    "textSuccess": { "$value": "#2e844a" },
    "textSuccessInverse": { "$value": "#45c65a" },
    "textTabLabel": { "$value": "#2b2826" },
    "textTabLabelDisabled": { "$value": "{color.gray4}" },
    "textTertiary": { "$value": "{color.gray8}" },
    "textToast": { "$value": "{color.gray4}" },
    "textToggleDisabled": { "$value": "{color.gray5}" },
    "textWarning": { "$value": "{palette.orange70}" },
    "textWarningAlt": { "$value": "#8c4b02" },
    "textWeak": { "$value": "{color.gray10}" }
  },
  "icon": {
    "size": {
      "$type": "dimension",
      "xxxSmall": { "$value": "3rem" },
      "xxSmall": { "$value": "6rem" },
      "xSmall": { "$value": "12rem" },
      "small": { "$value": "15rem" },
      "medium": { "$value": "20rem" },
      "large": { "$value": "25rem" },
      "xLarge": { "$value": "40rem" },
      "xxLarge": { "$value": "60rem" }
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "base": {
        "$value": [
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica",
          "Arial",
          "sans-serif",
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol"
        ]
      },
      "heading": {
        "$value": [
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica",
          "Arial",
          "sans-serif",
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol"
        ]
      },
      "mono": {
        "$value": ["Consolas", "Menlo", "Monaco", "Courier", "monospace"]
      }
    },
    "size": {
      "$type": "dimension",
      "1": { "$value": "0.625rem" },
      "2": { "$value": "0.75rem" },
      "3": { "$value": "0.8125rem" },
      "4": { "$value": "0.875rem" },
      "5": { "$value": "1rem" },
      "6": { "$value": "1.125rem" },
      "7": { "$value": "1.25rem" },
      "8": { "$value": "1.5rem" },
      "9": { "$value": "1.75rem" },
      "10": { "$value": "2rem" },
      "11": { "$value": "2.625rem" }
    },
    "lineHeight": {
      "$type": "dimension",
      "heading": { "$value": "1.25em" },
      "text": { "$value": "1.5em" },
      "reset": { "$value": "1em" }
    }
  },
  "space": {
    "$type": "dimension",
    "none": { "$value": 0 },
    "xxxSmall": { "$value": "0.125rem" },
    "xxSmall": { "$value": "0.25rem" },
    "xSmall": { "$value": "0.5rem" },
    "small": { "$value": "0.75rem" },
    "medium": { "$value": "1rem" },
    "large": { "$value": "1.5rem" },
    "xLarge": { "$value": "2rem" },
    "xxLarge": { "$value": "3rem" }
  }
}