About Anvil2

Anvil2 is the second iteration of ServiceTitan’s Anvil Design System Anvil2 (A2) as a system aims to foster collaboration, streamline design and development, and elevate user experiences across all platforms through a scalable design system for the trades. With a focus on accessibility, scalability, and innovation, we aspire to enable designers and developers to realize their vision and delight users through intuitive and polished experiences. Use this resource to learn more on frequently asked topics, where to start, and how to approach swapping between libraries.

​

What is a Design System?

A design system is a formally structured collection of reusable components, each governed by clear standards, which can be assembled together to build any number of digital products. Design Systems serve as a comprehensive guide for building digital experiences that ensure cohesion across appearance, behavior, and devices across UI. Using a Design System’s guidelines ensures consistency across experiences for users, and increases the speed and efficiency of how we design and build products. Design systems consist of several pieces and deliverables, including:

• Component and Pattern libraries that consist of templates, layouts, interaction patterns, code snippets, design assets, and components
• Foundations such as typography, color, behavior, design tokens, iconography, logos, illustrations, and brand guidelines
• Technical specs, including accessibility and prop variations
• Best practices, processes, principles, and more!

​

Anvil2 Approach

The Anvil2 and Hammer libraries are accessible, responsive, intuitive and prescriptive. The system itself generally does not retro-fit to the Anvil1 library, unless the use case is mission-critical for a user. When the pattern is not responsive nor accessible, we welcome working with you on a new pattern to help users. We welcome contributions!

​

Measuring Impact

Anvil uses our Impact Tracker as a powerful tool for evaluating the adoption, consistency, efficiency, and impact of Anvil, Visual Design, and DesignOps at ServiceTitan. It provides data-driven insights into usage, satisfaction, and delivery, helping teams understand how their work drives results. By categorizing metrics across adoption, consistency, efficiency, and impact, the Impact Tracker offers a clear view of what’s working and where to improve. It’s more than just tracking numbers—it’s about making informed decisions to enhance user experiences across ServiceTitan.

​

For Engineers

​

Getting Started with Anvil2

We have several resources to support your move to Anvil2 (A2) - Getting Started, Migration Guide and our READMEs for the Anvil2 and Hammer React packages in the Hammer repository have detailed guidance for consumers. You can import our latest version from @servicetitan/anvil2. With the release of this new library, we welcome feedback as we iterate and make enhancements. Below is how we define alpha, beta, and stable states for components.

​

Icons

We have teamed up with Platform Engineering to make using icons a better experience for our consumers.

• We will be using svgr for svg handling
  • Startup package will have svgr by default
• If your Startup version does not have svgr, installing without additional configuration should work. If it does not, please contact the Platform Engineering team for support.
• Import path for icons are:
  • @servicetitan/anvil2/assets/icons/material/round/[icon].svg
  • @servicetitan/anvil2/assets/icons/st/[icon].svg
    • Above is the import path for custom ST icons

​

React 18

Anvil2 and Hammer are using React 18 to stay up-to-date with the latest framework version and utilize the latest features. Platform Engineering has updated the monolith and startup package to allow for React 18 to support transition to Anvil2. Read here on how to migrate to React 18 and Front-End Platform support.

​

Releases

Patch releases and up to minor occur daily, as long as there is a PR merged to the main branch and ready for release. Component releases are considered minor release. Major releases occur when necessary, we strive to keep breaking changes minimal. Anvil Design System uses Semantic Versioning (SemVer). Anvil posts release updates daily on Slack. Review our Communications Schedule for more.

​

Accessibility and Responsive Web

Anvil2 and Hammer are WCAG 2.2 AA and responsive on the web as deliverables. When implemented in your product, each squad will need to do the following to ensure they reap the benefits of this:

• Provide standard QA and Accessibility checks
• Test for web responsive behavior before prod

​

For Designers

​

Navigating the A2 Figma library

We have been interviewing designers to ensure the new features are easily understood and component naming is clear between libraries. The new library has been optimized so that you do not have to detach components as often to achieve what you are hoping to do. If you come across this scenario, please let us know so we can help ensure you are using the component as intended or enhance it. Anvil’s suggestion is to recreate your main screens with our A2 library components. We are actively working on creating templates to support this transition. This will ensure you are following a grid and will help keep your designs consistent going forward. Each component in Anvil Web (A1) has guidance to help you map usage in A2. We have several statuses to clarify:

• Deprecated 🚫 - we have replacement component in A2 and A1 should not be used
• Removed 🪦 - this is not a component we will use anymore in both A1 and A2
• Considering 🤔 - we are thinking about it but haven’t decided to move to A2
• Coming soon 🔨 - it is on the roadmap for A2 but we haven’t made it yet
• Same name, different behavior ♻️ - A2 component uses same naming, however the component behaves differently in A2. Check out the relevant component page to learn more.

​

Component Changes between A1 and A2

Anvil2 aims to standardize and reduce customization in the app so that the user has a consistent and seamless experience. As part of this, we have reduced our component count to make the system more structured. Some components are currently being worked on, others have been renamed. Fear not - our Figma library will help you decipher this with component naming, and we also have this Mapping document to reference. We also have guidance in our Migration Guide, specific to Component Updates and notable changes for Design.

​

Figma Resources

The A2 Figma library is optimized to use the latest and greatest from Figma, and we will continuously make improvements over time as Figma releases new features that make for a more efficient workflow for our consumers. Below are some helpful resources to both refresh yourselves and learn more about the functionality we are using in the A2 library:

• Using grids and A2, Page layouts
• Auto-layout
• Slot components
• Watch James demo the library

​

Handoffs

As you are moving to A2, your Figma files may remain closer aligned with A1. To ensure there is no disruption in your handoff processes, any URLs that you have provided to Engineers that use A1 components will produce a 404 error with a URL to A1’s relevant documentation. This way, your Engineers and stakeholders can still receive A1 documentation as needed.

​

For Product Managers

​

Prioritizing BAU

Swapping from Anvil1 components to Anvil2 is considered part of UX-Debt and can be planned as BAU with the same approach. You can learn more about how to address your specific product needs here and how we can help.

​

Navigating Changes for Users

Many times, your product will simply swap for an A2 component and the user will only notice the difference when they are interacting and are pleasantly surprised! There will also be opportunities to simplify the UI to meet accessibility requirements and to make the experience more efficient, smart and automatic for users. In these cases, review with your Designer on whether or not your changes should be supplemented by introducing a Pendo or Design Change Management (DCM) pattern into the experience. Your squad will need to assess how much you are changing for the user in these cases, and can assess DCM usage.

​

Using A2 with Fullstory

All interactive Anvil2 components will automatically generate a unique, consistent data-tracking-id based on relevant props, simplifying tracking for consumers. This ID is passed to the HTML element and can be overridden via the data-tracking-id prop for easier identification in Fullstory, ensuring backward compatibility for elements published before custom IDs. This automation eliminates the need for teams to manually create tracking IDs, though teams with existing Fullstory tracking systems can opt out. If a data-tracking-id is provided, the Anvil Fullstory tracking implementation is bypassed.

​

Getting Help and Sharing Feedback

We heard you loud and clear in your requests for easier ways to get in touch with us, especially around sharing your feedback. Below are some ways to get in touch with us, and help us prioritize your system needs. We intake help and feedback through Slack, Jira, GitHub currently. As mentioned above, we will also be adding a way to get in touch on our docs site. Below are several ways to reach out. Please note: We are currently assessing a tool to streamline our intake channels and will update this section accordingly.

​

Feedback and Feature Requests

Use our feature board in Slack to submit requests to Anvil. Review our Feedback board to see if someone else has already requested the same or something similar. Vote for it to help Anvil prioritize the work and assess the need. Use this board to:

• Review existing requests and suggestions, upvote the ones that you would like to see worked on
• Requests for additional behavior or functionality of a component or pattern
• Requests for net new additions
• Feedback on the system, such as APIs or specific use cases

​

Support

Getting help from Anvil on implementation or standards #ask-designsystem

• All urgent needs
• Implementation questions
• (currently) Report a bug using Slack workflow

​

Contributions

Enhancing our system through partnerships

​

Code

To contribute code to Anvil, submit a PR and tag a team member for support.

​

Designs

To contribute a design standard:

• Review a refined list of contribution opportunities
• Choose your method of contribution and follow the steps to get in touch!
• DSC approval may be needed for substantial changes or new patterns

​

Office Hours

The Anvil team hosts Office Hours in two time slots per week to accommodate multiple timezones. The link to book Office Hours is available in our #ask-designsystem channel. We look forward to meeting with you!