Colors

Token values as CSS custom properties.

{
  "black": "#000000",
  "white": "#ffffff",
  "yellow": {
    "10": "#fcf4d6",
    "20": "#fddc69",
    "30": "#f1c21b",
    "40": "#d2a106",
    "50": "#b28600",
    "60": "#8e6a00",
    "70": "#684e00",
    "80": "#483700",
    "90": "#302400",
    "100": "#1c1500"
  },
  "orange": {
    "10": "#fff2e8",
    "20": "#ffd9be",
    "30": "#ffb784",
    "40": "#ff832b",
    "50": "#eb6200",
    "60": "#ba4e00",
    "70": "#8a3800",
    "80": "#5e2900",
    "90": "#3e1a00",
    "100": "#231000"
  },
  "red": {
    "10": "#fff1f1",
    "20": "#ffd7d9",
    "30": "#ffb3b8",
    "40": "#ff8389",
    "50": "#fa4d56",
    "60": "#da1e28",
    "70": "#a2191f",
    "80": "#750e13",
    "90": "#520408",
    "100": "#2d0709"
  },
  "magenta": {
    "10": "#fff0f7",
    "20": "#ffd6e8",
    "30": "#ffafd2",
    "40": "#ff7eb6",
    "50": "#ee5396",
    "60": "#d02670",
    "70": "#9f1853",
    "80": "#740937",
    "90": "#510224",
    "100": "#2a0a18"
  },
  "purple": {
    "10": "#f6f2ff",
    "20": "#e8daff",
    "30": "#d4bbff",
    "40": "#be95ff",
    "50": "#a56eff",
    "60": "#8a3ffc",
    "70": "#6929c4",
    "80": "#491d8b",
    "90": "#31135e",
    "100": "#1c0f30"
  },
  "blue": {
    "10": "#edf5ff",
    "20": "#d0e2ff",
    "30": "#a6c8ff",
    "40": "#78a9ff",
    "50": "#4589ff",
    "60": "#0f62fe",
    "70": "#0043ce",
    "80": "#002d9c",
    "90": "#001d6c",
    "100": "#001141"
  },
  "cyan": {
    "10": "#e5f6ff",
    "20": "#bae6ff",
    "30": "#82cfff",
    "40": "#33b1ff",
    "50": "#1192e8",
    "60": "#0072c3",
    "70": "#00539a",
    "80": "#003a6d",
    "90": "#012749",
    "100": "#061727"
  },
  "teal": {
    "10": "#d9fbfb",
    "20": "#9ef0f0",
    "30": "#3ddbd9",
    "40": "#08bdba",
    "50": "#009d9a",
    "60": "#007d79",
    "70": "#005d5d",
    "80": "#004144",
    "90": "#022b30",
    "100": "#081a1c"
  },
  "green": {
    "10": "#defbe6",
    "20": "#a7f0ba",
    "30": "#6fdc8c",
    "40": "#42be65",
    "50": "#24a148",
    "60": "#198038",
    "70": "#0e6027",
    "80": "#044317",
    "90": "#022d0d",
    "100": "#071908"
  },
  "coolGray": {
    "10": "#f2f4f8",
    "20": "#dde1e6",
    "30": "#c1c7cd",
    "40": "#a2a9b0",
    "50": "#878d96",
    "60": "#697077",
    "70": "#4d5358",
    "80": "#343a3f",
    "90": "#21272a",
    "100": "#121619"
  },
  "gray": {
    "10": "#f4f4f4",
    "20": "#e0e0e0",
    "30": "#c6c6c6",
    "40": "#a8a8a8",
    "50": "#8d8d8d",
    "60": "#6f6f6f",
    "70": "#525252",
    "80": "#393939",
    "90": "#262626",
    "100": "#161616"
  },
  "warmGray": {
    "10": "#f7f3f2",
    "20": "#e5e0df",
    "30": "#cac5c4",
    "40": "#ada8a8",
    "50": "#8f8b8b",
    "60": "#726e6e",
    "70": "#565151",
    "80": "#3c3838",
    "90": "#272525",
    "100": "#171414"
  }
}