Airties Design System
The Challenge
Airties faced a fragmented design landscape across its three main product lines. The existing system was weak, leading to inconsistencies across white-labeled customer UIs and core products like Airties Pro. The challenge was to architect a unified, scalable Design System that could serve all screen sizes and product variations while integrating seamlessly with legacy codebases. This wasn't just a UI refresh; it was a fundamental restructuring of how product, design, and engineering teams collaborate.
The Process
We adopted a rigorous, step-by-step approach to build the system from the ground up, ensuring every decision was documented and scalable.
1. Foundation & Style Guide
We started by defining the core DNA of the system: Global Colors, Grid Systems, Spacing, and Elevation. This phase established the visual language that would unify all products.
2. Variables & Token Architecture
We architected a robust token system using CSS variables, organized into four distinct layers to ensure maximum scalability:
- Global Tokens: Foundational values for colors, spacing, and typography.
- Alias Tokens: Semantic abstractions specific to different product lines.
- Mapped Tokens: Handling light/dark themes and white-label customizations.
- Device Scales: Responsive adjustments for various screen sizes.
This structure allows for seamless theming and rapid white-labeling updates across platforms (VueJS, Flutter).
3. Atomic Design Approach
Following the Atomic Design methodology, we broke down interfaces into Atoms, Molecules, and Organisms. To empower our design team, we created interactive Component Playgrounds for every element. These allow designers to test component behavior, variable changes, and responsiveness in real-time before handover.
The Solution
The result is a comprehensive system featuring both Global and Local Component Libraries, backed by a robust documentation site (design.airties.com). We successfully deployed production-ready code components for VueJS and Flutter, ensuring seamless implementation across platforms. Crucially, the system is WCAG and EAA compliant by default, ensuring accessibility is baked into the foundation. This unification has drastically improved the look and feel of all web and mobile UIs, providing a premium, consistent experience for every user while acting as a "single source of truth" for our teams.
