{
  "$description": "DIXI design system tokens v1.2 (5 Nov 2026), W3C Design Tokens Community Group format. Sets: primitive, theme.light, theme.dark, component.",
  "primitive": {
    "color": {
      "gray": {
        "0": {
          "$type": "color",
          "$value": "#FFFFFF",
          "$description": "White"
        },
        "50": {
          "$type": "color",
          "$value": "#F6F6F7",
          "$description": "Mist"
        },
        "100": {
          "$type": "color",
          "$value": "#ECECEE",
          "$description": "Line"
        },
        "200": {
          "$type": "color",
          "$value": "#DCDCE0"
        },
        "300": {
          "$type": "color",
          "$value": "#CDCFD6"
        },
        "400": {
          "$type": "color",
          "$value": "#9C9EA6"
        },
        "500": {
          "$type": "color",
          "$value": "#7E8088"
        },
        "600": {
          "$type": "color",
          "$value": "#62646A",
          "$description": "Graphite"
        },
        "700": {
          "$type": "color",
          "$value": "#3A3B41"
        },
        "800": {
          "$type": "color",
          "$value": "#24242B"
        },
        "850": {
          "$type": "color",
          "$value": "#1A1A20"
        },
        "900": {
          "$type": "color",
          "$value": "#111113",
          "$description": "Ink"
        },
        "950": {
          "$type": "color",
          "$value": "#08080A",
          "$description": "Night"
        }
      },
      "blue": {
        "50": {
          "$type": "color",
          "$value": "#F3F5FF"
        },
        "100": {
          "$type": "color",
          "$value": "#D7DEFF"
        },
        "200": {
          "$type": "color",
          "$value": "#B3C0FF"
        },
        "300": {
          "$type": "color",
          "$value": "#8C9CFF"
        },
        "400": {
          "$type": "color",
          "$value": "#7088FF"
        },
        "500": {
          "$type": "color",
          "$value": "#4461F0",
          "$description": "DIXI Blue"
        },
        "600": {
          "$type": "color",
          "$value": "#364DCC"
        },
        "700": {
          "$type": "color",
          "$value": "#2A3EAD"
        },
        "800": {
          "$type": "color",
          "$value": "#203090"
        },
        "900": {
          "$type": "color",
          "$value": "#162374"
        },
        "950": {
          "$type": "color",
          "$value": "#0F195C"
        }
      },
      "sky": {
        "50": {
          "$type": "color",
          "$value": "#EDF8FF"
        },
        "100": {
          "$type": "color",
          "$value": "#E1F2FF"
        },
        "200": {
          "$type": "color",
          "$value": "#C7E8FF"
        },
        "300": {
          "$type": "color",
          "$value": "#A3DAFF"
        },
        "400": {
          "$type": "color",
          "$value": "#6CC7FF"
        },
        "500": {
          "$type": "color",
          "$value": "#12B2FD",
          "$description": "Sky"
        },
        "600": {
          "$type": "color",
          "$value": "#0090CE"
        },
        "700": {
          "$type": "color",
          "$value": "#0072A5"
        },
        "800": {
          "$type": "color",
          "$value": "#00577F"
        },
        "900": {
          "$type": "color",
          "$value": "#003D5B"
        },
        "950": {
          "$type": "color",
          "$value": "#00273D"
        }
      },
      "violet": {
        "50": {
          "$type": "color",
          "$value": "#F7F4FF"
        },
        "100": {
          "$type": "color",
          "$value": "#EAE2FF"
        },
        "200": {
          "$type": "color",
          "$value": "#D8C9FF"
        },
        "300": {
          "$type": "color",
          "$value": "#C3A9FF"
        },
        "400": {
          "$type": "color",
          "$value": "#9E7DF0"
        },
        "500": {
          "$type": "color",
          "$value": "#7A4FE0"
        },
        "600": {
          "$type": "color",
          "$value": "#653DBE"
        },
        "700": {
          "$type": "color",
          "$value": "#5330A1"
        },
        "800": {
          "$type": "color",
          "$value": "#432486"
        },
        "900": {
          "$type": "color",
          "$value": "#34196B"
        },
        "950": {
          "$type": "color",
          "$value": "#281155"
        }
      },
      "green": {
        "50": {
          "$type": "color",
          "$value": "#EEF9F0"
        },
        "100": {
          "$type": "color",
          "$value": "#CCF2D4"
        },
        "200": {
          "$type": "color",
          "$value": "#A1E3B2"
        },
        "300": {
          "$type": "color",
          "$value": "#6FD08C"
        },
        "400": {
          "$type": "color",
          "$value": "#52C274"
        },
        "500": {
          "$type": "color",
          "$value": "#2FB45A"
        },
        "600": {
          "$type": "color",
          "$value": "#279549"
        },
        "700": {
          "$type": "color",
          "$value": "#237A3B"
        },
        "800": {
          "$type": "color",
          "$value": "#165E2B"
        },
        "900": {
          "$type": "color",
          "$value": "#09431B"
        },
        "950": {
          "$type": "color",
          "$value": "#032D0F"
        }
      },
      "amber": {
        "50": {
          "$type": "color",
          "$value": "#FBF5E8"
        },
        "100": {
          "$type": "color",
          "$value": "#FEEABF"
        },
        "200": {
          "$type": "color",
          "$value": "#F9D78C"
        },
        "300": {
          "$type": "color",
          "$value": "#F0C04A"
        },
        "400": {
          "$type": "color",
          "$value": "#E8B130"
        },
        "500": {
          "$type": "color",
          "$value": "#E0A100"
        },
        "600": {
          "$type": "color",
          "$value": "#BB8200"
        },
        "700": {
          "$type": "color",
          "$value": "#9A6700"
        },
        "800": {
          "$type": "color",
          "$value": "#754D00"
        },
        "900": {
          "$type": "color",
          "$value": "#513400"
        },
        "950": {
          "$type": "color",
          "$value": "#331F00"
        }
      },
      "red": {
        "50": {
          "$type": "color",
          "$value": "#FFF2F1"
        },
        "100": {
          "$type": "color",
          "$value": "#FFDAD6"
        },
        "200": {
          "$type": "color",
          "$value": "#FFB7AF"
        },
        "300": {
          "$type": "color",
          "$value": "#FF8A80"
        },
        "400": {
          "$type": "color",
          "$value": "#F36B66"
        },
        "500": {
          "$type": "color",
          "$value": "#E5484D"
        },
        "600": {
          "$type": "color",
          "$value": "#CB3432"
        },
        "700": {
          "$type": "color",
          "$value": "#B42318"
        },
        "800": {
          "$type": "color",
          "$value": "#8E160E"
        },
        "900": {
          "$type": "color",
          "$value": "#690A05"
        },
        "950": {
          "$type": "color",
          "$value": "#490402"
        }
      }
    },
    "space": {
      "2": {
        "$type": "dimension",
        "$value": "2px"
      },
      "4": {
        "$type": "dimension",
        "$value": "4px"
      },
      "6": {
        "$type": "dimension",
        "$value": "6px"
      },
      "8": {
        "$type": "dimension",
        "$value": "8px"
      },
      "10": {
        "$type": "dimension",
        "$value": "10px"
      },
      "12": {
        "$type": "dimension",
        "$value": "12px"
      },
      "16": {
        "$type": "dimension",
        "$value": "16px"
      },
      "20": {
        "$type": "dimension",
        "$value": "20px"
      },
      "24": {
        "$type": "dimension",
        "$value": "24px"
      },
      "28": {
        "$type": "dimension",
        "$value": "28px"
      },
      "32": {
        "$type": "dimension",
        "$value": "32px"
      },
      "40": {
        "$type": "dimension",
        "$value": "40px"
      },
      "48": {
        "$type": "dimension",
        "$value": "48px"
      },
      "64": {
        "$type": "dimension",
        "$value": "64px"
      }
    },
    "font": {
      "family": {
        "sans": {
          "$type": "fontFamily",
          "$value": [
            "Geist",
            "system-ui",
            "-apple-system",
            "Segoe UI",
            "sans-serif"
          ]
        },
        "mono": {
          "$type": "fontFamily",
          "$value": [
            "Geist Mono",
            "ui-monospace",
            "SF Mono",
            "Menlo",
            "monospace"
          ]
        }
      },
      "weight": {
        "regular": {
          "$type": "fontWeight",
          "$value": 400
        },
        "medium": {
          "$type": "fontWeight",
          "$value": 500
        },
        "semibold": {
          "$type": "fontWeight",
          "$value": 600
        },
        "bold": {
          "$type": "fontWeight",
          "$value": 700
        }
      }
    }
  },
  "theme": {
    "light": {
      "color": {
        "bg": {
          "canvas": {
            "$type": "color",
            "$value": "{primitive.color.gray.0}",
            "$description": "The page behind everything"
          },
          "surface": {
            "$type": "color",
            "$value": "{primitive.color.gray.50}",
            "$description": "Cards, sidebar, grouped content"
          },
          "raised": {
            "$type": "color",
            "$value": "{primitive.color.gray.0}",
            "$description": "Fields, popovers, the selected item"
          },
          "sunken": {
            "$type": "color",
            "$value": "{primitive.color.gray.100}",
            "$description": "Hover fills, tracks, neutral badges"
          },
          "inverse": {
            "$type": "color",
            "$value": "{primitive.color.gray.900}",
            "$description": "Tooltips and the primary button"
          },
          "hero": {
            "$type": "color",
            "$value": "{primitive.color.gray.950}",
            "$description": "Dark hero panels in both themes"
          }
        },
        "border": {
          "subtle": {
            "$type": "color",
            "$value": "{primitive.color.gray.100}",
            "$description": "Dividers and hairlines inside cards"
          },
          "default": {
            "$type": "color",
            "$value": "{primitive.color.gray.200}",
            "$description": "Fields, outline buttons, chips"
          },
          "strong": {
            "$type": "color",
            "$value": "{primitive.color.gray.900}",
            "$description": "Hover outline on fields and buttons"
          },
          "focus": {
            "$type": "color",
            "$value": "{primitive.color.sky.500}",
            "$description": "Focus ring, always 2 px with 2 px offset"
          }
        },
        "text": {
          "primary": {
            "$type": "color",
            "$value": "{primitive.color.gray.900}",
            "$description": "Headings, values, body copy"
          },
          "secondary": {
            "$type": "color",
            "$value": "{primitive.color.gray.700}",
            "$description": "Nav labels, table cells, long reads"
          },
          "tertiary": {
            "$type": "color",
            "$value": "{primitive.color.gray.600}",
            "$description": "Descriptions, meta, placeholders"
          },
          "disabled": {
            "$type": "color",
            "$value": "{primitive.color.gray.400}",
            "$description": "Disabled labels; no contrast minimum"
          },
          "inverse": {
            "$type": "color",
            "$value": "{primitive.color.gray.0}",
            "$description": "Text on bg.inverse"
          },
          "on-accent": {
            "$type": "color",
            "$value": "{primitive.color.gray.0}",
            "$description": "Text on accent.solid"
          }
        },
        "accent": {
          "default": {
            "$type": "color",
            "$value": "{primitive.color.blue.600}",
            "$description": "Links, active icons, accent text"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.blue.500}",
            "$description": "Selected days, filled accents"
          },
          "solid-hover": {
            "$type": "color",
            "$value": "{primitive.color.blue.600}",
            "$description": "Hover on filled accents"
          },
          "subtle": {
            "$type": "color",
            "$value": "#4461F01A",
            "$description": "Tinted accent backgrounds"
          },
          "gradient": {
            "$type": "gradient",
            "$value": [
              {
                "color": "{primitive.color.sky.500}",
                "position": 0
              },
              {
                "color": "{primitive.color.blue.500}",
                "position": 1
              }
            ],
            "$description": "135 degrees"
          }
        },
        "action": {
          "primary": {
            "bg": {
              "$type": "color",
              "$value": "{primitive.color.gray.900}",
              "$description": "Primary button fill"
            },
            "bg-hover": {
              "$type": "color",
              "$value": "{primitive.color.blue.600}",
              "$description": "Primary button on hover: ink turns blue"
            },
            "fg": {
              "$type": "color",
              "$value": "{primitive.color.gray.0}",
              "$description": "Primary button label"
            }
          }
        },
        "success": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.green.700}",
            "$description": "Success text and icons"
          },
          "bg": {
            "$type": "color",
            "$value": "#2FB45A1A",
            "$description": "Success badge and alert fill"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.green.500}",
            "$description": "Live dots, good meter range"
          }
        },
        "warning": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.amber.800}",
            "$description": "Warning text and icons"
          },
          "bg": {
            "$type": "color",
            "$value": "#E0A10024",
            "$description": "Warning badge and alert fill"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.amber.500}",
            "$description": "Needs-work meter range"
          }
        },
        "danger": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.red.700}",
            "$description": "Errors, destructive actions"
          },
          "bg": {
            "$type": "color",
            "$value": "#B4231814",
            "$description": "Error badge and alert fill"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.red.500}",
            "$description": "Poor meter range, destructive fill"
          }
        },
        "info": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.blue.600}",
            "$description": "Informational text"
          },
          "bg": {
            "$type": "color",
            "$value": "#4461F01A",
            "$description": "Informational fill"
          }
        },
        "data": {
          "1": {
            "$type": "color",
            "$value": "{primitive.color.blue.500}",
            "$description": "First series, the main line"
          },
          "2": {
            "$type": "color",
            "$value": "{primitive.color.sky.500}",
            "$description": "Second series"
          },
          "3": {
            "$type": "color",
            "$value": "{primitive.color.violet.500}",
            "$description": "Third series"
          },
          "4": {
            "$type": "color",
            "$value": "{primitive.color.amber.500}",
            "$description": "Fourth series"
          },
          "5": {
            "$type": "color",
            "$value": "{primitive.color.green.500}",
            "$description": "Fifth series"
          },
          "grid": {
            "$type": "color",
            "$value": "{primitive.color.gray.100}",
            "$description": "Chart gridlines"
          }
        }
      },
      "shadow": {
        "none": {
          "$type": "shadow",
          "$value": [],
          "$description": "Cards sit on tint, not shadow"
        },
        "ring": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#ECECEE",
              "offsetX": "0px",
              "offsetY": "0px",
              "blur": "0px",
              "spread": "1px",
              "inset": true
            }
          ],
          "$description": "Raised items inside a surface"
        },
        "raised": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#1111130D",
              "offsetX": "0px",
              "offsetY": "1px",
              "blur": "2px",
              "spread": "0px",
              "inset": false
            },
            {
              "color": "#11111338",
              "offsetX": "0px",
              "offsetY": "12px",
              "blur": "32px",
              "spread": "-18px",
              "inset": false
            }
          ],
          "$description": "Sticky bars, hovered cards"
        },
        "overlay": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#DCDCE0",
              "offsetX": "0px",
              "offsetY": "0px",
              "blur": "0px",
              "spread": "1px",
              "inset": false
            },
            {
              "color": "#11111359",
              "offsetX": "0px",
              "offsetY": "24px",
              "blur": "60px",
              "spread": "-20px",
              "inset": false
            },
            {
              "color": "#11111333",
              "offsetX": "0px",
              "offsetY": "8px",
              "blur": "20px",
              "spread": "-12px",
              "inset": false
            }
          ],
          "$description": "Menus, popovers, date picker"
        },
        "modal": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#1111130F",
              "offsetX": "0px",
              "offsetY": "0px",
              "blur": "0px",
              "spread": "1px",
              "inset": false
            },
            {
              "color": "#11111373",
              "offsetX": "0px",
              "offsetY": "40px",
              "blur": "80px",
              "spread": "-24px",
              "inset": false
            }
          ],
          "$description": "Dialogs and toasts"
        }
      }
    },
    "dark": {
      "color": {
        "bg": {
          "canvas": {
            "$type": "color",
            "$value": "{primitive.color.gray.950}",
            "$description": "The page behind everything"
          },
          "surface": {
            "$type": "color",
            "$value": "{primitive.color.gray.900}",
            "$description": "Cards, sidebar, grouped content"
          },
          "raised": {
            "$type": "color",
            "$value": "{primitive.color.gray.850}",
            "$description": "Fields, popovers, the selected item"
          },
          "sunken": {
            "$type": "color",
            "$value": "{primitive.color.gray.800}",
            "$description": "Hover fills, tracks, neutral badges"
          },
          "inverse": {
            "$type": "color",
            "$value": "{primitive.color.gray.50}",
            "$description": "Tooltips and the primary button"
          },
          "hero": {
            "$type": "color",
            "$value": "{primitive.color.gray.950}",
            "$description": "Dark hero panels in both themes"
          }
        },
        "border": {
          "subtle": {
            "$type": "color",
            "$value": "#FFFFFF14",
            "$description": "Dividers and hairlines inside cards"
          },
          "default": {
            "$type": "color",
            "$value": "#FFFFFF29",
            "$description": "Fields, outline buttons, chips"
          },
          "strong": {
            "$type": "color",
            "$value": "{primitive.color.gray.50}",
            "$description": "Hover outline on fields and buttons"
          },
          "focus": {
            "$type": "color",
            "$value": "{primitive.color.sky.500}",
            "$description": "Focus ring, always 2 px with 2 px offset"
          }
        },
        "text": {
          "primary": {
            "$type": "color",
            "$value": "{primitive.color.gray.50}",
            "$description": "Headings, values, body copy"
          },
          "secondary": {
            "$type": "color",
            "$value": "{primitive.color.gray.300}",
            "$description": "Nav labels, table cells, long reads"
          },
          "tertiary": {
            "$type": "color",
            "$value": "{primitive.color.gray.400}",
            "$description": "Descriptions, meta, placeholders"
          },
          "disabled": {
            "$type": "color",
            "$value": "{primitive.color.gray.600}",
            "$description": "Disabled labels; no contrast minimum"
          },
          "inverse": {
            "$type": "color",
            "$value": "{primitive.color.gray.900}",
            "$description": "Text on bg.inverse"
          },
          "on-accent": {
            "$type": "color",
            "$value": "{primitive.color.gray.950}",
            "$description": "Text on accent.solid"
          }
        },
        "accent": {
          "default": {
            "$type": "color",
            "$value": "{primitive.color.blue.300}",
            "$description": "Links, active icons, accent text"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.blue.300}",
            "$description": "Selected days, filled accents"
          },
          "solid-hover": {
            "$type": "color",
            "$value": "{primitive.color.blue.200}",
            "$description": "Hover on filled accents"
          },
          "subtle": {
            "$type": "color",
            "$value": "#7088FF24",
            "$description": "Tinted accent backgrounds"
          },
          "gradient": {
            "$type": "gradient",
            "$value": [
              {
                "color": "{primitive.color.sky.500}",
                "position": 0
              },
              {
                "color": "{primitive.color.blue.500}",
                "position": 1
              }
            ],
            "$description": "135 degrees"
          }
        },
        "action": {
          "primary": {
            "bg": {
              "$type": "color",
              "$value": "{primitive.color.gray.50}",
              "$description": "Primary button fill"
            },
            "bg-hover": {
              "$type": "color",
              "$value": "{primitive.color.blue.600}",
              "$description": "Primary button on hover: ink turns blue"
            },
            "fg": {
              "$type": "color",
              "$value": "{primitive.color.gray.950}",
              "$description": "Primary button label"
            }
          }
        },
        "success": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.green.300}",
            "$description": "Success text and icons"
          },
          "bg": {
            "$type": "color",
            "$value": "#6FD08C1F",
            "$description": "Success badge and alert fill"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.green.500}",
            "$description": "Live dots, good meter range"
          }
        },
        "warning": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.amber.300}",
            "$description": "Warning text and icons"
          },
          "bg": {
            "$type": "color",
            "$value": "#F0C04A24",
            "$description": "Warning badge and alert fill"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.amber.500}",
            "$description": "Needs-work meter range"
          }
        },
        "danger": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.red.300}",
            "$description": "Errors, destructive actions"
          },
          "bg": {
            "$type": "color",
            "$value": "#FF8A801A",
            "$description": "Error badge and alert fill"
          },
          "solid": {
            "$type": "color",
            "$value": "{primitive.color.red.500}",
            "$description": "Poor meter range, destructive fill"
          }
        },
        "info": {
          "fg": {
            "$type": "color",
            "$value": "{primitive.color.blue.300}",
            "$description": "Informational text"
          },
          "bg": {
            "$type": "color",
            "$value": "#7088FF24",
            "$description": "Informational fill"
          }
        },
        "data": {
          "1": {
            "$type": "color",
            "$value": "{primitive.color.blue.400}",
            "$description": "First series, the main line"
          },
          "2": {
            "$type": "color",
            "$value": "{primitive.color.sky.400}",
            "$description": "Second series"
          },
          "3": {
            "$type": "color",
            "$value": "{primitive.color.violet.300}",
            "$description": "Third series"
          },
          "4": {
            "$type": "color",
            "$value": "{primitive.color.amber.300}",
            "$description": "Fourth series"
          },
          "5": {
            "$type": "color",
            "$value": "{primitive.color.green.300}",
            "$description": "Fifth series"
          },
          "grid": {
            "$type": "color",
            "$value": "{primitive.color.gray.850}",
            "$description": "Chart gridlines"
          }
        }
      },
      "shadow": {
        "none": {
          "$type": "shadow",
          "$value": [],
          "$description": "Cards sit on tint, not shadow"
        },
        "ring": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#FFFFFF14",
              "offsetX": "0px",
              "offsetY": "0px",
              "blur": "0px",
              "spread": "1px",
              "inset": true
            }
          ],
          "$description": "Raised items inside a surface"
        },
        "raised": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#FFFFFF0F",
              "offsetX": "0px",
              "offsetY": "0px",
              "blur": "0px",
              "spread": "1px",
              "inset": false
            },
            {
              "color": "#000000E6",
              "offsetX": "0px",
              "offsetY": "18px",
              "blur": "40px",
              "spread": "-20px",
              "inset": false
            }
          ],
          "$description": "Sticky bars, hovered cards"
        },
        "overlay": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#FFFFFF29",
              "offsetX": "0px",
              "offsetY": "0px",
              "blur": "0px",
              "spread": "1px",
              "inset": false
            },
            {
              "color": "#000000BF",
              "offsetX": "0px",
              "offsetY": "24px",
              "blur": "60px",
              "spread": "-20px",
              "inset": false
            }
          ],
          "$description": "Menus, popovers, date picker"
        },
        "modal": {
          "$type": "shadow",
          "$value": [
            {
              "color": "#FFFFFF1A",
              "offsetX": "0px",
              "offsetY": "0px",
              "blur": "0px",
              "spread": "1px",
              "inset": false
            },
            {
              "color": "#000000E6",
              "offsetX": "0px",
              "offsetY": "40px",
              "blur": "80px",
              "spread": "-24px",
              "inset": false
            }
          ],
          "$description": "Dialogs and toasts"
        }
      }
    }
  },
  "component": {
    "button": {
      "height": {
        "sm": {
          "$type": "dimension",
          "$value": "36px",
          "$description": "Small button and icon button"
        },
        "md": {
          "$type": "dimension",
          "$value": "42px",
          "$description": "Default button"
        },
        "lg": {
          "$type": "dimension",
          "$value": "50px",
          "$description": "Large button, sign-in forms"
        }
      },
      "padding-x": {
        "sm": {
          "$type": "dimension",
          "$value": "14px"
        },
        "md": {
          "$type": "dimension",
          "$value": "18px"
        },
        "lg": {
          "$type": "dimension",
          "$value": "24px"
        }
      },
      "radius": {
        "$type": "dimension",
        "$value": "{semantic.radius.full}",
        "$description": "Pill"
      },
      "primary": {
        "bg": {
          "$type": "color",
          "$value": "{theme.light.color.action.primary.bg}"
        },
        "bg-hover": {
          "$type": "color",
          "$value": "{theme.light.color.action.primary.bg-hover}"
        }
      }
    },
    "field": {
      "height": {
        "md": {
          "$type": "dimension",
          "$value": "42px",
          "$description": "Search, compact fields"
        },
        "lg": {
          "$type": "dimension",
          "$value": "50px",
          "$description": "Forms"
        }
      },
      "radius": {
        "$type": "dimension",
        "$value": "{semantic.radius.field}"
      },
      "border": {
        "$type": "color",
        "$value": "{theme.light.color.border.default}"
      },
      "border-focus": {
        "$type": "color",
        "$value": "{theme.light.color.accent.solid}",
        "$description": "2 px inset"
      }
    },
    "chip": {
      "height": {
        "md": {
          "$type": "dimension",
          "$value": "38px"
        },
        "sm": {
          "$type": "dimension",
          "$value": "32px"
        }
      }
    },
    "badge": {
      "height": {
        "$type": "dimension",
        "$value": "26px",
        "sm": {
          "$type": "dimension",
          "$value": "22px"
        }
      }
    },
    "nav-item": {
      "height": {
        "$type": "dimension",
        "$value": "42px"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{semantic.radius.md}"
      }
    },
    "switch": {
      "width": {
        "$type": "dimension",
        "$value": "44px"
      },
      "height": {
        "$type": "dimension",
        "$value": "26px"
      }
    },
    "checkbox": {
      "size": {
        "$type": "dimension",
        "$value": "20px"
      }
    },
    "card": {
      "radius": {
        "$type": "dimension",
        "$value": "{semantic.radius.card}"
      },
      "padding": {
        "$type": "dimension",
        "$value": "{semantic.space.inset-card}"
      }
    },
    "stat": {
      "value": {
        "size": {
          "$type": "dimension",
          "$value": "34px",
          "$description": "Stat card value"
        }
      }
    },
    "table": {
      "row": {
        "height": {
          "$type": "dimension",
          "$value": "44px",
          "$description": "Comfortable"
        },
        "height-compact": {
          "$type": "dimension",
          "$value": "36px",
          "$description": "Compact"
        }
      }
    },
    "dialog": {
      "width": {
        "sm": {
          "$type": "dimension",
          "$value": "420px"
        },
        "md": {
          "$type": "dimension",
          "$value": "560px"
        }
      }
    },
    "tooltip": {
      "radius": {
        "$type": "dimension",
        "$value": "{semantic.radius.md}"
      }
    },
    "toast": {
      "height": {
        "$type": "dimension",
        "$value": "44px"
      }
    },
    "icon": {
      "size": {
        "sm": {
          "$type": "dimension",
          "$value": "16px"
        },
        "md": {
          "$type": "dimension",
          "$value": "18px"
        },
        "lg": {
          "$type": "dimension",
          "$value": "24px"
        }
      },
      "stroke": {
        "$type": "number",
        "$value": "1.6",
        "$description": "Stroke width on the 24 px grid"
      },
      "accent": {
        "$type": "color",
        "$value": "{theme.light.color.accent.default}",
        "$description": "Accent tone of two-tone icons (--ia)"
      },
      "dash": {
        "$type": "strokeStyle",
        "$value": {
          "dashArray": [
            "2.1px",
            "2.5px"
          ],
          "lineCap": "round"
        },
        "$description": "Dash pattern of dashed accents"
      }
    },
    "cta": {
      "height": {
        "xs": {
          "$type": "dimension",
          "$value": "36px",
          "$description": "CTA button, compact"
        },
        "sm": {
          "$type": "dimension",
          "$value": "42px",
          "$description": "CTA button, in cards and sections"
        },
        "md": {
          "$type": "dimension",
          "$value": "48px",
          "$description": "CTA button, default"
        },
        "lg": {
          "$type": "dimension",
          "$value": "54px",
          "$description": "CTA button, hero"
        }
      },
      "padding-x": {
        "xs": {
          "$type": "dimension",
          "$value": "14px"
        },
        "sm": {
          "$type": "dimension",
          "$value": "16px"
        },
        "md": {
          "$type": "dimension",
          "$value": "20px"
        },
        "lg": {
          "$type": "dimension",
          "$value": "26px"
        }
      },
      "font-size": {
        "xs": {
          "$type": "dimension",
          "$value": "13.5px"
        },
        "sm": {
          "$type": "dimension",
          "$value": "14px"
        },
        "md": {
          "$type": "dimension",
          "$value": "15px"
        },
        "lg": {
          "$type": "dimension",
          "$value": "16px"
        }
      },
      "border": {
        "$type": "dimension",
        "$value": "1.5px",
        "$description": "Gradient bevel drawn in the border box"
      },
      "dark": {
        "top": {
          "$type": "color",
          "$value": "#3B3C42",
          "$description": "Graphite fill, top"
        },
        "mid": {
          "$type": "color",
          "$value": "#1D1E21",
          "$description": "Graphite fill, 55%"
        },
        "bottom": {
          "$type": "color",
          "$value": "#111113",
          "$description": "Graphite fill, bottom"
        }
      },
      "light": {
        "top": {
          "$type": "color",
          "$value": "#FFFFFF",
          "$description": "Pearl fill, top"
        },
        "bottom": {
          "$type": "color",
          "$value": "#F0F1F3",
          "$description": "Pearl fill, bottom"
        }
      },
      "beam": {
        "start": {
          "$type": "color",
          "$value": "#12B2FD",
          "$description": "Beam arc: sky"
        },
        "peak": {
          "$type": "color",
          "$value": "#FFFFFF",
          "$description": "Beam arc: white hot spot"
        },
        "end": {
          "$type": "color",
          "$value": "#4461F0",
          "$description": "Beam arc: blue"
        },
        "duration": {
          "$type": "duration",
          "$value": "3.4s",
          "$description": "One lap of the beam, linear"
        }
      },
      "glow": {
        "opacity": {
          "$type": "number",
          "$value": "0.55",
          "$description": "Beam glow at rest; 1 on hover"
        }
      },
      "focus": {
        "$type": "color",
        "$value": "#12B2FD",
        "$description": "Focus ring, 2 px, offset 3 px"
      }
    }
  },
  "semantic": {
    "type": {
      "display-lg": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "54px",
          "fontWeight": 600,
          "lineHeight": 1.02,
          "letterSpacing": "-0.04em"
        },
        "$description": "Sign-in and campaign heroes"
      },
      "display": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "46px",
          "fontWeight": 600,
          "lineHeight": 1.02,
          "letterSpacing": "-0.04em"
        },
        "$description": "Overview hero, one per screen"
      },
      "title-1": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "40px",
          "fontWeight": 600,
          "lineHeight": 1.05,
          "letterSpacing": "-0.035em"
        },
        "$description": "Page titles"
      },
      "title-2": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "32px",
          "fontWeight": 600,
          "lineHeight": 1.05,
          "letterSpacing": "-0.035em"
        },
        "$description": "Section titles"
      },
      "title-3": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "24px",
          "fontWeight": 600,
          "lineHeight": 1.15,
          "letterSpacing": "-0.025em"
        },
        "$description": "Sub-sections, empty states"
      },
      "headline": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "18px",
          "fontWeight": 600,
          "lineHeight": 1.3,
          "letterSpacing": "-0.015em"
        },
        "$description": "Card and dialog titles"
      },
      "body-lg": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "16px",
          "fontWeight": 400,
          "lineHeight": 1.6,
          "letterSpacing": "0em"
        },
        "$description": "Lead paragraphs, hero copy"
      },
      "body": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "15px",
          "fontWeight": 400,
          "lineHeight": 1.5,
          "letterSpacing": "0em"
        },
        "$description": "Default UI text"
      },
      "label": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "14.5px",
          "fontWeight": 500,
          "lineHeight": 1.2,
          "letterSpacing": "0em"
        },
        "$description": "Buttons, nav items, field labels"
      },
      "callout": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "14px",
          "fontWeight": 400,
          "lineHeight": 1.5,
          "letterSpacing": "0em"
        },
        "$description": "Table cells, dense lists"
      },
      "subhead": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "13.5px",
          "fontWeight": 400,
          "lineHeight": 1.45,
          "letterSpacing": "0em"
        },
        "$description": "Card descriptions, helper text"
      },
      "footnote": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "12.5px",
          "fontWeight": 500,
          "lineHeight": 1.4,
          "letterSpacing": "0em"
        },
        "$description": "Meta, badges, legends"
      },
      "caption": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.sans}",
          "fontSize": "11.5px",
          "fontWeight": 600,
          "lineHeight": 1.35,
          "letterSpacing": "0.04em"
        },
        "$description": "Format tags, overlines"
      },
      "mono": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{primitive.font.family.mono}",
          "fontSize": "13px",
          "fontWeight": 500,
          "lineHeight": 1.5,
          "letterSpacing": "0em"
        },
        "$description": "Hex values, paths, code"
      }
    },
    "space": {
      "gutter": {
        "$type": "dimension",
        "$value": "{primitive.space.12}",
        "$description": "Gap between cards and grid columns"
      },
      "inset-card": {
        "$type": "dimension",
        "$value": "{primitive.space.24}",
        "$description": "Padding inside a card (18 on phones)"
      },
      "inset-tile": {
        "$type": "dimension",
        "$value": "{primitive.space.16}",
        "$description": "Padding inside tiles and list rows"
      },
      "stack-section": {
        "$type": "dimension",
        "$value": "{primitive.space.40}",
        "$description": "Space above a new section"
      },
      "stack-text": {
        "$type": "dimension",
        "$value": "{primitive.space.8}",
        "$description": "Title to description"
      },
      "page": {
        "$type": "dimension",
        "$value": "{primitive.space.12}",
        "$description": "Outer page padding (8 on phones)"
      }
    },
    "radius": {
      "xs": {
        "$type": "dimension",
        "$value": "4px",
        "$description": "Chart bars, code chips"
      },
      "sm": {
        "$type": "dimension",
        "$value": "10px",
        "$description": "Rows, small inputs, calendar days"
      },
      "md": {
        "$type": "dimension",
        "$value": "12px",
        "$description": "Nav and menu items"
      },
      "field": {
        "$type": "dimension",
        "$value": "14px",
        "$description": "Text fields, table wrappers"
      },
      "tile": {
        "$type": "dimension",
        "$value": "16px",
        "$description": "Tiles inside cards, alerts"
      },
      "card-sm": {
        "$type": "dimension",
        "$value": "22px",
        "$description": "Compact cards, stat cards"
      },
      "card": {
        "$type": "dimension",
        "$value": "24px",
        "$description": "Cards and panels"
      },
      "panel": {
        "$type": "dimension",
        "$value": "28px",
        "$description": "Hero panels, dialogs"
      },
      "full": {
        "$type": "dimension",
        "$value": "999px",
        "$description": "Buttons, chips, badges, switches"
      }
    },
    "duration": {
      "fast": {
        "$type": "duration",
        "$value": "200ms",
        "$description": "Hover, colour, focus"
      },
      "base": {
        "$type": "duration",
        "$value": "250ms",
        "$description": "Icon swaps, small moves"
      },
      "slow": {
        "$type": "duration",
        "$value": "350ms",
        "$description": "Toasts, sheets entering"
      },
      "slower": {
        "$type": "duration",
        "$value": "500ms",
        "$description": "Bars and meters filling"
      },
      "slowest": {
        "$type": "duration",
        "$value": "600ms",
        "$description": "Image zoom on hover"
      }
    },
    "ease": {
      "standard": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0.7,
          0.2,
          1
        ],
        "$description": "Most UI motion: quick out, soft landing"
      },
      "spring": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0.9,
          0.3,
          1.2
        ],
        "$description": "Toasts and confirmations: a small overshoot"
      },
      "in-out": {
        "$type": "cubicBezier",
        "$value": [
          0.4,
          0,
          0.2,
          1
        ],
        "$description": "Moves between two resting places"
      },
      "linear": {
        "$type": "cubicBezier",
        "$value": [
          0,
          0,
          1,
          1
        ],
        "$description": "Spinners, progress and the CTA beam"
      },
      "overshoot": {
        "$type": "cubicBezier",
        "$value": [
          0.3,
          1.4,
          0.5,
          1
        ],
        "$description": "CTA buttons and arrows: a quick, springy lift"
      }
    },
    "bp": {
      "sm": {
        "$type": "dimension",
        "$value": "640px",
        "$description": "Phone: One column, sticky bars un-stick, tables stack into rows"
      },
      "md": {
        "$type": "dimension",
        "$value": "720px",
        "$description": "Large phone: Dense grids drop to two columns"
      },
      "lg": {
        "$type": "dimension",
        "$value": "1060px",
        "$description": "Tablet: Sidebar becomes a top bar with a scrolling nav"
      },
      "xl": {
        "$type": "dimension",
        "$value": "1240px",
        "$description": "Laptop: Five- and four-column grids drop a column"
      }
    },
    "z": {
      "base": {
        "$type": "number",
        "$value": 0,
        "$description": "Content"
      },
      "sticky": {
        "$type": "number",
        "$value": 5,
        "$description": "Sticky section bars"
      },
      "toast": {
        "$type": "number",
        "$value": 50,
        "$description": "Toasts"
      },
      "overlay": {
        "$type": "number",
        "$value": 60,
        "$description": "Menus, popovers, date picker"
      },
      "modal": {
        "$type": "number",
        "$value": 70,
        "$description": "Dialogs and their backdrop"
      }
    },
    "opacity": {
      "disabled": {
        "$type": "number",
        "$value": 0.45,
        "$description": "Disabled controls"
      },
      "loading": {
        "$type": "number",
        "$value": 0.5,
        "$description": "Sections refreshing"
      }
    }
  }
}