THERESA LAU
LineSlip Solutions
Scalability and Accessibility for B2B
Scalability and Accessibility for B2B
Scalability and Accessibility for B2B
I assisted LineSlip Solutions, a B2B company that helps commercial insurance professionals manage and analyze data, to build a scalable design system and component library in Figma. After auditing their internal SaaS platform, I created a consistent, reusable visual foundation to support future rebranding and streamline design and development across their product team.
The challenge
The challenge
Audit and reduce clutter
Audit and reduce clutter
Audit and reduce clutter
During the audit, I identified outdated components, unused styles, and inconsistencies across the design library that made the system difficult to scale. I streamlined it by aligning key elements with the brand—removing clutter and introducing a unified colour palette, tokens for spacing, icons, and typography, along with purposeful components to ensure clarity, consistency, and scalability.
During the audit, I identified outdated components,
unused styles, and inconsistencies across the design library that made the system difficult to scale.
I streamlined it by aligning key elements with the brand—removing clutter and introducing a unified colour palette, tokens for spacing, icons, and typography, along with purposeful components to ensure clarity, consistency,
and scalability.
During the audit, I identified outdated components, unused styles, and inconsistencies across the design library that made the system difficult to scale. I streamlined it by aligning key elements with the brand—removing clutter and introducing a unified colour palette, tokens for spacing, icons, and typography, along with purposeful components to ensure clarity, consistency, and scalability.
Establishing a Scalable Visual Language
Establishing a Scalable Visual Language
Defining Foundations for a Scalable System
Defining Foundations for a Scalable System
Defining Foundations for a Scalable System
I first clarified the purpose behind colours and buttons before turning them into tokens, which helped bring more clarity and scalability to the system. Using foundational atoms and smart variants, I built responsive, flexible components that kept the UI consistent and easy to maintain. The result was a much cleaner design file that set the stage for a full design system—and it got great feedback from the product team.
I first clarified the purpose behind colours and buttons before turning them into tokens, which helped bring more clarity and scalability to the system. Using foundational atoms and smart variants, I built responsive, flexible components that kept the UI consistent and easy to maintain. The result was a much cleaner design file that set the stage for a full design system—and it got great feedback from the product team.
Lessons learned
Lessons learned
Results and takeaways
Results and takeaways
Results and takeaways
The outcome was a cleaner, more maintainable design file and a centralized library with clear documentation. The new system helped developers ship designs faster and with fewer inconsistencies. For me, it was also a mindset shift—from focusing purely on visuals to thinking more systematically. It made my workflow in Figma more efficient and deepened my appreciation for the value of a shared design language across teams.
The outcome was a cleaner, more maintainable design file and a centralized library with clear documentation. The new system helped developers ship designs faster and with fewer inconsistencies. For me, it was also a mindset shift—from focusing purely on visuals to thinking more systematically. It made my workflow in Figma more efficient and deepened my appreciation for the value of a shared design language across teams.
