Sravan.
Streamlining design and development workflows for a consistent user experience.
eLockr lets companies issue digital, fraud-proof work records. For the first year, I was the sole designer. I moved fast and kept every design rule—like specific blues and button padding—in my head. With only one person touching the files, I didn't need documentation.
As the design team expanded, inconsistencies emerged in color usage, typography, and spacing. Design reviews shifted focus from solving user problems to debating technical pixel values. The lack of a shared source of truth created a bottleneck and led to "design drift" across different product features.
A scalable, logic-first design system was built using an incremental approach and Figma Variables. Key implementation steps included:
Standardized a 50–900 scale for neutrals and brand colors, then mapped them to semantic names (e.g. Surface/Error) so we could rebrand or add modes by updating one place.
Mapped primitives to intent-based semantic names (e.g., Surface, Error, Primary) so one change could update the entire system.
Mapping colors to intent-based names (e.g., Surface/Error) to allow for easier future rebranding or theme updates.
Creating standardized tokens (S, M, L) for spacing and corner radiuses to align design language with engineering code.
Accelerated the onboarding process for new designers and reduced time spent on repetitive UI queries.
Border/Default tokens killed the 'Which grey?' guesswork.
Three designers, zero drift—all screens looked like one person built them.
Engineers mapped tokens to CSS, killing the spacing guesswork.
