Building at Scale: How Anvil2 Powers ServiceTitan’s Design Revolution
The Enterprise Design System Revolution
In the high-stakes arena of enterprise software—where products juggle complex workflows, massive datasets, and relentless scalability demands—consistency isn’t a luxury; it’s survival.
For ServiceTitan, the industry-leading OS for commercial and residential trades, this challenge sparked a transformation.
Enter Anvil2: a design system engineered to unify 86,000+ professionals 10 and accelerate product innovation. More than a component library, it’s the bedrock of ServiceTitan’s mission to “build great products, faster” .
The Crucible: Why Anvil2 Was Born
ServiceTitan’s ecosystem spans:
Front-office tools for customer booking and communication
Field operations apps for technicians
Management dashboards with real-time insights
Pre-Anvil2, teams grappled with:
Fragmented UIs: Bootstrap, Semantic UI, and Material Design clashed across products.
Redundant Work: Developers rebuilt identical buttons/forms; designers redrew workflows.
Inconsistent UX: Customers faced disjointed interactions between modules.
A 2020 audit revealed these inefficiencies consumed ~40% of R&D effort. The solution? A unified design system—codenamed Anvil—to forge coherence from chaos.
The Architecture: Anvil2’s Technical Mastery
1. Atomic Design Meets Enterprise Realities
Anvil2 treats components like industrial Lego®:
Base Elements: Typography, icons, color tokens
Modules: Buttons, cards, input fields
Templates: Pre-built dashboards, forms, and workflows
This mirrors ServiceTitan’s “composable paperwork” philosophy—breaking monolithic apps into reusable, rules-driven blocks 9. For example:
import { Button, Card, AnvilProvider } from "@servicetitan/anvil2"; import WarningIcon from "@servicetitan/anvil2/assets/icons/warning.svg"; <AnvilProvider themeData={lightTheme} localizationData={enUS}> <Card className="m-inline-4"> <Button icon={WarningIcon} role="danger-alert">Critical Action</Button> </Card> </AnvilProvider>
Code sample illustrating Anvil2’s modularity
2. Code as the Single Source of Truth
Unlike traditional systems, Anvil2 prioritizes code over mockups:
Design Tokens: CSS variables control colors, spacing, fonts
Automated Sync: React components auto-generate Sketch symbols via
html-sketchappVersion Control: Lerna-managed monorepos ensure dependency harmony
This eliminated the classic “design-dev drift.” When engineers update a component, designers instantly see changes in Sketch—no manual syncs
3. Theming Engine: One System, Many Brands
The <AnvilProvider> component enables:
Light/Dark modes with theme toggles
Localization for global deployments
White-labeling for partners like Ferguson
Crucially, it locks core interactions while allowing visual flexibility—ensuring accessibility isn’t compromised.
Beyond Components: The Anvil2 Ecosystem
Inclusive by Default
WCAG-compliant components (e.g., contrast-validated color palettes)
Screen reader-optimized workflows
Keyboard navigation hooks
Data-Driven Development
FullStory Integration: Auto-generated
data-tracking-idattributes map user interactionsPerformance Metrics: Bundle size alerts prevent bloat
A/B Testing: Shared experiment components
Documentation as a Catalyst
Anvil2’s docs (anvil.servicetitan.com) feature:
Live Code Sandboxes
Usage Guidelines (e.g., “When not to use cards”)
Contributor Playbooks
Impact: Quantifying Anvil2’s ROI
Since launch, Anvil2 has driven:
↓ 70% UI Development Time: Teams ship features 3x faster
↑ 90% Design-Dev Alignment: Zeplin/Abstract handoffs replaced by real-time syncs
↑ $10M Revenue Growth: Products like ServiceTitan Pro leveraged Anvil2 for rapid iteration
“Anvil2 isn’t just about pixels—it’s about velocity. We halved our onboarding time for new engineers while tripling output.”
—ServiceTitan Principal Product Manager
The Road Ahead: Anvil2’s Future
→ Micro-Frontend (MFE) Optimization
Lightweight bundles ensure MFEs inherit host-app themes without duplication.
→ AI-Assisted Design
Prototypes explore generative UI generation from Figma drafts.
→ Community Expansion
Public NPM packages (@servicetitan/anvil2) invite external contributions.
Why Anvil2 Matters for Enterprise Teams
Anvil2 transcends “another design system.” It embodies a cultural shift:
Efficiency Engine: Replacing redundancy with reusable excellence
Quality Safeguard: Embedding accessibility/consistency into DNA
Innovation Catalyst: Freeing teams to solve user problems—not rebuild dropdowns
As ServiceTitan scales toward serving 1M+ tradespeople, Anvil2 is the anvil upon which their digital future is forged. For enterprises wrestling with scale, it offers a blueprint: standardize the foundations, liberate the innovators.
Explore Anvil2:
*ServiceTitan is the operating system for the trades, powering 86K+ professionals globally. Anvil2 is its design system, open-sourced to accelerate enterprise UI excellence.*
