Denali V2 Design System
Building on the foundation of Denali V1, Denali V2 redefined the enterprise ecosystem. It introduced scalable workflows, accelerated product launches, and enhanced cross-functional collaboration. Streamlining design and development processes, Denali V2 enabled teams to develop faster, with fewer errors and greater visual design consistency.


Strategy
The vision for Denali V2 was to create an efficient, scalable design system that aligns with Yahoo’s goals.
Unified Ecosystem: The design system would integrate with new and legacy platforms, ensuring consistent user experiences across products
Impactful Outcomes: Every component feature provided documentation, enabling teams to focus on development rather than reinventing components.
Planning
The development of Denali V2 followed a transparent roadmap that balanced immediate needs and long-term goals.
Iterative Development: Insights from user research and regular critiques allowed the design team to continuously refine components and features to meet technical and design standards.
Flexibility for Growth: The roadmap was designed to be adaptable, enabling seamless integration of future innovations without disrupting existing workflows.
Collaboration
Strong partnerships across design, engineering, and product teams made Denali V2 a success
Cross-Functional Integration: Regular sprints and shared feedback sessions fostered alignment, ensuring smooth implementation and minimizing rework.
Shared Ownership: Empowering every team member with a voice created a sense of collective responsibility, elevating the quality of the final product.
Denali V2 was built to leverage advanced frameworks to enhance productivity and accessibility
React Components
Designed and coded with TailwindCSS and React Aria to create accessible, modular, and visually consistent web components.
Yahoo Remix Stack
Tailored with essential tools to simplify the creation and integration of modern web applications
CSS Class Compatibility
Universal design ensured seamless integration with legacy and new systems, broadening its usability across teams.
Primary Style and Structure

Color Palette Samples

Component Samples

Darkmode

Mondular Design Framework

Button Behavior

600+ Custom Icons

Using Storybook for documentation separates components from content, enabling teams to focus on building consistent and scalable designs.



Results
Accelerated Development
The design process enabled faster component creation, reducing time spent on repetitive tasks by 65% and allowing teams to deliver features more efficiently.
Enhanced Quality
Concise documentation and standardized workflows reduced errors and improved product consistency.
Improved Team Efficiency
Alignment between design and engineering resulted in smoother handoffs, fewer iterations, and faster completion, with project timelines improving by 70% on average.
Wasteful Spending Reduction
The integration of React Aria ensured products were accessible to a broader audience, achieving WCAG compliance across 95% of components.