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

# ServiceTitan Design System

> Anvil2 empowers product teams to create great experiences for ServiceTitan software with inclusive tools, alignment, and processes.

export const Hero = ({title, tagline, version, image, alt}) => {
  return <>
      <style jsx>{`
        .hero-container {
          width: 100%;
          height: 30vh;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          border-radius: 2rem;
          position: relative;
          padding-inline-start: 1rem;
          gap: 1rem;
        }

        .hero-text-container {
          z-index: 1;
          max-width: 50%;
        }

        .hero-image-container {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin: 0;
          }
        }

        .version-chip {
          padding: 0.15rem 0.75rem;
          border-radius: 1rem;
        }
      `}</style>
      <div className="hero-container">
        <div className="hero-text-container">
          <h2 className="fs-heading-xlarge m-0">{title}</h2>
          {tagline && <h3 className="m-0">{tagline}</h3>}
          {version && <p className="version-chip bg-primary-default c-on-primary fw-label">
              {version}
            </p>}
        </div>
        <div className="hero-image-container">
          <img noZoom className="hero-image" src={image} alt={alt} />
        </div>
      </div>
    </>;
};

<Hero title="Anvil2" tagline="Build great products, faster." image="https://mintcdn.com/servicetitan/OJtYZdkkR0RVT4XA/images/hero.png?fit=max&auto=format&n=OJtYZdkkR0RVT4XA&q=85&s=8b21ff3454d1b4ced8b027f58f36cb8c" alt="anvil2, tagline: build great products, faster, with anvil logo illustration" width="1960" height="1024" data-path="images/hero.png" />

## Core libraries

<Columns cols={3}>
  <Card title="Anvil2 Web" icon="desktop" href="/docs/web">
    The core library for building ServiceTitan web experiences.
  </Card>

  <Card title="Icons" icon="icons" href="/docs/web/icons">
    The icon library for ServiceTitan.
  </Card>

  <Card title="Tokens" icon="palette" href="/docs/web/design-tokens">
    The design tokens for ServiceTitan.
  </Card>
</Columns>

***

## Extended libraries

<Columns cols={2}>
  {/* Then added style prop for fill to use the foreground-color-primary variable */}

  <Card
    title="Atlas"
    icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style={{ fill: "var(--foreground-color-primary)"}}><path d="M11.957 0 1.1 6v12l10.857 6 10.857-6V6zm7.157 15.955-7.157 3.955-7.156-3.955v-7.91l7.156-3.955 7.157 3.955z"/><path d="m11.957 6.857 1.364 3.78L17.1 12l-3.78 1.364-1.364 3.78-1.364-3.78L6.815 12l3.78-1.363z"/></svg>
}
    href="/docs/extended-libraries/atlas"
  >
    Components and utilities for building the Atlas chat experience.
  </Card>

  <Card title="Mobile Web View (MWV)" icon="mobile">
    Components and utilities themed for the mobile web view, integrated with
    Ionic.

    <Badge color="orange">Coming soon</Badge>
  </Card>

  <Card title="Common" icon="desktop">
    Components and utilities for building common use cases in the ServiceTitan app monolith and MFEs.

    <Badge color="orange">Coming soon</Badge>
  </Card>

  <Card title="Charts" icon="chart-line" href="/docs/extended-libraries/charts">
    Themes and utilities for building data visualization experiences with amCharts 5.
  </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>