{
  "$schema": "https://ably.com/design/tokens/colour-tokens.schema.json",
  "_metadata": {
    "name": "Ably Colour Tokens",
    "description": "Core colour token definitions for Ably's brand and UI. Extracted from Figma SSOT: 01 — Styles.",
    "source": "https://www.figma.com/design/jTQgyIovrhGBOf4Zrvjvbk/01---Styles?node-id=7503-549",
    "version": "1.0.0",
    "generated": "2026-02-16",
    "notes": {
      "starred_values": "Swatches marked 'keySwatch: true' are the starred values in the Figma source, representing the defining swatch in each scale.",
      "dark_mode": "Each scale swatch includes a 'darkModeEquivalent' field showing which swatch it maps to in dark mode (from the Figma '<>' variable naming convention). e.g. Neutral 800 in light mode maps to Neutral 500 in dark mode.",
      "secondary": "Supporting colour set that complements the primary brand colours. Used for product colour coding and data visualisation. Not intended for use in core UI elements or large areas of the interface."
    }
  },

  "brand": {
    "primary": {
      "orange": {
        "value": "#FF5416",
        "scale": "orange-600",
        "usage": "Primary brand colour. CTAs, primary actions, logo, brand moments."
      },
      "white": {
        "value": "#FFFFFF",
        "scale": "neutral-000",
        "usage": "Primary white. Backgrounds, cards, inverse text."
      },
      "black": {
        "value": "#03020D",
        "scale": "neutral-1300",
        "usage": "Primary black. Near-black with a subtle cool undertone. Headings on light backgrounds, dark-mode backgrounds."
      }
    }
  },

  "neutral": {
    "000": {
      "hex": "#FFFFFF",
      "rgb": [255, 255, 255],
      "keySwatch": true,
      "darkModeEquivalent": "1300",
      "usage": "Primary white"
    },
    "100": { "hex": "#F6F8FA", "rgb": [246, 248, 250], "darkModeEquivalent": "1200" },
    "200": { "hex": "#EEF1F6", "rgb": [238, 241, 246], "darkModeEquivalent": "1100" },
    "300": { "hex": "#E6EAF0", "rgb": [230, 234, 240], "darkModeEquivalent": "1000" },
    "400": { "hex": "#D9DDE4", "rgb": [217, 221, 228], "darkModeEquivalent": "900" },
    "500": { "hex": "#C6CED9", "rgb": [198, 206, 217], "darkModeEquivalent": "800" },
    "600": { "hex": "#A7B1BE", "rgb": [167, 177, 190], "darkModeEquivalent": "700" },
    "700": { "hex": "#8992A4", "rgb": [137, 146, 164], "darkModeEquivalent": "600" },
    "800": { "hex": "#687288", "rgb": [104, 114, 136], "darkModeEquivalent": "500" },
    "900": { "hex": "#575D71", "rgb": [87, 93, 113], "darkModeEquivalent": "400" },
    "1000": { "hex": "#3F4555", "rgb": [63, 69, 85], "darkModeEquivalent": "300" },
    "1100": { "hex": "#2C3344", "rgb": [44, 51, 68], "darkModeEquivalent": "200" },
    "1200": { "hex": "#141924", "rgb": [20, 25, 36], "darkModeEquivalent": "100" },
    "1300": {
      "hex": "#03020D",
      "rgb": [3, 2, 13],
      "keySwatch": true,
      "darkModeEquivalent": "000",
      "usage": "Primary black"
    }
  },

  "orange": {
    "_description": "Ably Orange — primary brand scale. Orange 600 is the signature brand colour.",
    "100": { "hex": "#FFF5F1", "rgb": [255, 245, 241], "darkModeEquivalent": "1100" },
    "200": { "hex": "#FFE3D8", "rgb": [255, 227, 216], "darkModeEquivalent": "1000" },
    "300": { "hex": "#FFC4AE", "rgb": [255, 196, 174], "darkModeEquivalent": "900" },
    "400": { "hex": "#FF9C79", "rgb": [255, 156, 121], "darkModeEquivalent": "800" },
    "500": { "hex": "#FF723F", "rgb": [255, 114, 63], "darkModeEquivalent": "700" },
    "600": {
      "hex": "#FF5416",
      "rgb": [255, 84, 22],
      "keySwatch": true,
      "darkModeEquivalent": "600",
      "usage": "Primary orange. Signature brand colour."
    },
    "700": { "hex": "#FF2739", "rgb": [255, 39, 57], "darkModeEquivalent": "500" },
    "800": { "hex": "#E40000", "rgb": [228, 0, 0], "darkModeEquivalent": "400" },
    "900": { "hex": "#B82202", "rgb": [184, 34, 2], "darkModeEquivalent": "300" },
    "1000": { "hex": "#751500", "rgb": [117, 21, 0], "darkModeEquivalent": "200" },
    "1100": { "hex": "#2A0B00", "rgb": [42, 11, 0], "darkModeEquivalent": "100" }
  },

  "secondary": {
    "yellow": {
      "_description": "Yellow secondary scale. Yellow 400 is the key swatch.",
      "100": { "hex": "#FFFBEF", "rgb": [255, 251, 239], "darkModeEquivalent": "900" },
      "200": { "hex": "#FFF0BA", "rgb": [255, 240, 186], "darkModeEquivalent": "800" },
      "300": { "hex": "#FFE27C", "rgb": [255, 226, 124], "darkModeEquivalent": "700" },
      "400": {
        "hex": "#FFD43D",
        "rgb": [255, 212, 61],
        "keySwatch": true,
        "darkModeEquivalent": "600"
      },
      "500": { "hex": "#F8C100", "rgb": [248, 193, 0], "darkModeEquivalent": "500" },
      "600": { "hex": "#E8A700", "rgb": [232, 167, 0], "darkModeEquivalent": "400" },
      "700": { "hex": "#AC8600", "rgb": [172, 134, 0], "darkModeEquivalent": "300" },
      "800": { "hex": "#654F00", "rgb": [101, 79, 0], "darkModeEquivalent": "200" },
      "900": { "hex": "#291C01", "rgb": [41, 28, 1], "darkModeEquivalent": "100" }
    },

    "green": {
      "_description": "Green secondary scale. Green 400 is the key swatch.",
      "100": { "hex": "#F1FFF1", "rgb": [241, 255, 241], "darkModeEquivalent": "900" },
      "200": { "hex": "#B8FFBB", "rgb": [184, 255, 187], "darkModeEquivalent": "800" },
      "300": { "hex": "#80FF85", "rgb": [128, 255, 133], "darkModeEquivalent": "700" },
      "400": {
        "hex": "#08FF13",
        "rgb": [8, 255, 19],
        "keySwatch": true,
        "darkModeEquivalent": "600"
      },
      "500": { "hex": "#00E80B", "rgb": [0, 232, 11], "darkModeEquivalent": "500" },
      "600": { "hex": "#00C008", "rgb": [0, 192, 8], "darkModeEquivalent": "400" },
      "700": { "hex": "#008E06", "rgb": [0, 142, 6], "darkModeEquivalent": "300" },
      "800": { "hex": "#005303", "rgb": [0, 83, 3], "darkModeEquivalent": "200" },
      "900": { "hex": "#002A02", "rgb": [0, 42, 2], "darkModeEquivalent": "100" }
    },

    "blue": {
      "_description": "Blue secondary scale. Blue 400 is the key swatch.",
      "100": { "hex": "#F1FBFF", "rgb": [241, 251, 255], "darkModeEquivalent": "900" },
      "200": { "hex": "#B8EAFF", "rgb": [184, 234, 255], "darkModeEquivalent": "800" },
      "300": { "hex": "#80D9FF", "rgb": [128, 217, 255], "darkModeEquivalent": "700" },
      "400": {
        "hex": "#4AD4FF",
        "rgb": [74, 212, 255],
        "keySwatch": true,
        "darkModeEquivalent": "600"
      },
      "500": { "hex": "#2CC0FF", "rgb": [44, 192, 255], "darkModeEquivalent": "500" },
      "600": { "hex": "#00A5EC", "rgb": [0, 165, 236], "darkModeEquivalent": "400" },
      "700": { "hex": "#0284CD", "rgb": [2, 132, 205], "darkModeEquivalent": "300" },
      "800": { "hex": "#004B75", "rgb": [0, 75, 117], "darkModeEquivalent": "200" },
      "900": { "hex": "#001B2A", "rgb": [0, 27, 42], "darkModeEquivalent": "100" }
    },

    "violet": {
      "_description": "Violet secondary scale. Violet 400 is the key swatch.",
      "100": { "hex": "#F7F2FE", "rgb": [247, 242, 254], "darkModeEquivalent": "900" },
      "200": { "hex": "#D8BCFB", "rgb": [216, 188, 251], "darkModeEquivalent": "800" },
      "300": { "hex": "#B986F8", "rgb": [185, 134, 248], "darkModeEquivalent": "700" },
      "400": {
        "hex": "#9951F5",
        "rgb": [153, 81, 245],
        "keySwatch": true,
        "darkModeEquivalent": "600"
      },
      "500": { "hex": "#7A1BF2", "rgb": [122, 27, 242], "darkModeEquivalent": "500" },
      "600": { "hex": "#5F0BC9", "rgb": [95, 11, 201], "darkModeEquivalent": "400" },
      "700": { "hex": "#460894", "rgb": [70, 8, 148], "darkModeEquivalent": "300" },
      "800": { "hex": "#2D055E", "rgb": [45, 5, 94], "darkModeEquivalent": "200" },
      "900": { "hex": "#130228", "rgb": [19, 2, 40], "darkModeEquivalent": "100" }
    },

    "pink": {
      "_description": "Pink secondary scale. Pink 500 is the key swatch.",
      "100": { "hex": "#FFF1FC", "rgb": [255, 241, 252], "darkModeEquivalent": "900" },
      "200": { "hex": "#FFB8F1", "rgb": [255, 184, 241], "darkModeEquivalent": "800" },
      "300": { "hex": "#FF80E6", "rgb": [255, 128, 230], "darkModeEquivalent": "700" },
      "400": { "hex": "#FF47DB", "rgb": [255, 71, 219], "darkModeEquivalent": "600" },
      "500": {
        "hex": "#FF17D2",
        "rgb": [255, 23, 210],
        "keySwatch": true,
        "darkModeEquivalent": "500"
      },
      "600": { "hex": "#D400AB", "rgb": [212, 0, 171], "darkModeEquivalent": "400" },
      "700": { "hex": "#9C007E", "rgb": [156, 0, 126], "darkModeEquivalent": "300" },
      "800": { "hex": "#630050", "rgb": [99, 0, 80], "darkModeEquivalent": "200" },
      "900": { "hex": "#2A0022", "rgb": [42, 0, 34], "darkModeEquivalent": "100" }
    }
  },

  "gui": {
    "_description": "Functional UI colours for interactive elements and system states.",
    "blue": {
      "default": {
        "light": "#006EDC",
        "dark": "#4DA6FF",
        "rgb_light": [0, 110, 220],
        "rgb_dark": [77, 166, 255],
        "usage": "Default interactive blue. Links, primary buttons."
      },
      "hover": {
        "light": "#0862B9",
        "dark": "#2894FF",
        "rgb_light": [8, 98, 185],
        "rgb_dark": [40, 148, 255],
        "usage": "Hover state for interactive blue elements."
      },
      "active": {
        "light": "#074095",
        "dark": "#0080FF",
        "rgb_light": [7, 64, 149],
        "rgb_dark": [0, 128, 255],
        "usage": "Active/pressed state for interactive blue elements."
      },
      "focus": {
        "light": "#80B9F2",
        "dark": "#80B9F2",
        "rgb_light": [128, 185, 242],
        "rgb_dark": [128, 185, 242],
        "usage": "Focus ring colour for keyboard navigation."
      }
    },
    "disabled": {
      "default": {
        "light": "#AFB9C5",
        "dark": "#676B7A",
        "rgb_light": [175, 185, 197],
        "rgb_dark": [103, 107, 122],
        "usage": "Disabled interactive elements."
      }
    },
    "status": {
      "success": {
        "light": "#11CB24",
        "dark": "#11CB24",
        "rgb_light": [17, 203, 36],
        "rgb_dark": [17, 203, 36],
        "usage": "Success states, confirmations, positive indicators."
      },
      "error": {
        "light": "#FB0C0C",
        "dark": "#FB0C0C",
        "rgb_light": [251, 12, 12],
        "rgb_dark": [251, 12, 12],
        "usage": "Error states, destructive actions, validation failures."
      }
    }
  },

  "gradients": {
    "_description": "Brand gradient to add depth and dimension to the visual language.",
    "activeOrange": {
      "name": "Active Orange",
      "type": "linear",
      "stops": ["#FF5416", "#FF2739"],
      "defaultDirection": "bottom-left to top-right",
      "directionNote": "Lightest at bottom-left, darkest at top-right by default. May be applied in any direction that suits the design.",
      "usage": "Primary brand gradient. Hero sections, feature highlights."
    }
  }
}