T1 Design System
Design System
A unified design system for the TriNet-Zenefits merger
After TriNet acquired Zenefits, T1 defined the next generation of TriNet — unifying the product experience and visual identity.
I helped establish core usage patterns and led rollout alongside engineering teams.
Applications Supported
15+
Patterns & Components
200+
Eliminated Legacy Variations
50+
WCAG Accessibility
100%
Modernizing and following atomic principles
We modernized TriNet’s design foundation by replacing outdated legacy patterns with a cohesive, scalable system. Our approach was guided by three core ideas:
System cohesion: Ability to scale and be consistent at every layer
Standardized logic: Prioritizing familiar patterns over novelty to reduce cognitive load
Bias for simplicity: Stripping away visual noise to focus on clarity and functional elegance
Looking at both the big and small picture: Applying Brad Frost's atomic principles, we built the building blocks from the bottom up, while using high-level page layouts to work backward and define what those blocks needed to be.
Atoms and Molecules
Foundational blocks – typography, core styles, buttons and small components
Organisms and layouts
Standardized interactions and usage patterns across the system
Pages and templates
Live templates and interactions developed in tandem with the T1 system rollout
An early T1 page designed for the time off platform
Layout specs for engineering handoff and design usage
Stepper flow and layouts for multi-step setup experiences
Layout specs for engineering handoff and design usage
Usage of stepper, radio buttons, and toggles
More Project Details
Key Outcomes
Scale: Powering 15+ core applications with a mandate for all new platform development.
Library: 200+ atomic components engineered for 100% WCAG accessibility.
Efficiency: Eliminated 20+ legacy component variations, reducing technical debt and design fragmentation.
Adoption & Migration
Single Source of Truth: Established a mirrored architecture between Figma and Storybook to ensure parity across design and code.
Strangler Pattern: Orchestrated "code strangulation" strategy to incrementally migrate legacy views into the T1 framework without disrupting production.
Governance: Managed pattern exceptions via a dedicated design-eng channel and weekly "Office Hours" to maintain system integrity while supporting edge cases.
Evolution & Maintenance
Technical Modernization: Incrementally deployed Figma variables, slots, and tokens to future-proof the library and support multi-theme (Dark Mode) capabilities.
Quality Assurance: Regular "Design-to-Code" syncs with UI Engineers to audit and review new Storybook implementations.
