Laying the Foundation for Scalable Internal Tools

Our team was tasked with designing custom applications to streamline and accelerate the multiple processes required within the creation of a mortgage. Since Product Design wasn't fully established within the organization, there was no clear UX or visual foundation for new projects. To bridge this gap, I took the initiative to design and develop a front-end framework, providing the team with a solid baseline to build upon.

The Challenge

Without a clear UX or visual foundation, engineers building internal mortgage applications were left without a shared language or design baseline. This slowed down development, introduced inconsistencies, and created friction between teams.

My Role

Discover, define and deliver a scalable baseline for a wider cross-platform design system with UX best practices and design a11y baked in.

Team

Design: Mark Hobbs
Engineering: .NET Team

Educational Opportunity

Given the team's foundational skill sets, this project was an excellent opportunity to share the underlying principles behind our approach. Rooted in Atomic Design principles and the 8px grid system, Fabrication was born. Internally, we affectionately called it Lebowski. Because, much like The Dude, the system abides to platform and user choices.

Fundamental Understanding

Breaking down the why behind the baseline standards and principles of Atomic Design.

Clear and Concise

The basic Foundations of UI are provided as well as the atomic structure of web page elements.

Establishing Visual Harmony Through a Unified Color System

To help create consistency across all applications, a shared color scale was developed using the brand's primary and secondary colors. Along with a complementary tertiary palette that bridged the two. This ensured every visual element, regardless of application, felt like part of the same cohesive system. From a design perspective, this strengthened output consistency and reduced time spent with developers adjusting colors. For developers, it simplified implementation by providing a standardized set of tokens, reducing guesswork and increasing efficiency across teams.

Scales for each parent group

Each parent color was broken into lighter and darker shades, 100-900 with 500 being the primary, via automation. This helps to ensure consistent visuals across the platform.

a11y Documentation

Each color was checked via automation in the markdown file to ensure WCAG 2.0 contrast ratios of 4.5:1 with respect to a11y compliance.

Creating Clarity with Purposeful Typography

Typography is foundational to establishing visual hierarchy, guiding users through dense information with clarity and ease. Given the internal, data-heavy nature of these applications, we prioritized function over flourish. Focusing on legibility, scalability, and consistency grotesk san serif typeface was determined the path . Well-defined typographic styles not only help users process content more efficiently but also streamline development by standardizing styles across screens and components.

Why Typography Matters

Effective typography creates structure, guides attention, and helps users navigate dense information quickly. I's a foundational layer of clarity and especially important in internal tools where speed and precision matter.

Designing with Purpose

By applying atomic design principles to typographic styles, we built a scalable system that brings consistency and readability to every screen. Each style reinforces the hierarchal layout and supports efficient flows byt the internal partners.

View the full Prototype

System Impact and Scalable Outcomes

Following implementation, productivity significantly improved and time to release was reduced by nearly half. One of the biggest hurdles, legacy application compatibility, was addressed through thoughtful versioning of the design system. While the introduction of new styles and naming conventions represented a major breaking change, the system allowed for controlled rollout. Remaining applications were triaged and prioritized based on business needs, enabling a smooth and scalable transition.