Denali Design
Published in

Denali Design

Denali components laid out with a split between them that shows the light and dark theme versions

Reimagining Themeable Design Systems With Denali Open Source

Less than a year ago, we open-sourced Denali and since then, Denali has continued to grow both within Verizon Media and the open source community. Along the way, we’ve learned a lot from our users.

In response to that feedback, we’ve been building out new features and refining existing ones. Our themeable feature has remained the top priority, and we focused a lot of our energy towards revamping it to better support customization and reduce payload size. In addition to themeable, we heard requests from the community for SVG implementation of the icon library and increased component coverage. Discussions with designers and developers over the past few months also made it clear that our users need more than just a design system.

As of today, we’ll be focused on transitioning Denali from a design system to a robust designer and developer productivity platform. The product updates we’re sharing with you today pave the way towards that future, and we can’t wait to get started.

A chat box whose visual design changes between two different themes when code is written
Themeing with Denali now provides even greater control over CSS properties.

Themeable Updates

Working alongside so many unique brands at Verizon Media, the need for a framework whose front-end appearance could easily be manipulated to fit any visual style was clear. That’s why themeability has always been a core functionality of Denali’s framework. We put our themeable feature front and center by providing a fully revamped theming workflow. These improvements include the following:

Reduced File Size

Previously, themes were contained in a single CSS file. This resulted in bloated file sizes for projects with multiple themes. Now, themes exist as their own files which enables you to control which themes are loaded into a browser. This allows you to use multiple themes in a single project without the heavy payload.

Increased Customizability

We’ve increased the number of supported CSS properties so you can fully implement the unique visual style of your project. New CSS properties continue to be added and soon you’ll be able to customize just about everything.

The ability to completely retheme Denali’s component library allows you to reap the time-saving benefits a common framework provides without sacrificing originality. In the future, we’ll make theming even easier with a tool that will allow you to retheme Denali components and download the customized CSS framework without ever touching code.

Denali icons organized into a single file
Denali’s entire icon library is now available as a single SVG file.

SVG Icon Library

You can now implement the entire icon library as a single, bite-sized, SVG file. When we initially launched, we provided our icons as an icon font to allow for easy implementation of the entire icon library, but after speaking to users we discovered that development with SVGs is sometimes preferable to an icon font. The SVG file launching today is 783kb and contains our entire icon library, which is notably smaller than having to load all the icon font files at 2387kb.

Moving forward, we will optimize SVG implementation by enabling you to choose which icons you load into your project via an icon builder, which will further reduce file size. For now, our icon library will continue to be supported through font, png, and single-icon SVGs in addition to our new SVG icon library solution.

New Denali components displayed over a bar chart that shows a 30% increase in component coverage
Denali’s component coverage has increased by 30% from our initial release.

Increased Component Coverage

We spoke to product teams actively developing with Denali to determine which components they needed the most. We narrowed down the most highly requested of those components and added them to Denali’s framework, resulting in a 30% increase in Denali’s component coverage. These freshly minted components include lists, block-level alerts, tooltips, button groups, and much more.

What’s Next

Moving forward we’re shifting our focus towards transforming Denali into a productivity tool. That being said, we’re not forgetting our roots. We’ll continue to grow the design system you’ve come to know and love with IE9 support, an expanded charting library, and even more components.

Let us know which of today’s announcements you found most exciting and any features you’d like to see launched in the future in the comments below or on Twitter @Denali_Design.

Banner encouraging readers to click to visit Denali’s GitHub page where they can contribute

--

--

--

Open source themeable design system

Recommended from Medium

FeedsOn Case Study Notes (Ongoing)

Old Oak co-live/work space in London

Landing Page Issues Evaluation — Lion Bridge ad accessor

This is not a CHAIR Blog/Signs and Symbols

Top Kitchen and Bath Ideas from the Pros

HOW I GOT AN AMAZING LOGO FOR MY BRAND   Have you ever thought about designing a logo for your…

Keep fighting: The power of the protest graphic

A look at Google’s micro-moments and how to make use of them

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jazmin Orozco

Jazmin Orozco

Product Designer at Verizon Media

More from Medium

What is a design system?

How to edit your product like a <developer> 🤘

Flycode.com

Solution architecture for AI … and the meaning of design

Essential tools for user onboarding