Design Tokens and Dark Mode: How LoanLeaf Unified Their Mortgage App for 10 Platforms

Design · 6 min read

LoanLeaf, a mortgage startup integrated into multiple partner portals, faced a fractured visual system—buttons, input spacing, and error styles varied wildly across platforms. This caused user confusion and long QA cycles. The design team established a single source of truth: a token-driven design system that included color, elevation, spacing, motion, and accessible typography scales.

Implementing tokens required cross-functional alignment. Engineers exposed tokens as hosted packages for React, Swift, Kotlin, and a CSS custom properties bundle for web partners. The system also introduced a dark-mode mapping—not just inverting colors but re-evaluating contrast, elevation, and motion to maintain legibility for long-form document review. Accessibility checks were automated via CI to enforce AA contrast and touch target sizes.

Within four months, LoanLeaf shipped the token packages to all platforms. Feature parity timelines shortened by 35%, and visual regressions in production fell by 80% as measured by visual diffs. Partners appreciated the CSS bundle that allowed quick brand overlays. A side benefit: designers were able to prototype high-fidelity screens with tokens that matched production assets, reducing mismatches between design and engineering handoffs.

The project shows that investing in tokens pays back in cross-platform consistency and engineering efficiency. LoanLeaf’s approach combined pragmatic engineering packages, automated accessibility testing, and an intentional dark-mode strategy to deliver a coherent, maintainable product across ten platform targets.