> ## 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.

# Explaining Carto, a new Anvil2 theme

export const BlogMeta = ({date, author, tags}) => {
  const formatList = items => {
    if (!Array.isArray(items)) return items;
    if (items.length === 1) return items[0];
    if (items.length === 2) return `${items[0]} & ${items[1]}`;
    return `${items.slice(0, -1).join(", ")}, & ${items[items.length - 1]}`;
  };
  return <div className="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
      <span>{date}</span>
      <span>|</span>
      <span>{formatList(author)}</span>
      {tags && tags.length > 0 && <>
          <span>|</span>
          <div className="flex flex-wrap gap-1.5">
            {tags.map(tag => <span key={tag} className="px-2 py-1 rounded bg-gray-100 dark:bg-neutral-800 text-xs">
                {tag}
              </span>)}
          </div>
        </>}
    </div>;
};

<BlogMeta date="September 14, 2026" author="Derek Watson" tags={["Engineering", "Design", "New Features"]} />

If you've heard terms like Carto, Koi, or AI Kit lately and aren't sure how they fit with Anvil2, you're not alone. Those names have been circulating as Atlas chat and new mobile work ramped up, even for teams who don't build with those packages day to day.

This post is here to sort that out. It isn't a rebrand, and it isn't two design systems merging as equals. Carto is officially becoming what it was already trending toward: a theme inside Anvil2's token system, not a separate design system running alongside it.

> **tl;dr**
>
> The Carto packages moved into the `hammer` repo under new, Anvil2-style names, and their docs now live on this site. Carto itself lives on as a *theme* inside the Anvil2 token system, not a separate design system.

## Terminology

A few terms come up a lot below. From here on, we'll mostly call Carto "the theme."

| Term        | Meaning                                                                                                                                                                                       |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Carto**   | The themed token system behind AI Kit and mobile. It feeds two theme instances, AI Web and a unified Mobile theme, so each platform can differentiate while staying on one shared foundation. |
| **Koi**     | The design studio redesigning patterns for FMA. Koi-specific patterns are supported as component-library variations within the unified mobile theme, not as a separate theme.                 |
| **AI Kit**  | The Anvil2 kit for building agentic product experiences. It's the name teams build against; Carto is the theme underneath it.                                                                 |
| **Agentic** | A product experience where AI acts on your behalf, not only advises.                                                                                                                          |

## Where we started

Carto started as its own library (`carto-react-kit`, `carto-rn-kit`, and the rest), built in partnership with the Atlas design team. At the same time, Koi was working separately on a new visual language for FMA and for the Atlas-within-FMA experience. Two tracks, two visual languages, two places to look.

### Why we originally built Carto on its own

Carto started as the design system behind the new Atlas chat experience. We built it apart from Anvil2 for three reasons:

* **Speed.** Atlas had an accelerated timeline tied to Pantheon deliverables. A dedicated system let the team move fast without waiting on broader Anvil2 processes.
* **Scope.** Carto was scoped tightly to AI chat components and patterns, not general product UI.
* **Visual language.** Carto used a visual style that was meaningfully different from Anvil2 at the time.

## Why we are pivoting now

### The visuals converged

Over the course of the Q2 Pantheon push, the theme's look and feel drifted closer to Anvil2:

* Primary buttons went from Titan Blue, to black, and back to Titan Blue.
* Border radius went from noticeably rounder to only a little rounder than Anvil2.
* Headings moved from Satoshi back to Sofia Pro, matching Anvil2.

### The scope grew

At the same time, the theme's audience grew well past Atlas chat. Workspace and the Atlas Mobile App adopted it, and so did FMA as it adds Atlas features and goes through a redesign. What started as a small, purpose-built system for one experience became a second general-purpose design system running alongside Anvil2.

That growth turned out to prove a point: the token system was robust enough to support each app's own visual differentiators without splintering into a separate system per app. The Koi design studio, which is helping shape FMA's Atlas experience and visual direction, is building that work on the theme too.

### Consumer feedback that teams didn't want another system

Product teams told us that supporting yet another design system alongside Anvil2, A1, and Knockout was a real pain. That feedback, plus the theme's visuals already trending toward Anvil2, is why we're consolidating now.

## What changed

The theme's packages moved out of their own repo and into `hammer`, following Anvil2's naming and package conventions.

| Before                             | After                                                                                                                  |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `carto-react-kit`                  | [`@servicetitan/anvil2-ai-kit`](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-ai-kit)               |
| `carto-rn-kit`                     | [`@servicetitan/anvil2-rn`](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-rn)                       |
| `carto-charts-react`               | [`@servicetitan/anvil2-charts-kit`](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-charts-kit)       |
| `carto-charts-rn`                  | [`@servicetitan/anvil2-rn-charts-kit`](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-rn-charts-kit) |
| Carto icons (bundled with the kit) | [`@servicetitan/anvil2-icons`](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-icons)                 |
| Standalone docs site               | This site, under [AI Kit](/docs/kits/ai-kit) and [Kits](/docs/kits)                                                    |

<Note>
  `@servicetitan/carto-tokens` kept its name and its own pipeline for now.
  Consolidating it into the Anvil2 token system was too risky to take on right
  before Pantheon, so it stays a separate build for the moment. You'll still
  wrap agentic surfaces in `CartoTheme` exactly like before. See [Getting
  Started](/docs/kits/ai-kit/getting-started) for the current setup.
</Note>

Everything else about building with these libraries stays the same. Same components, same APIs, same Storybooks. Only the package names, repo, and docs location changed.

### A single path forward for charts

Charts are converging too. The new chart kits that came over with the theme cover both agentic surfaces and standard product charts, so [`anvil2-ext-charts`](/docs/kits/charts), our amCharts 5 theme library, is now deprecated. Use the packages below for any new chart work, on web or React Native.

| Package                                                                                                  | Status                       | Docs                                                    |
| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- |
| `anvil2-ext-charts`                                                                                      | Deprecated                   | [Charts](/docs/kits/charts)                             |
| [`anvil2-charts-kit`](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-charts-kit)       | Recommended for web          | [Charts - React](/docs/kits/charts-react)               |
| [`anvil2-rn-charts-kit`](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-rn-charts-kit) | Recommended for React Native | [Charts - React Native](/docs/kits/charts-react-native) |

## What's next

### Converging on one visual language

We've started bringing the two systems' visual languages together instead of letting them drift further apart. How we consolidate, including the strategy for color, typography, and shape, is still being aligned with leadership. The direction is to send those decisions through Anvil2's token system first, with the theme built as a variant on top rather than a parallel set of choices.

The goal is a single, cohesive visual identity that holds up across web and mobile. Teams building agentic surfaces and teams building standard product UI will draw from the same design language, whether they're shipping a web app or a native mobile experience.

### Next steps

We're deliberately holding off on deeper changes until after Pantheon, so we don't disrupt the product ahead of our biggest event of the year. Once that's behind us, four workstreams kick off:

<Steps>
  <Step title="Consolidate the token pipelines">
    Merge `carto-tokens` and `hammer-token` into a single `anvil2-tokens` pipeline so every Anvil2 library builds from one source of truth.
  </Step>

  <Step title="Consolidate the visual language">
    We're aligning with leadership on the strategy and goals for this work,
    post-Pantheon, since it affects many areas of the product. The hope is that we
    align fonts, icons, border radii, and colors across all Anvil2 libraries.
    Those specifics are not settled yet, and we'll share the plan once it lands.
  </Step>

  <Step title="Consolidate duplicate components">
    `Button`, `Text`, `Card`, and others exist in both `anvil2` and
    `anvil2-ai-kit` today, mostly because of visual differences that no longer
    exist. We'll merge these down to one implementation.
  </Step>

  <Step title="Support migrations">
    We'll help every affected team upgrade with as little disruption as possible, backed by clear migration guides and direct support.
  </Step>
</Steps>

Follow the plan in the [architecture convergence epic](https://servicetitan.atlassian.net/browse/ANV-5445) in Jira.

## Explore the docs

<Columns cols={2}>
  <Card title="AI Kit overview" icon="sparkles" href="/docs/kits/ai-kit">
    Design guidance and building blocks for agentic experiences.
  </Card>

  <Card title="Getting started" icon="rocket" href="/docs/kits/ai-kit/getting-started">
    Install `anvil2-ai-kit`, add `CartoTheme`, and build your first component.
  </Card>

  <Card title="Terminology" icon="book" href="/docs/kits/ai-kit/terminology">
    Shared vocabulary for building with AI Kit and the Carto theme.
  </Card>

  <Card title="Charts - React" icon="chart-column" href="/docs/kits/charts-react">
    Build ECharts-powered charts with the new `anvil2-charts-kit`.
  </Card>

  <Card title="Charts - React Native" icon="chart-line" href="/docs/kits/charts-react-native">
    The same chart kit for React Native, via `anvil2-rn-charts-kit`.
  </Card>

  <Card title="Roadmap" icon="map" href="/docs/resources/roadmap">
    See what's planned for the rest of the convergence.
  </Card>
</Columns>

***

## Connect with us

<Columns cols={2}>
  <Card title="Get help on Slack" icon="slack" href="https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS">
    You can reach the Anvil team in the #ask-designsystem Slack channel.
  </Card>

  <Card title="Schedule office hours" icon="calendar" href="https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS">
    Join the Anvil team for office hours on Mondays or Wednesdays to get hands-on help.
  </Card>

  <Card title="Report an issue" icon="jira" href="https://servicetitan.atlassian.net/secure/CreateIssue.jspa?issuetype=1&pid=11329">
    Ran into a bug in the code or design? We use Jira to track outstanding
    issues with Anvil.
  </Card>

  <Card title="Suggest an idea" icon="lightbulb" href="https://slack.com/shortcuts/Ft07EXNJSPS7/f598de9eda7177f477aaddbbc5701e15">
    Have an idea for a component, pattern, or documentation? Fill out the Feature Request Form in Slack.
  </Card>

  <Card title="View roadmap" icon="map" href="/docs/resources/roadmap">
    View what is coming up this year for the design system.
  </Card>

  <Card title="Contribute to Anvil2" icon="handshake" href="https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/2054129026/Designer+Contribution+to+Anvil">
    Interested in contributing to Anvil? Read our contribution guide to learn
    more!
  </Card>
</Columns>