{
  "color": {
    "type": "color",
    "core": {
      "base": {
        "black": {
          "value": "#000"
        },
        "white": {
          "value": "#FFF"
        }
      },
      "neutral": {
        "50": {
          "default": {
            "value": "#F4F6F8"
          },
          "lighten": {
            "value": "#FAFAFAFA"
          },
          "darken": {
            "value": "#234A710D"
          }
        },
        "100": {
          "default": {
            "value": "#DAE2EB"
          },
          "lighten": {
            "value": "#F2F2F3ED"
          },
          "darken": {
            "value": "#083C7826"
          }
        },
        "200": {
          "default": {
            "value": "#B5C1C9"
          },
          "lighten": {
            "value": "#F2F2F3C9"
          },
          "darken": {
            "value": "#082F4A4D"
          }
        },
        "300": {
          "default": {
            "value": "#7B8A95"
          },
          "lighten": {
            "value": "#E4E6E796"
          },
          "darken": {
            "value": "#0A1C2985"
          }
        },
        "400": {
          "default": {
            "value": "#52616B"
          },
          "lighten": {
            "value": "#DCE1E56B"
          },
          "darken": {
            "value": "#0C1317AD"
          }
        },
        "500": {
          "default": {
            "value": "#424E57"
          },
          "lighten": {
            "value": "#D2DDE559"
          },
          "darken": {
            "value": "#101214BF"
          }
        },
        "600": {
          "default": {
            "value": "#343D44"
          },
          "lighten": {
            "value": "#CBE0F145"
          },
          "darken": {
            "value": "#090A0BCC"
          }
        },
        "700": {
          "default": {
            "value": "#272D33"
          },
          "lighten": {
            "value": "#C2E0FF33"
          },
          "darken": {
            "value": "#070808D9"
          }
        },
        "800": {
          "default": {
            "value": "#181C20"
          },
          "lighten": {
            "value": "#BBD9F621"
          },
          "darken": {
            "value": "#050505E8"
          }
        },
        "900": {
          "default": {
            "value": "#0F1114"
          },
          "lighten": {
            "value": "#BCD5FA14"
          },
          "darken": {
            "value": "#020408F2"
          }
        }
      },
      "blue": {
        "50": {
          "value": "#BECAFF"
        },
        "100": {
          "value": "#9FACFF"
        },
        "200": {
          "value": "#8890FF"
        },
        "300": {
          "value": "#7174FF"
        },
        "400": {
          "value": "#5A58FF"
        },
        "500": {
          "value": "#4038FF",
          "description": "Joystream brand primary color"
        },
        "600": {
          "value": "#342ECF"
        },
        "700": {
          "value": "#2823A0"
        },
        "800": {
          "value": "#1B186C"
        },
        "900": {
          "value": "#08071E"
        }
      },
      "green": {
        "50": {
          "value": "#75E1A2"
        },
        "100": {
          "value": "#12CC60"
        },
        "200": {
          "value": "#0EB152"
        },
        "300": {
          "value": "#0C9846"
        },
        "400": {
          "value": "#0A823C"
        },
        "500": {
          "value": "#096C32"
        },
        "600": {
          "value": "#075829"
        },
        "700": {
          "value": "#05441F"
        },
        "800": {
          "value": "#042D15"
        },
        "900": {
          "value": "#010D06"
        }
      },
      "red": {
        "50": {
          "value": "#FFBBB7"
        },
        "100": {
          "value": "#FF948D"
        },
        "200": {
          "value": "#FF695F"
        },
        "300": {
          "value": "#F34235"
        },
        "400": {
          "value": "#CF382D"
        },
        "500": {
          "value": "#AE2F26"
        },
        "600": {
          "value": "#8D261F"
        },
        "700": {
          "value": "#6D1E18"
        },
        "800": {
          "value": "#4A1410"
        },
        "900": {
          "value": "#150605"
        }
      },
      "yellow": {
        "50": {
          "value": "#FEE879"
        },
        "100": {
          "value": "#ECC502"
        },
        "200": {
          "value": "#CAA802"
        },
        "300": {
          "value": "#AC9002"
        },
        "400": {
          "value": "#917901"
        },
        "500": {
          "value": "#786401"
        },
        "600": {
          "value": "#615001"
        },
        "700": {
          "value": "#4A3D01"
        },
        "800": {
          "value": "#302800"
        },
        "900": {
          "value": "#0A0900"
        }
      }
    },
    "text": {
      "description": "Colors for text & icons",
      "default": {
        "muted": {
          "value": "{color.core.neutral.300.default}",
          "description": "Disabled text, placeholders, etc."
        },
        "default": {
          "value": "{color.core.neutral.200.default}",
          "description": "Paragraphs, captions, etc."
        },
        "strong": {
          "value": "{color.core.neutral.50.default}",
          "description": "Headlines, component labels, etc."
        }
      },
      "primary": {
        "value": "{color.core.blue.300}",
        "description": "Accent, links etc."
      },
      "error": {
        "value": "{color.core.red.200}",
        "description": "Errors, destructive action labels etc."
      },
      "success": {
        "value": "{color.core.green.300}",
        "description": "Success, positive text, etc."
      },
      "caution": {
        "value": "{color.core.yellow.200}",
        "description": "Warnings, cautionary text, etc."
      }
    },
    "border": {
      "default": {
        "muted": {
          "default": {
            "value": "{color.core.neutral.800.default}"
          },
          "alpha": {
            "value": "{color.core.neutral.800.lighten}",
            "description": "Dividers, separators, etc."
          }
        },
        "default": {
          "default": {
            "value": "{color.core.neutral.600.default}"
          },
          "alpha": {
            "value": "{color.core.neutral.600.lighten}",
            "description": "Component borders on default states"
          }
        },
        "strong": {
          "default": {
            "value": "{color.core.neutral.400.default}"
          },
          "alpha": {
            "value": "{color.core.neutral.400.lighten}",
            "description": "Component borders on hover states"
          }
        }
      },
      "primary": {
        "value": "{color.core.blue.500}",
        "description": "Accent, active states etc."
      },
      "error": {
        "value": "{color.core.red.200}",
        "description": "Errors, alerts etc."
      }
    },
    "background": {
      "default": {
        "muted": {
          "default": {
            "value": "{color.core.neutral.900.default}",
            "description": "1st level section, cards, etc."
          },
          "alpha": {
            "value": "{color.core.neutral.900.lighten}"
          }
        },
        "default": {
          "default": {
            "value": "{color.core.neutral.800.default}",
            "description": "2nd level section, cards, etc."
          },
          "alpha": {
            "value": "{color.core.neutral.800.lighten}",
            "description": "Component backgrounds on hover states"
          }
        },
        "strong": {
          "default": {
            "value": "{color.core.neutral.700.default}",
            "description": "Windows, dialogs, side sheets, etc."
          },
          "alpha": {
            "value": "{color.core.neutral.700.lighten}",
            "description": "Component backgrounds on pressed states"
          }
        },
        "elevated": {
          "default": {
            "value": "{color.core.neutral.600.default}",
            "description": "Dropdowns, popovers, etc."
          },
          "alpha": {
            "value": "{color.core.neutral.600.lighten}"
          }
        },
        "overlay": {
          "value": "{color.core.neutral.500.darken}",
          "description": "Overlay behind dialogs, side sheets, etc."
        }
      },
      "primary": {
        "muted": {
          "value": "{color.core.blue.600}",
          "description": "Component backgrounds on pressed states"
        },
        "default": {
          "value": "{color.core.blue.500}",
          "description": "Component backgrounds on default states, callouts, etc."
        },
        "strong": {
          "value": "{color.core.blue.400}",
          "description": "Component backgrounds on hover statess"
        }
      },
      "error": {
        "muted": {
          "value": "{color.core.red.600}",
          "description": "Component backgrounds on pressed states"
        },
        "default": {
          "value": "{color.core.red.500}",
          "description": "Component backgrounds on default states, callouts, etc."
        },
        "strong": {
          "value": "{color.core.red.400}",
          "description": "Component backgrounds on hover statess"
        }
      },
      "success": {
        "muted": {
          "value": "{color.core.green.600}",
          "description": "Component backgrounds on pressed states"
        },
        "default": {
          "value": "{color.core.green.500}",
          "description": "Component backgrounds on default states, callouts, etc."
        },
        "strong": {
          "value": "{color.core.green.400}",
          "description": "Component backgrounds on hover statess"
        }
      },
      "caution": {
        "muted": {
          "value": "{color.core.yellow.300}",
          "description": "Component backgrounds on pressed states"
        },
        "default": {
          "value": "{color.core.yellow.200}",
          "description": "Component backgrounds on default states, callouts, etc."
        },
        "strong": {
          "value": "{color.core.yellow.100}",
          "description": "Component backgrounds on hover statess"
        }
      }
    }
  }
}
