top of page

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.

DenaliImageBkgrd.jpg
Denali Intro Image
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

PrimaryDesignStyle1.jpg

Color Palette Samples

Color.jpg

Component Samples

DataEntry3.jpg

Darkmode

Mondular Design Framework

ModularFramework.jpg

Button Behavior

ButtonFramework.jpg

600+ Custom Icons

600+ Icons
Using Storybook for documentation separates components from content, enabling teams to focus on building consistent and scalable designs.
color-documentation.jpg
heading-documentation.jpg
icon-documentation.jpg

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.

All Projects

bottom of page