<p>By <a href="https://www.linkedin.com/in/jazminorozco/">Jazmin Orozco</a>, Product Designer, Verizon Media<br/></p><figure class="tmblr-full"><img src="https://66.media.tumblr.com/01f9410421e845f6abed5b3f8366773c/tumblr_pviqduypvB1umpcbgo1_1280.pnj" alt="image"/></figure><p>As designers on the Platforms and Technology team at Yahoo (now Verizon Media), we understand firsthand that creating polished and intuitive user interfaces (UI) is a difficult task - even more so when projects do not have dedicated resources for UI design. In order to provide a solution to this, we created an easy plug and play approach called Denali. </p><p><a href="https://denali-design.github.io/denali-site/">Denali</a> is a comprehensive and customizable design system and CSS framework that provides a scalable approach to efficient UI design and development. Denali has worked so well for us internally that we’ve decided to share it with the open source community in the hope that your projects may also benefit from its use. </p><p>Denali is rooted in our experience designing for a wide variety of platform interfaces including monitoring dashboards, CI/CD tools, security authentication, and localization products. Some of these platforms, such as <a href="https://screwdriver.cd/">Screwdriver</a> and <a href="https://www.athenz.io/">Athenz</a>, are even open source projects themselves. <br/></p><figure class="tmblr-full"><img src="https://66.media.tumblr.com/97df96da264f1d8b3e06278c931973f3/tumblr_pvir1wSjOo1umpcbgo1_1280.png" alt="image"/></figure><p>When creating Denali we audited these platforms to create a library of visually consistent and reusable UI components. These became the core of our design system. We then translated the components into a CSS framework and applied the design system across our products. In doing so we were able to quickly create consistent experiences across our product family. </p><p>As a whole, Denali allows us to unify the visual appearance of our platform product family, enhance our user’s experience, and facilitate efficient cross-functional front-end development. We encourage you to use Denali as the UI framework for your own open source projects. We look forward to your feedback, ideas, and contributions as we continue to improve and expand Denali.</p><p>The Denali Design System simplifies the UI design and development process by providing:</p><ul><li>A component library with corresponding front-end frameworks</li><li>Customization for themes</li><li>An icon library with a focus on data and engineering topics such as data visualization, CI/CD, and security</li><li>Design principles<br/></li></ul><p><b>Component Library and Frameworks</b></p><figure class="tmblr-full"><img src="https://66.media.tumblr.com/807322d89675ccd898bf11d26d1a44d9/tumblr_pvir3fc5xU1umpcbgo1_1280.png" alt="image"/></figure><p>Denali’s component library contains 20+ individual component types with a corresponding CSS framework. Components are framework independent allowing you to use only what you need. Additionally, we’ve started building out other industry-leading frameworks such as Angular, Ember, and React.</p><p><b>Theme Customization</b></p><figure class="tmblr-full"><img src="https://66.media.tumblr.com/b7cff5847194c2c2350319f0d539b1fe/tumblr_pvir9rF3gG1umpcbgo1_1280.gif" alt="image"/></figure><p>Denali’s components support theming through custom variables. This means their visual appearance can be adapted easily to fit the visual style of any brand or catered towards specific use cases while maintaining the same structure.</p><p><b>Data and Engineering Focused Icon Library</b></p><figure class="tmblr-full"><img src="https://66.media.tumblr.com/b8879122cd129ab78b6085176f6faca3/tumblr_pvir3yyH981umpcbgo1_1280.png" alt="image"/></figure><p>Denali’s custom icon library offers over 800 solid and outline icons geared towards engineering and data. Icons are available for use as svg, png, and as a font. We also welcome <a href="https://github.com/denali-design/denali-icon-font/issues/new?labels=icon-request">icon requests</a> through GitHub.</p><p><b>Design Principles</b><br/></p><figure class="tmblr-full"><img src="https://66.media.tumblr.com/a39490b0473e1245e8a475b5ac0984d4/tumblr_pvir4koC0d1umpcbgo1_1280.png" alt="image"/></figure><p><b><br/></b>Denali’s comprehensive Design Principles provide guidelines and examples on the proper implementation of components within a product’s UI to create the best user experience. Additionally, our design principles have a strong focus on accessibility best practices. <b><br/></b></p><p>We are excited to share Denali with the open source community. We look forward to seeing what you build with Denali as well as your contributions and feedback!</p><p>Stay tuned for exciting updates and reach out to us on twitter <a href="https://twitter.com/@denali_design">@denali_design</a> or via <a href="mailto:denali@verizonmedia.com">email</a>. </p><p><b>Acknowledgments</b></p><p><a href="https://www.linkedin.com/in/romeot/">Jay Torres</a>, <a href="https://www.linkedin.com/in/chasturansky/">Chas Turansky</a>, <a href="https://www.linkedin.com/in/marcosandovaldesign/">Marco Sandoval</a>, <a href="https://www.linkedin.com/in/chrisesler/">Chris Esler</a>, <a href="https://www.linkedin.com/in/denchen/">Dennis Chen</a>, <a href="https://www.linkedin.com/in/jon-kilroy-52545b4/">Jon Kilroy</a>, <a href="https://www.linkedin.com/in/gilyehuda/">Gil Yehuda</a>, <a href="https://www.linkedin.com/in/ashleywolf/">Ashley Wolf</a>, <a href="https://www.linkedin.com/in/rosaliebartlett/">Rosalie Bartlett</a></p>