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.