> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> Primary AI Kit brand colors for designs, illustrations, and UI elements.

These are the primary AI Kit brand colors. Use them as the foundation for AI Kit-related designs, illustrations, and UI elements to maintain a consistent visual identity.

## Background

ai-kit-colors-background

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-colors-background?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";

const tiles = [
  {
    label: "Blue-gray 10",
    color: primitive.color["blue-grey"]["10"],
    bordered: true,
  },
  {
    label: "Blue-50",
    color: primitive.color.blue["50"],
  },
  {
    label: "Neutral-0",
    color: primitive.color.neutral["0"],
    bordered: true,
  },
  {
    label: "Neutral-50",
    color: primitive.color.neutral["50"],
  },
  {
    label: "Neutral-500",
    color: primitive.color.neutral["500"],
  },
];

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: primitive.size["800"],
      }}
    >
      {tiles.map((tile) => (
        <div
          key={tile.label}
          style={{
            display: "flex",
            flexDirection: "column",
            gap: primitive.size["200"],
          }}
        >
          <div
            style={{
              width: 80,
              height: 80,
              boxSizing: "border-box",
              borderRadius: primitive.radius["400"],
              backgroundColor: tile.color,
              border: tile.bordered
                ? "2px solid " + primitive.color.neutral["300"]
                : undefined,
            }}
          />
          <Text size="fine" text={tile.label} />
        </div>
      ))}
    </div>
  );
}

export default App;
```

## Text colors

ai-kit-colors-text

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-colors-text?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";

const tiles = [
  {
    label: "Neutral 800",
    color: primitive.color.neutral["800"],
  },
  {
    label: "Neutral 600",
    color: primitive.color.neutral["600"],
  },
  {
    label: "Disabled",
    color: primitive.color.neutral["300"],
  },
  {
    label: "Highlight",
    color: primitive.color.blue["600"],
  },
  {
    label: "Neutral 950",
    color: primitive.color.neutral["950"],
  },
  {
    label: "Neutral 0",
    color: primitive.color.neutral["0"],
    bordered: true,
  },
];

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: primitive.size["800"],
      }}
    >
      {tiles.map((tile) => (
        <div
          key={tile.label}
          style={{
            display: "flex",
            flexDirection: "column",
            gap: primitive.size["200"],
          }}
        >
          <div
            style={{
              width: 80,
              height: 80,
              boxSizing: "border-box",
              borderRadius: primitive.radius["400"],
              backgroundColor: tile.color,
              border: tile.bordered
                ? "2px solid " + primitive.color.neutral["300"]
                : undefined,
            }}
          />
          <Text size="fine" text={tile.label} />
        </div>
      ))}
    </div>
  );
}

export default App;
```

## Border colors

ai-kit-colors-border

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-colors-border?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";
import { primitive, semantic } from "@servicetitan/anvil2-ai-kit/tokens";

const tiles = [
  {
    label: "Subtle",
    color: semantic.border.color.subtle,
  },
  {
    label: "Standard",
    color: semantic.border.color.standard,
  },
  {
    label: "Prominent",
    color: semantic.border.color.prominent,
  },
  {
    label: "Accent",
    color: semantic.border.color.accent,
  },
];

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: primitive.size["800"],
      }}
    >
      {tiles.map((tile) => (
        <div
          key={tile.label}
          style={{
            display: "flex",
            flexDirection: "column",
            gap: primitive.size["200"],
          }}
        >
          <div
            style={{
              width: 80,
              height: 80,
              boxSizing: "border-box",
              borderRadius: primitive.radius["400"],
              backgroundColor: primitive.color.neutral["0"],
              border: "4px solid " + tile.color,
            }}
          />
          <Text size="fine" text={tile.label} />
        </div>
      ))}
    </div>
  );
}

export default App;
```

## Gradient

ai-kit-colors-gradient

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-colors-gradient?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: primitive.size["200"],
      }}
    >
      <div
        style={{
          width: 80,
          height: 80,
          boxSizing: "border-box",
          borderRadius: primitive.radius["400"],
          backgroundImage:
            "linear-gradient(200deg, " +
            primitive.color.blue["700"] +
            ", " +
            primitive.color.blue["600"] +
            ")",
        }}
      />
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: primitive.size["100"],
        }}
      >
        <Text size="fine" text="Decorative gradient" />
        <Text size="compact" text="Blue/700 → Blue/600" />
        <Text
          size="fine"
          text="135° diagonal — light to dark, top-right to bottom-left"
        />
      </div>
    </div>
  );
}

export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.