{
  "name": "TopX Terminal",
  "version": 3,
  "meta": {
    "source": "local",
    "repo": "top-x",
    "synced": "2026-10-05",
    "note": "TopX Terminal, final: neutral grey grounds, the main colour taken from the blue of the TopX mark, in a light and a dark theme."
  },
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "bg",
        "value": {
          "light": "#f5f6f8",
          "dark": "#0e1116"
        },
        "usage": "Page ground, a cool neutral grey."
      },
      {
        "name": "panel",
        "value": {
          "light": "#ffffff",
          "dark": "#151a21"
        },
        "usage": "Ground of panels, chart areas, tables and the top bar."
      },
      {
        "name": "panel-2",
        "value": {
          "light": "#f2f4f7",
          "dark": "#1b212a"
        },
        "usage": "Secondary ground: toolbars, table headers, summary bars, expanded rows."
      },
      {
        "name": "status-bg",
        "value": {
          "light": "#eef1f5",
          "dark": "#181e26"
        },
        "usage": "Ground of the full-width status bar, a little darker than panel-2 to set the global apart from the local."
      },
      {
        "name": "head-bg",
        "value": "{panel-2}",
        "usage": "Table header ground, equal to panel-2."
      },
      {
        "name": "zebra",
        "value": {
          "light": "#fafbfc",
          "dark": "#12171d"
        },
        "usage": "Ground of even table rows, only slightly darker than panel."
      },
      {
        "name": "hover",
        "value": {
          "light": "#edf3fc",
          "dark": "#1c2635"
        },
        "usage": "Hover ground for rows and navigation. The only ground with a blue cast, a hint that something can be clicked."
      },
      {
        "name": "line",
        "value": {
          "light": "#dce1e8",
          "dark": "#2a323d"
        },
        "usage": "Panel borders, section dividers, the line under table headers."
      },
      {
        "name": "line-soft",
        "value": {
          "light": "#eceff3",
          "dark": "#1f262f"
        },
        "usage": "Hairlines between cells and between KPI cells."
      },
      {
        "name": "control-border",
        "value": {
          "light": "#7f8a9a",
          "dark": "#657184"
        },
        "usage": "1px border of buttons, inputs and segmented controls; at least 3:1 against panel and panel-2."
      },
      {
        "name": "fg",
        "value": {
          "light": "#141b26",
          "dark": "#e6eaf0"
        },
        "usage": "Body text, numbers and section titles; readable on every ground."
      },
      {
        "name": "dim",
        "value": {
          "light": "#4a5567",
          "dark": "#a7b0bd"
        },
        "usage": "Secondary text: labels, units, one-line summaries; readable on bg, panel, panel-2 and status-bg."
      },
      {
        "name": "faint",
        "value": {
          "light": "#5c6779",
          "dark": "#8d97a5"
        },
        "usage": "The faintest level: timestamps and observation times; readable on bg, panel and panel-2. Not for explanations people need to read."
      },
      {
        "name": "head-ink",
        "value": {
          "light": "#313b4a",
          "dark": "#c7ced8"
        },
        "usage": "Table header text, readable on head-bg."
      },
      {
        "name": "heading",
        "value": "{fg}",
        "usage": "Section title colour, equal to fg; titles stand out by size and weight, never by blue."
      },
      {
        "name": "blue",
        "value": {
          "light": "#2558ef",
          "dark": "#6b93ff"
        },
        "usage": "The only main colour, the blue of the TopX mark. For the current top-level navigation item, primary buttons, links, the focus ring and the wordmark."
      },
      {
        "name": "on-blue",
        "value": {
          "light": "#ffffff",
          "dark": "#06121f"
        },
        "usage": "Text on solid blue. In the dark theme blue gets lighter and the text darker."
      },
      {
        "name": "blue-hover",
        "value": {
          "light": "#1c47d4",
          "dark": "#8aaaff"
        },
        "usage": "Hover colour of solid blue elements."
      },
      {
        "name": "accent-soft",
        "value": {
          "light": "#e8eefd",
          "dark": "#1b2a4d"
        },
        "usage": "Selected ground of segmented controls, sub-tabs and detail navigation; its text uses accent-ink."
      },
      {
        "name": "accent-ink",
        "value": {
          "light": "#1d47cf",
          "dark": "#a9c0ff"
        },
        "usage": "Selected text on accent-soft; ghost button text."
      },
      {
        "name": "focus",
        "value": "{blue}",
        "usage": "Keyboard focus ring: 2px solid, offset 1px."
      },
      {
        "name": "green",
        "value": {
          "light": "#007c54",
          "dark": "#45d39a"
        },
        "usage": "Text colour for profit and positive returns; always with a + sign."
      },
      {
        "name": "red",
        "value": {
          "light": "#d32146",
          "dark": "#ff7088"
        },
        "usage": "Text colour for losses, negative returns and errors; always with a − sign or a word."
      },
      {
        "name": "amber",
        "value": {
          "light": "#a14a00",
          "dark": "#f2a650"
        },
        "usage": "Text colour for delayed, partial and unverified data."
      },
      {
        "name": "green-soft",
        "value": {
          "light": "#ebf7f1",
          "dark": "#0f2a20"
        },
        "usage": "Ground of the Normal badge."
      },
      {
        "name": "green-ink",
        "value": {
          "light": "#00633c",
          "dark": "#6fe0b0"
        },
        "usage": "Text and border on green-soft."
      },
      {
        "name": "red-soft",
        "value": {
          "light": "#fdeef1",
          "dark": "#361820"
        },
        "usage": "Real-money risk: ground of alert banners, the Live badge and alert KPI cells."
      },
      {
        "name": "red-ink",
        "value": {
          "light": "#a61934",
          "dark": "#ff9aac"
        },
        "usage": "Text on red-soft."
      },
      {
        "name": "amber-soft",
        "value": {
          "light": "#fdf4e3",
          "dark": "#2f230f"
        },
        "usage": "Ground of warning badges and the data-delay banner."
      },
      {
        "name": "amber-ink",
        "value": {
          "light": "#7a4c00",
          "dark": "#f6c27a"
        },
        "usage": "Text on amber-soft."
      },
      {
        "name": "series-1",
        "value": {
          "light": "#2558ef",
          "dark": "#6b93ff"
        },
        "usage": "Chart series 1 (blue, the same value as the main colour). Assigned by object ID and the same on every page."
      },
      {
        "name": "series-2",
        "value": {
          "light": "#cc4d00",
          "dark": "#ff8a3d"
        },
        "usage": "Chart series 2 (orange)."
      },
      {
        "name": "series-3",
        "value": {
          "light": "#00865c",
          "dark": "#34c98f"
        },
        "usage": "Chart series 3 (green)."
      },
      {
        "name": "series-4",
        "value": {
          "light": "#7c30db",
          "dark": "#b385ff"
        },
        "usage": "Chart series 4 (purple)."
      },
      {
        "name": "series-5",
        "value": {
          "light": "#db2164",
          "dark": "#ff6b9a"
        },
        "usage": "Chart series 5 (rose)."
      },
      {
        "name": "series-6",
        "value": {
          "light": "#8a6100",
          "dark": "#d9a82e"
        },
        "usage": "Chart series 6 (ochre)."
      },
      {
        "name": "series-7",
        "value": {
          "light": "#007f99",
          "dark": "#3cc4dd"
        },
        "usage": "Chart series 7 (cyan)."
      },
      {
        "name": "series-8",
        "value": {
          "light": "#713a25",
          "dark": "#d0957a"
        },
        "usage": "Chart series 8 (brown). Past eight objects, split into groups instead of adding colours."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "sans": "Inter, \"Helvetica Neue\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
      "mono": "\"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace"
    },
    "groups": [
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          {
            "name": "body",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 400,
            "sample": "Net profit includes unrealised PnL and costs charged",
            "usage": "Default text: tables, controls, explanations."
          },
          {
            "name": "body-strong",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 600,
            "sample": "HL account comparison",
            "usage": "Buttons, navigation, object names in the first table column."
          },
          {
            "name": "title",
            "fontSize": "13px",
            "lineHeight": "18px",
            "fontWeight": 650,
            "sample": "Account metrics matrix",
            "usage": "Section titles in heading (= fg), one step larger than body text."
          },
          {
            "name": "page-title",
            "fontSize": "15px",
            "lineHeight": "20px",
            "fontWeight": 650,
            "sample": "Four-way net profit",
            "usage": "Once per workspace: the name of the current view."
          }
        ]
      },
      {
        "name": "Numbers",
        "family": "mono",
        "styles": [
          {
            "name": "num",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 400,
            "sample": "$48,110.25",
            "usage": "Numbers in tables: monospace with tabular-nums, right-aligned."
          },
          {
            "name": "num-key",
            "fontSize": "14px",
            "lineHeight": "18px",
            "fontWeight": 650,
            "sample": "+$118.60",
            "usage": "Legend values and KPI values. Always larger than their labels."
          },
          {
            "name": "num-hero",
            "fontSize": "20px",
            "lineHeight": "24px",
            "fontWeight": 650,
            "sample": "−$10,180.55",
            "usage": "At most once per screen: the number that most needs to be seen (such as exchange equity or net profit for the period)."
          },
          {
            "name": "unit",
            "fontSize": "11px",
            "lineHeight": "14px",
            "fontWeight": 400,
            "letterSpacing": "0.04em",
            "sample": "USD / NET PROFIT",
            "usage": "Chart unit labels, for Latin letters and digits only; Chinese text is never below 12px."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "control-height",
        "value": "24px",
        "usage": "Height of every button, input, select and tab, the same at every width."
      },
      {
        "name": "control-x",
        "value": "5px",
        "usage": "Side padding of controls."
      },
      {
        "name": "cell-y",
        "value": "2px",
        "usage": "Top and bottom padding of table cells."
      },
      {
        "name": "cell-x",
        "value": "5px",
        "usage": "Side padding of table cells."
      },
      {
        "name": "surface-gap",
        "value": "3px",
        "usage": "Gap between panels."
      },
      {
        "name": "group-gap",
        "value": "8px",
        "usage": "Distance between control groups in a toolbar, so each group reads as one at a glance."
      },
      {
        "name": "block-pad",
        "value": "5px",
        "usage": "Side padding of section title rows and chart headers."
      },
      {
        "name": "topbar-height",
        "value": "30px",
        "usage": "Desktop top bar height; below 800px it becomes two rows, 56px."
      },
      {
        "name": "chart-main",
        "value": "280px",
        "usage": "Height of the main chart canvas."
      },
      {
        "name": "chart-mini",
        "value": "160px",
        "usage": "Height of the small side-by-side charts."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-xs",
        "value": "1px",
        "usage": "Top-level navigation items."
      },
      {
        "name": "radius-sm",
        "value": "2px",
        "usage": "Buttons, inputs, badges, panels. The default corner."
      },
      {
        "name": "radius-md",
        "value": "4px",
        "usage": "Popovers and the enlarged chart dialog. Never panels."
      }
    ]
  },
  "shadow": {
    "note": "The terminal uses no shadows; layers separate by 1px lines and grounds.",
    "tokens": [
      {
        "name": "shadow-none",
        "value": "none",
        "usage": "All panels and cards."
      }
    ]
  }
}