{
  "name": "withRemote colour tokens",
  "version": "1.0",
  "updated": "2026-08-05",
  "source": "https://withremote.ai/brand",
  "groups": [
    {
      "id": "core",
      "name": "Core",
      "description": "Ember is the only chromatic colour in the identity. It marks one thing per view — the slash in the logo, the active state, the single action we want taken. Ink and Paper carry everything else.",
      "colors": [
        {
          "name": "Ember",
          "token": "accent (dark)",
          "hex": "#FF6A3D",
          "rgb": "255, 106, 61",
          "usage": "Primary accent on dark surfaces. The logo slash, primary buttons, active nav, links.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 6.96
          }
        },
        {
          "name": "Ember Deep",
          "token": "accent (light)",
          "hex": "#E54A1F",
          "rgb": "229, 74, 31",
          "usage": "The same accent stepped down for light surfaces, where #FF6A3D fails contrast on white.",
          "contrastOn": {
            "background": "#FFFFFF",
            "ratio": 3.94
          }
        },
        {
          "name": "Ink",
          "token": "ink",
          "hex": "#0A0A0A",
          "rgb": "10, 10, 10",
          "usage": "Primary text on light surfaces. The dark-theme page background. Never pure #000.",
          "contrastOn": {
            "background": "#FAFAFA",
            "ratio": 18.97
          }
        },
        {
          "name": "Paper",
          "token": "paper",
          "hex": "#FAFAFA",
          "rgb": "250, 250, 250",
          "usage": "Primary text on dark surfaces. The light-theme page background. Never pure #FFF.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 18.97
          }
        }
      ]
    },
    {
      "id": "dark",
      "name": "Dark surfaces",
      "description": "The default theme. Four steps of near-black separate page, card, surface, and hairline.",
      "colors": [
        {
          "name": "Base",
          "token": "bg",
          "hex": "#0A0A0A",
          "rgb": "10, 10, 10",
          "usage": "Page background.",
          "contrastOn": {
            "background": "#FAFAFA",
            "ratio": 18.97
          }
        },
        {
          "name": "Raised",
          "token": "bg1",
          "hex": "#0E0E0E",
          "rgb": "14, 14, 14",
          "usage": "Cards sitting on the page.",
          "contrastOn": {
            "background": "#FAFAFA",
            "ratio": 18.5
          }
        },
        {
          "name": "Sunken",
          "token": "bg2",
          "hex": "#141414",
          "rgb": "20, 20, 20",
          "usage": "Inputs, wells, table headers.",
          "contrastOn": {
            "background": "#FAFAFA",
            "ratio": 17.65
          }
        },
        {
          "name": "Surface",
          "token": "surf",
          "hex": "#1A1A1A",
          "rgb": "26, 26, 26",
          "usage": "Chips, toggles, hover fills.",
          "contrastOn": {
            "background": "#FAFAFA",
            "ratio": 16.67
          }
        },
        {
          "name": "Hairline",
          "token": "line",
          "hex": "#1F1F1F",
          "rgb": "31, 31, 31",
          "usage": "1px borders and dividers.",
          "contrastOn": {
            "background": "#FAFAFA",
            "ratio": 15.79
          }
        },
        {
          "name": "Muted ink",
          "token": "ink3",
          "hex": "#A1A1A1",
          "rgb": "161, 161, 161",
          "usage": "Secondary copy on dark.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 7.66
          }
        }
      ]
    },
    {
      "id": "light",
      "name": "Light surfaces",
      "description": "The light theme mirrors the dark scale step for step, so any component can flip themes without a redesign.",
      "colors": [
        {
          "name": "Base",
          "token": "bg",
          "hex": "#FAFAFA",
          "rgb": "250, 250, 250",
          "usage": "Page background.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 18.97
          }
        },
        {
          "name": "Raised",
          "token": "bg1",
          "hex": "#FFFFFF",
          "rgb": "255, 255, 255",
          "usage": "Cards sitting on the page.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 19.8
          }
        },
        {
          "name": "Sunken",
          "token": "bg2",
          "hex": "#F4F4F4",
          "rgb": "244, 244, 244",
          "usage": "Inputs, wells, table headers.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 18
          }
        },
        {
          "name": "Surface",
          "token": "surf",
          "hex": "#EDEDED",
          "rgb": "237, 237, 237",
          "usage": "Chips, toggles, hover fills.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 16.91
          }
        },
        {
          "name": "Hairline",
          "token": "line",
          "hex": "#E8E8E8",
          "rgb": "232, 232, 232",
          "usage": "1px borders and dividers.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 16.16
          }
        },
        {
          "name": "Muted ink",
          "token": "ink3",
          "hex": "#525252",
          "rgb": "82, 82, 82",
          "usage": "Secondary copy on light.",
          "contrastOn": {
            "background": "#FFFFFF",
            "ratio": 7.81
          }
        }
      ]
    },
    {
      "id": "signal",
      "name": "Signal",
      "description": "Status only — availability dots, success states, warnings. Signal colours never carry brand meaning and never appear in marketing layouts.",
      "colors": [
        {
          "name": "Live",
          "token": "good (dark)",
          "hex": "#34D399",
          "rgb": "52, 211, 153",
          "usage": "Success, availability, positive delta.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 10.3
          }
        },
        {
          "name": "Live Deep",
          "token": "good (light)",
          "hex": "#059669",
          "rgb": "5, 150, 105",
          "usage": "The same signal on light surfaces.",
          "contrastOn": {
            "background": "#FFFFFF",
            "ratio": 3.77
          }
        },
        {
          "name": "Attention",
          "token": "warn (dark)",
          "hex": "#F59E0B",
          "rgb": "245, 158, 11",
          "usage": "Warnings and pending states.",
          "contrastOn": {
            "background": "#0A0A0A",
            "ratio": 9.22
          }
        },
        {
          "name": "Attention Deep",
          "token": "warn (light)",
          "hex": "#D97706",
          "rgb": "217, 119, 6",
          "usage": "The same warning on light surfaces.",
          "contrastOn": {
            "background": "#FFFFFF",
            "ratio": 3.19
          }
        }
      ]
    }
  ]
}