Architected a tokenized, dual-theme design system for a 120K+ user analytics platform to scale rapid feature development.
Marketing Analytics
Lead Design Engineer & Systems Architect
4 Weeks • 2025
Figma, Design Tokens, React, Tailwind CSS
Core Metric Performance
SnapVista is a high-traffic marketing analytics dashboard serving over 120,000 active users. As the platform scaled, design inconsistencies and a lack of reusable frontend components severely bottlenecked the engineering team.
This project focused on architecting a robust, scalable design system from the ground up, engineering a seamless dark and light mode architecture that eliminated development ambiguity and drastically accelerated the time it takes to ship new features.
Critical bottlenecks identified during stakeholder and user discovery.
Engineers were repeatedly rebuilding identical UI elements from scratch, resulting in visual regressions and bloated codebases.
The lack of standardized color semantics made implementing a unified dark mode nearly impossible without hardcoding hundreds of overlapping hex values.
Static design files left developers guessing at hover states, transitions, and responsive behaviors, slowing down the QA cycle.
Engineered solutions designed for density, accessibility, and high adoption.
Engineered a scalable atomic design system with over 200 interconnected components, establishing a single source of truth for the entire platform.
Created a mathematically precise color token hierarchy that allowed instantaneous toggling between light and dark modes with zero accessibility or contrast degradation.
Mapped every Figma component directly to its corresponding Tailwind utility class and React prop structure, transforming static mockups into explicit engineering contracts.
Core Metric Performance
Tokenized System Variables & Component Architecture
Core Metric Performance
Atomic Design System & Production-Ready Token Library
Conducted a comprehensive UI audit of the legacy dashboard to identify redundant elements and establish a foundational primitive token library.
Architected the light and dark mode color matrices, mapping raw hex values to functional, predictable semantic tokens (e.g., surface-primary-dark).
Prototyped complex interactive data visualizations and data tables across both themes to stress-test WCAG contrast ratios and visual hierarchy.
Partnered directly with the frontend team to mirror the Figma architecture perfectly in code, ensuring the token system scaled without breaking the live product.
The reusable component library allowed engineers to assemble new analytics dashboards in days rather than weeks.
Delivered a fully comprehensive UI kit that now serves as the operational baseline for all future product iterations.
Achieved near-total alignment between design and engineering, practically eliminating CSS-related visual bugs and QA tickets.
Core Metric Performance
Light Mode Analytics Console — High Density Data UX
Core Metric Performance
Dark Mode Analytics Console — Semantic Dual-Theming
End-to-end interface execution: High-density interactive workflows, component states & responsiveness
HD • 60 FPSEsther’s mastery of scalable design systems is incredible. She built an adaptive framework that effortlessly organizes dense analytics data.