{
  "$name": "Xavier G Design System",
  "color": {
    "background": {
      "base": {
        "$value": "#0D0D0D",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "#F5F5F5"
          }
        }
      },
      "raised": {
        "$value": "#141414",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "#FFFFFF"
          }
        }
      },
      "overlay": {
        "$value": "rgba(13, 13, 13, 0.6)",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "rgba(245, 245, 245, 0.6)"
          }
        }
      }
    },
    "ink": {
      "primary": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "#000000"
          }
        }
      },
      "muted": {
        "$value": "rgba(255, 255, 255, 0.6)",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "rgba(0, 0, 0, 0.6)"
          }
        }
      },
      "inverse": {
        "$value": "#000000",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "#FFFFFF"
          }
        }
      }
    },
    "border": {
      "line": {
        "$value": "rgba(255, 255, 255, 0.1)",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "rgba(0, 0, 0, 0.1)"
          }
        }
      }
    },
    "accent": {
      "base": {
        "$value": "#BFF549",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "#4b8c00"
          }
        }
      },
      "hover": {
        "$value": "#8CC21F",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "#376600"
          }
        }
      },
      "ink": {
        "$value": "#0D0D0D",
        "$type": "color",
        "$extensions": {
          "mode": {
            "light": "#ffffff"
          }
        }
      }
    },
    "tags": {
      "blue": {
        "$value": "#31A8FF",
        "$type": "color"
      },
      "orange": {
        "$value": "#FF9A00",
        "$type": "color"
      },
      "purple": {
        "$value": "#8E75B2",
        "$type": "color"
      },
      "red": {
        "$value": "#F24E1E",
        "$type": "color"
      }
    },
    "brand": {
      "figma": {
        "$value": "#F24E1E",
        "$type": "color"
      },
      "photoshop": {
        "$value": "#31A8FF",
        "$type": "color"
      },
      "illustrator": {
        "$value": "#FF9A00",
        "$type": "color"
      },
      "claude": {
        "$value": "#D97757",
        "$type": "color"
      },
      "gemini": {
        "$value": "#4285F4",
        "$type": "color"
      },
      "vscode": {
        "$value": "#007ACC",
        "$type": "color"
      }
    }
  },
  "typography": {
    "fontFamily": {
      "display": {
        "$value": "'Archivo', sans-serif",
        "$type": "fontFamily"
      },
      "body": {
        "$value": "'Inter', sans-serif",
        "$type": "fontFamily"
      },
      "mono": {
        "$value": "'JetBrains Mono', monospace",
        "$type": "fontFamily"
      }
    },
    "fontSize": {
      "xs": {
        "$value": "9px",
        "$type": "dimension"
      },
      "sm": {
        "$value": "11px",
        "$type": "dimension"
      }
    }
  },
  "dimension": {
    "spacing": {
      "button": {
        "$value": "1rem 2rem",
        "$type": "dimension"
      },
      "tag": {
        "$value": "0.25rem 0.5rem",
        "$type": "dimension"
      }
    },
    "sizing": {
      "navHeight": {
        "$value": "60px",
        "$type": "dimension"
      },
      "statusDot": {
        "$value": "6px",
        "$type": "dimension"
      }
    }
  },
  "component": {
    "button": {
      "base": {
        "typography": {
          "$type": "typography",
          "$value": "{typography.fontFamily.mono}"
        },
        "fontSize": {
          "$type": "dimension",
          "$value": "{typography.fontSize.sm}"
        },
        "padding": {
          "$type": "dimension",
          "$value": "{dimension.spacing.button}"
        }
      },
      "filled": {
        "background": {
          "default": {
            "$type": "color",
            "$value": "{color.accent.base}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.accent.hover}"
          }
        },
        "foreground": {
          "$type": "color",
          "$value": "{color.accent.ink}"
        }
      },
      "outline": {
        "border": {
          "$type": "color",
          "$value": "{color.ink.primary}"
        },
        "foreground": {
          "default": {
            "$type": "color",
            "$value": "{color.ink.primary}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.ink.inverse}"
          }
        },
        "background": {
          "hover": {
            "$type": "color",
            "$value": "{color.ink.primary}"
          }
        }
      },
      "nav": {
        "height": {
          "$type": "dimension",
          "$value": "{dimension.sizing.navHeight}"
        },
        "background": {
          "$type": "color",
          "$value": "{color.accent.base}"
        },
        "foreground": {
          "$type": "color",
          "$value": "{color.accent.ink}"
        }
      }
    },
    "tag": {
      "base": {
        "typography": {
          "$type": "typography",
          "$value": "{typography.fontFamily.mono}"
        },
        "fontSize": {
          "$type": "dimension",
          "$value": "{typography.fontSize.xs}"
        },
        "padding": {
          "$type": "dimension",
          "$value": "{dimension.spacing.tag}"
        },
        "border": {
          "default": {
            "$type": "color",
            "$value": "{color.border.line}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.accent.base}"
          }
        },
        "foreground": {
          "default": {
            "$type": "color",
            "$value": "{color.ink.muted}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.accent.ink}"
          }
        },
        "background": {
          "hover": {
            "$type": "color",
            "$value": "{color.accent.base}"
          }
        }
      },
      "blue": {
        "border": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.blue}"
          }
        },
        "background": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.blue}"
          }
        },
        "foreground": {
          "hover": {
            "$type": "color",
            "$value": "{color.ink.inverse}"
          }
        }
      },
      "orange": {
        "border": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.orange}"
          }
        },
        "background": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.orange}"
          }
        },
        "foreground": {
          "hover": {
            "$type": "color",
            "$value": "{color.ink.inverse}"
          }
        }
      },
      "purple": {
        "border": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.purple}"
          }
        },
        "background": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.purple}"
          }
        },
        "foreground": {
          "hover": {
            "$type": "color",
            "$value": "{color.ink.inverse}"
          }
        }
      },
      "red": {
        "border": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.red}"
          }
        },
        "background": {
          "hover": {
            "$type": "color",
            "$value": "{color.tags.red}"
          }
        },
        "foreground": {
          "hover": {
            "$type": "color",
            "$value": "{color.ink.inverse}"
          }
        }
      }
    },
    "link": {
      "nav": {
        "typography": {
          "$type": "typography",
          "$value": "{typography.fontFamily.mono}"
        },
        "foreground": {
          "default": {
            "$type": "color",
            "$value": "{color.ink.muted}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.ink.primary}"
          },
          "active": {
            "$type": "color",
            "$value": "{color.ink.primary}"
          }
        }
      },
      "card": {
        "typography": {
          "$type": "typography",
          "$value": "{typography.fontFamily.mono}"
        },
        "foreground": {
          "default": {
            "$type": "color",
            "$value": "{color.ink.primary}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.accent.base}"
          }
        }
      }
    },
    "hud": {
      "card": {
        "typography": {
          "$type": "typography",
          "$value": "{typography.fontFamily.mono}"
        },
        "number": {
          "background": {
            "$type": "color",
            "$value": "{color.accent.base}"
          },
          "foreground": {
            "$type": "color",
            "$value": "{color.accent.ink}"
          }
        },
        "category": {
          "foreground": {
            "$type": "color",
            "$value": "{color.ink.muted}"
          }
        }
      },
      "status": {
        "dimension": {
          "$type": "dimension",
          "$value": "{dimension.sizing.statusDot}"
        },
        "background": {
          "$type": "color",
          "$value": "{color.accent.base}"
        },
        "shadow": {
          "$type": "shadow",
          "$value": {
            "color": "{color.accent.base}",
            "offsetX": "0px",
            "offsetY": "0px",
            "blur": "8px"
          }
        }
      },
      "repack": {
        "background": {
          "default": {
            "$type": "color",
            "$value": "{color.background.overlay}"
          }
        },
        "border": {
          "default": {
            "$type": "color",
            "$value": "{color.border.line}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.ink.primary}"
          }
        },
        "foreground": {
          "$type": "color",
          "$value": "{color.ink.primary}"
        }
      }
    },
    "tool": {
      "base": {
        "typography": {
          "$type": "typography",
          "$value": "{typography.fontFamily.mono}"
        },
        "fontSize": {
          "$type": "dimension",
          "$value": "{typography.fontSize.sm}"
        }
      },
      "gemini": {
        "brand": {
          "$type": "color",
          "$value": "{color.brand.gemini}"
        }
      }
    }
  }
}