Wasai AI - Foundational Design System
Hired as a freelancer to build a comprehensive design system from the ground up for an AI image generation platform. Delivered a scalable foundation with essential components, variants, and a complete theming system supporting both light and dark modes.
The Challenge
Wasai AI needed a design system that could scale with their rapidly evolving AI image generation products. The team required a foundational system that would enable consistent design decisions across multiple product features while maintaining flexibility for future growth. The system needed to support both light and dark modes from day one, as their users frequently worked in different lighting environments.
Strategic Approach
Rather than building an extensive library of components upfront, I focused on creating a minimal but robust foundation. This approach prioritized quality over quantity, ensuring each component was thoroughly designed with proper variants and states before moving to the next.
The system was built using Figma's variables feature, allowing for dynamic theming and easy maintenance. By establishing clear naming conventions and organizational patterns early, the design system became intuitive for the team to use and extend.
Component Architecture
The design system included essential UI components carefully selected based on the product's immediate needs: buttons, inputs, cards, modals, and navigation elements. Each component was designed with multiple variants to handle different use cases while maintaining visual consistency.
By minimizing the number of components and maximizing their flexibility through variants, the system remained easy to learn and implement. This strategic reduction prevented component bloat and ensured the team could quickly find and use the right elements.
Variables & Theming System
Implemented a comprehensive variable system covering colors, typography, spacing, and effects. The color system was structured to support seamless switching between light and dark modes, with semantic tokens that automatically adjusted based on the active theme.
Text variables ensured typographic consistency across all components, while spacing variables created a harmonious rhythm throughout the interface. This variable-first approach made global updates effortless and maintained design consistency at scale.
Impact & Results
The design system achieved 100% adoption across the product team immediately after delivery. Designers and developers praised the system's clarity and ease of use, noting how the minimal component approach actually accelerated their workflow rather than overwhelming them with choices.
The variable-based theming system proved particularly valuable, allowing the team to experiment with different color schemes and make brand adjustments without touching individual components. The foundational system continues to serve as the backbone for Wasai AI's product development, scaling gracefully as new features are added.