Toolsy - Design System
Building a scalable, cohesive design language from the ground up
Our design team created Toolsy, Freddie Mac’s first unified design system — a scalable foundation that brings consistency, efficiency, and accessibility across all digital products.
We built Toolsy entirely from scratch using the atomic design methodology, starting with Atoms (core styles and components), combining them into Molecules (patterns), and evolving them into Organisms (functional modules) that power complex product interfaces across the enterprise.
Process & Approach
Audit & Discovery — Analyzed existing design patterns and UI inconsistencies across business lines to identify fragmentation and duplication.
Design Principles & Tokens — Established the core visual language (color, typography, spacing, motion, and interaction tokens) aligned with brand and accessibility standards (WCAG 2.1).
Component Architecture — Built a library of scalable, reusable components in Figma and defined documentation for usage, states, and developer handoff.
Collaboration & Governance — Partnered with engineering to integrate version control, testing, and contribution workflows, turning Toolsy into a living system that grows with products.
Education & Adoption — Led training sessions and design critiques to help product teams adopt Toolsy and maintain a unified experience across platforms.
Impact
Accelerated product delivery by reducing design-to-development friction.
Increased consistency and quality across Freddie Mac’s digital ecosystem.
Empowered designers and developers to prototype faster and focus on solving user problems — not rebuilding patterns.
Created a sustainable, documented foundation for future product innovation.
Reflection
Toolsy wasn’t just a set of components — it became a shared language between design and engineering.
It taught our team how to scale creativity, maintain coherence, and enable experimentation at an enterprise level.
