@gitlab/ui/src/tokens/color.tokens.json

GitLab UI Components

{
  "black": {
    "$value": "#000",
    "$type": "color",
    "themeable": true,
    "prefix": false
  },
  "white": {
    "$value": "#fff",
    "$type": "color",
    "themeable": true,
    "prefix": false
  },
  "blue": {
    "50": {
      "$value": "#e9f3fc",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "100": {
      "$value": "#cbe2f9",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "200": {
      "$value": "#9dc7f1",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "300": {
      "$value": "#63a6e9",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "400": {
      "$value": "#428fdc",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "500": {
      "$value": "#1f75cb",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "600": {
      "$value": "#1068bf",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "700": {
      "$value": "#0b5cad",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "800": {
      "$value": "#064787",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "900": {
      "$value": "#033464",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "950": {
      "$value": "#002850",
      "$type": "color",
      "themeable": true,
      "prefix": false
    }
  },
  "gray": {
    "10": {
      "$value": "#fbfafd",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "50": {
      "$value": "#ececef",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "100": {
      "$value": "#dcdcde",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "200": {
      "$value": "#bfbfc3",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "300": {
      "$value": "#a4a3a8",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "400": {
      "$value": "#89888d",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "500": {
      "$value": "#737278",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "600": {
      "$value": "#626168",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "700": {
      "$value": "#535158",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "800": {
      "$value": "#434248",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "900": {
      "$value": "#333238",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "950": {
      "$value": "#1f1e24",
      "$type": "color",
      "themeable": true,
      "prefix": false
    }
  },
  "green": {
    "50": {
      "$value": "#ecf4ee",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "100": {
      "$value": "#c3e6cd",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "200": {
      "$value": "#91d4a8",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "300": {
      "$value": "#52b87a",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "400": {
      "$value": "#2da160",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "500": {
      "$value": "#108548",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "600": {
      "$value": "#217645",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "700": {
      "$value": "#24663b",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "800": {
      "$value": "#0d532a",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "900": {
      "$value": "#0a4020",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "950": {
      "$value": "#072b15",
      "$type": "color",
      "themeable": true,
      "prefix": false
    }
  },
  "orange": {
    "50": {
      "$value": "#fdf1dd",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "100": {
      "$value": "#f5d9a8",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "200": {
      "$value": "#e9be74",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "300": {
      "$value": "#d99530",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "400": {
      "$value": "#c17d10",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "500": {
      "$value": "#ab6100",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "600": {
      "$value": "#9e5400",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "700": {
      "$value": "#8f4700",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "800": {
      "$value": "#703800",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "900": {
      "$value": "#5c2900",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "950": {
      "$value": "#421f00",
      "$type": "color",
      "themeable": true,
      "prefix": false
    }
  },
  "purple": {
    "50": {
      "$value": "#f4f0ff",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "100": {
      "$value": "#e1d8f9",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "200": {
      "$value": "#cbbbf2",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "300": {
      "$value": "#ac93e6",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "400": {
      "$value": "#9475db",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "500": {
      "$value": "#7b58cf",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "600": {
      "$value": "#694cc0",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "700": {
      "$value": "#5943b6",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "800": {
      "$value": "#453894",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "900": {
      "$value": "#2f2a6b",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "950": {
      "$value": "#232150",
      "$type": "color",
      "themeable": true,
      "prefix": false
    }
  },
  "red": {
    "50": {
      "$value": "#fcf1ef",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "100": {
      "$value": "#fdd4cd",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "200": {
      "$value": "#fcb5aa",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "300": {
      "$value": "#f57f6c",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "400": {
      "$value": "#ec5941",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "500": {
      "$value": "#dd2b0e",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "600": {
      "$value": "#c91c00",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "700": {
      "$value": "#ae1800",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "800": {
      "$value": "#8d1300",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "900": {
      "$value": "#660e00",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "950": {
      "$value": "#4d0a00",
      "$type": "color",
      "themeable": true,
      "prefix": false
    }
  },
  "brand": {
    "charcoal": {
      "$value": "#171321",
      "$type": "color",
      "themeable": true,
      "prefix": false
    },
    "orange": {
      "01": {
        "$value": "#fca326",
        "$type": "color",
        "themeable": true,
        "prefix": false
      },
      "02": {
        "$value": "#fc6d26",
        "$type": "color",
        "themeable": true,
        "prefix": false
      },
      "03": {
        "$value": "#e24329",
        "$type": "color",
        "themeable": true,
        "prefix": false
      }
    },
    "purple": {
      "01": {
        "$value": "#a989f5",
        "$type": "color",
        "themeable": true,
        "prefix": false
      },
      "02": {
        "$value": "#7759c2",
        "$type": "color",
        "themeable": true,
        "prefix": false
      }
    },
    "gray": {
      "01": {
        "$value": "#d1d0d3",
        "$type": "color",
        "themeable": true,
        "prefix": false
      },
      "02": {
        "$value": "#a2a1a6",
        "$type": "color",
        "themeable": true,
        "prefix": false
      },
      "03": {
        "$value": "#74717a",
        "$type": "color",
        "themeable": true,
        "prefix": false
      },
      "04": {
        "$value": "#45424d",
        "$type": "color",
        "themeable": true,
        "prefix": false
      },
      "05": {
        "$value": "#2b2838",
        "$type": "color",
        "themeable": true,
        "prefix": false
      }
    }
  }
}