Blog post sections to house your latest thoughts and musings.
<div class="has-bg-grey-100 p-20"><h1>Introducing Denali: A Themeable Design System</h1><div class="flex tablet-down-flex-column space-between m-t-30"><div class="flex"><img class="nav-brand h-8 w-8 m-r-6" src="/images/play/content-img-small.png" alt=""><div class="m-x-5"><p class="bold">Team Denali</p><p>Jan 14, 2020 • 8 min read</p></div></div><div class="flex align-items-center m-x-5" style="opacity: .8;"><i class="d-icon d-twitter is-large is-brand-300 p-5"></i><i class="d-icon d-facebook is-large is-brand-300 p-5"></i><i class="d-icon d-linkedin is-large is-brand-300 p-5"></i></div></div><div class="box bg-size-cover m-t-30" style="height: 446px;background-image: url('/images/play/content-img-1.png');background-position: bottom;border:none;"></div><div class="p-x-100 m-t-48"><h3>Platforms Design at Yahoo</h3><p class="m-t-15">From monitoring and CI/CD to security authentication and localization, <span class="link"> Yahoo </span> has an extensive platform product portfolio. Creating and maintaining these products is a massive and exciting challenge. While each platform product has its own dedicated engineering team, design for the entire platform product family is the responsibility of the Platforms and Technology design team.</p><p class="m-t-20">Initially, we worked on only a handful of platform products directly, but as the positive impact of our work became apparent, we began to receive design support requests from additional teams. The prospect of collaborating with these teams excited us. However, if we wanted these new partnerships to be successful, we needed to find a way to scale our design workflow in a way that would allow us to work cross-functionally with a broader range of products and engineering teams.</p></div><div class="box bg-size-cover m-t-30" style="height: 446px;background-image: url('/images/play/content-img-2.png');background-position: bottom;border:none;"></div><div class="p-x-100"><p class="is-grey-700 upper font-12" style="text-align:center;">With so many platform products, we needed to find a way to scale</p><h3 class="m-t-45">Discovering Opportunities to Scale</h3><p class="m-t-15">Before forging these new partnerships we explored our existing platform product family and workflow to identify opportunities for growth. An audit of our platforms revealed that they shared the same components (buttons, navigation, selection controls, etc) but the visual design and user experience of the components varied from product to product.</p><p class="m-t-15">Based on these findings it became clear that the solution was to develop a design system of visually consistent components and a corresponding front-end framework. The unified visual design of these components would allow front-end developers from multiple products to work cross-functionally to develop them. This would result in a universal framework that could be used by all of our platform products rather than just one. <span class="link">This thinking led to the creation of Denali — a scalable, comprehensive, and themeable design system. </span> Overtime, Denali allowed us to unify the user experience across our platform product family and facilitate efficient front-end development.</p><h3 class="m-t-38">The Denali Design System</h3><p class="m-t-15"><span class="link">Denali</span> is Yahoo’s first platform focused design system. It caters to the needs of our platform products by providing the following:</p><ul class="m-t-20 list"><li><span class="link">Component library</span> with corresponding front-end frameworks</li><li>Customization for themes</li><li>Engineering focused <span class="link">icon library</span></li><li><span class="link">Design principles</span></li></ul><h4 class="m-t-23">Component library and frameworks</h4><p class="m-t-10"><span class="link">Denali’s component library</span> contains 18+ individual component types with a corresponding CSS framework. Components are framework independent allowing you to take what you need and leave the rest. Additionally, our partnerships with engineers across our product family have allowed us to begin building out other industry-leading frameworks such as Angular, React, and Ember.</p></div><div class="box bg-size-cover m-t-45" style="height: 446px;background-image: url('/images/play/content-img-3.png');background-position: bottom;border:none;"></div><div class="p-x-100"><p class="is-grey-700 upper font-12 m-t-10" style="text-align:center;">Denali’s alerts and their corresponding HTML structure</p><h3 class="m-t-45">Customization for themes</h3><p class="m-t-15">Denali’s components support theming through custom variables meaning they can easily be adapted to fit the visual style of any brand or used to create accessible themes, all while maintaining the same CSS structure.</p></div><div class="box bg-size-cover m-t-45" style="height: 446px;background-image: url('/images/play/content-img-4.png');background-position: bottom;border:none;"></div><div class="p-x-100"><p class="is-grey-700 upper font-12 m-t-10" style="text-align:center;">Creating custom themes with Denali is easy with our single config file</p><h3 class="m-t-50">Engineering focused icon library</h3><p class="m-t-15"><span class="link">Denali’s custom icon </span> 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 icon requests.</p></div><div class="box bg-size-cover m-t-45" style="height: 446px;background-image: url('/images/play/content-img-5.png');background-position: bottom;border:none;"></div><div class="p-x-100"><p class="is-grey-700 upper font-12 m-t-10" style="text-align:center;">Icons from Denali’s extensive icon library</p><h3 class="m-t-50">Design Principles</h3><p class="m-t-15">Don’t have access to a dedicated designer? Our comprehensive <span class="link">Design Principles</span> provide guidelines and examples on the proper implementation of our components to help you create a seamless user experience.</p></div><div class="box bg-size-cover m-t-45" style="height: 446px;background-image: url('/images/play/content-img-6.png');background-position: bottom;border:none;"></div><div class="p-x-100"><p class="is-grey-700 upper font-12 m-t-10" style="text-align:center;">Denali’s principles provide guidance with design “Do’s and Dont’s”</p><h3 class="m-t-47">What’s Next</h3><p class="m-t-15">Denali was open-sourced in the Summer of 2019. Stay tuned for exciting updates in the coming quarters. Reach out to us on twitter <span class="link">@denali_design</span> or via <span class="link">email</span> and check out the Denali design system at <span class="link">Denali.Design</span>.</p><div class="m-t-50"><span class="chips is-small undefined is-undefined">Design</span><span class="chips is-small undefined is-undefined">Design Thinking</span><span class="chips is-small undefined is-undefined">Design Systems</span><span class="chips is-small undefined is-undefined">Design Process</span><span class="chips is-small undefined is-undefined">Design Patterns</span></div><div class="m-t-50"><i class="d-icon d-heart-like is-small is-color-grey-700"/></i> 51<i class="d-icon d-comment-blank is-small p-l-15 is-color-grey-700"></i> 10</div></div></div>