daxko
A Scalable Design System for SaaS Excellence
Role: Senior Art Director & Lead UI Designer
Expertise: UI Systems Architecture, Figma Variable Management, Responsive Design
Daxko required a visual evolution that could scale across a diverse product ecosystem. I architected a comprehensive design system in Figma using atomic design principles to ensure brand consistency across all digital touchpoints, from core web pages to dark-mode optimized marketing assets.
The Challenge: Visual Fragmentation
As Daxko expanded, their digital presence became siloed. The brand lacked a unified visual language, making it difficult for marketing and product teams to launch new assets without manual, redundant design work. The goal was to create a "single source of truth" that was both aesthetically elevated and technically rigorous for handoff.
The Solution: A Variable-Driven Figma Ecosystem
Instead of designing static pages, I built a living library of components that leveraged the latest Figma features to streamline the design-to-production pipeline.
Atomic Component Architecture
Using Atomic Design principles, I broke the UI down into its smallest elements—atoms, molecules, and organisms.
Scalable Libraries
Every button, input, and card was built as a master component with nested instances, allowing for global updates in seconds.
Auto-Layout Precision
I utilized advanced reflowing auto-layout techniques to ensure all components and page layouts were fully responsive and fluid across desktop, tablet, and mobile breakpoints.
click or tap a thumbnail to embiggen
Advanced Variable Logic & Modes
To solve the complexity of Daxko’s multi-device and multi-theme needs, I implemented Figma Variables:
Theme Switching
By utilizing variable modes, I enabled instant switching between Light and Dark modes for the entire design system, ensuring accessibility and visual harmony in any environment.
Semantic Tokens
I established a robust naming convention for color and spacing variables, creating a seamless bridge for developers to implement the design with zero ambiguity.
click or tap a thumbnail to embiggen
The Execution: Core Web & Marketing
The resulting design system was stress-tested across Daxko’s most high-traffic surfaces.
High-Conversion Hero Modules
I crafted themed hero modules that highlighted specific product verticals (YMCA, JCC, etc.), using a full palette of brand colors and patterns inspired by the new branding. Each module was designed to be modular—allowing for rapid assembly of new pages without breaking the grid.
click or tap a thumbnail to embiggen
Responsive Web Design
Full-Screen Navigation
I designed a versatile full-screen takeover menu to facilitate easy navigation while remaining scalable as Daxko’s content system grows.
Data-Driven Layouts
I established a robust naming convention for color and spacing variables, creating a seamless bridge for developers to implement the design with zero ambiguity.
The Results: Efficiency at Scale
The shift from a "page-by-page" approach to a system-driven approach transformed the internal workflow:
Handoff Optimization
By providing developers with a variable-mapped Figma file, we eliminated design debt and reduced front-end QA time.
Brand Consistency
The atomic library ensured that every new campaign adhered 100% to the new Daxko brand standards, regardless of the designer involved.
Future-Proofing
The system is built to grow; adding a new sub-brand or theme now takes minutes rather than weeks.