Start with the existing system

When I joined Bankrate, the design system consisted of two parts: the frontend used a custom utility framework called Classy, while designers used a Figma library called The Vault.

Classy and The Vault did not always share a consistent language. The gray palette used names like gray, slate, mid-gray, and light gray, but the same naming pattern did not carry across other hues. That made the system difficult to read across design and engineering.

There was a desire for a stronger system, but the migration had to work across several teams and thousands of existing pages.

Rebuild the foundations

The decision was to bring Classy and The Vault together in a single system called Treasury. The frontend would move from Classy to Tailwind, a more established utility framework, while The Vault would be deprecated and replaced with a new Treasury library in Figma built around the same Tailwind configuration.

We used the Tailwind config as a guide and treated its conventions as a best practice. I expanded the color palette into a 50 to 900 scale using a perceptually uniform color space. I simplified the typography system and cleaned up the icon set by removing unused icons and combining duplicates.

Mapping guides showed how older colors and icons translated to Treasury, which also gave engineers a reference when they found a Classy class in existing code.

Support the transition

Classy and Treasury handled CSS differently. Classy loaded the full set of utilities, including many that a page did not use. Tailwind’s JIT engine generated styles from the utilities it found in the code, which allowed Treasury to carry less unused CSS.

Reducing unused CSS was one reason for moving to Treasury. The migration was more involved because thousands of pages and custom experiences still depended on Classy. For a while, Classy and Treasury had to work on the same page.

I worked on design mappings that identified deprecated colors and their replacements in the new system. Engineering created linting and conversion tools for the new utilities, and we ran side-by-side regression tests to make sure the converted pages still held up visually.

We created a Treasury documentation hub that showcased the foundations and available components. New components appeared there as they were ready, along with migration guidance.

Migrating in stages

We organized the rollout by category and template type. Teams were organized around areas such as mortgages, banking, and insurance, and each used similar templates (for example, mortgage calculators, mortgage hubs, and mortgage rate tables).

We started with lower-converting calculators before moving to higher-traffic versions. This pragmatic rollout gave design and engineering time to find issues and refine the migration on lower-risk pages.

Conclusion

Treasury gave designers a clearer Figma library and engineers a system based on Tailwind conventions they already understood. Over 18 months, design and engineering moved from the old system to the new one without disrupting how teams shipped.

Feedback from designers and engineers was positive overall. Treasury made the system easier to use and helped teams ship work faster.