Establishing ThirdAI’s First Design System
A flexible and accessible design system that brings consistency, structure and alignment to fast-growing product
@ThirdAI Automation
When I joined, the platform was built entirely by engineers - with no design guidelines, no visual standards, no foundation for scale.
So I built one.
Timeline
My Role
Tools
Jan - May 2025
UX Design Intern (Capstone project)
Figma, FigJam, shadcn/ui
Overview
As the first and only designer at ThirdAI, I initiated and built the company’s first design system to improve usability, reduce inconsistencies, and lay a scalable foundation for future development.
Discovery & Audit
Before jumping into the actual design work, I was immediately struck by the lack of consistency and structure across the platform.
It became clear that the first priority should be establishing a solid foundation. To better understand the scope of the problem, I conducted a quick site audit and identified the following issues:
My Goal
I set out to create an accessible design system that would:
Provide a foundation for consistency and scalability,
Improve cross-functional collaboration,
Accelerate product development.
From Atoms to Systems
It was my first time building a design system from the ground up, and at first, I wasn’t sure where to begin. During my research, I came across the Atomic Design methodology, which gave me the structure I needed.
By breaking down interfaces into smaller, reusable building blocks within a modular hierarchy, I was able to think systematically about how to create consistency across the platform.
Define & Ideation
The Foundations
I started by defining the foundations—color tokens, typography scales,layout grids and shadow styles. These became the core elements that powered all future components and ensured that every piece of the interface spoke the same visual language.
The Components
To ensure the system is consistent and scalable in the future, I followed Atomic Design principles, built nested components, used component properties to simplify variants — and aligned my designs with shadcn/ui to streamline implementation.
Engineering-Aligned Design Decisions
1. Integrating with shadcn/ui
To ensure a smoother handoff and reduce implementation time, I proposed to incorporate shadcn/ui, an existing React component library, and aligned many components with it.
Instead of reinventing every component from scratch, I mapped my designs to existing shadcn elements where possible, then customized them to match our product needs, branding, and interaction patterns.
This approach allowed us to:
Move faster in development
Ensure design and code were speaking the same language
Maintain flexibility to scale or override when needed
2. Designing for Dark Mode
To support future dark mode without slowing down development, I focused on building a scalable color system with semantic tokens. This allowed engineers to apply dark theme styles directly in code, balancing delivery speed with long-term design consistency.
After Implementing The Design System
💼 Impact on the Team
Sped up development with reusable components
Reduced friction during design handoff
Improved communication between design and engineering
👤 Impact on Users
More consistent experience across the platform
Clearer, more predictable UI patterns
Foundation for future scalability and dark mode
🎉 Ultimately, the design system empowered both the team and the product to move faster with more confidence and clarity!