A feature enhancement to Leonardo, Adobe’s open-source tool for creating beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.

Columns of colored squares displaying a spectrum of colors and values with their respective contrast displayed as text
Columns of colored squares displaying a spectrum of colors and values with their respective contrast displayed as text

Recently we launched Adobe’s open-source tool Leonardo with the goal of empowering designers and engineers to create accessible-first color palettes. Since then, we’ve been continuing to evolve Leonardo — the engine that drives the adaptive color theme for Adobe’s design system, Spectrum.

This latest update is for authoring adaptive themes in both the npm module and the web tool. This means building out multiple contrast-based color palettes at once, and each output color being based on its contrast with a shared background.


Image for post
Image for post

There are a lot of stories out about naming, naming conventions, and best practices for design systems. Many of these articles have good spirit in the advice, however, as an author and maintainer of enterprise-level, cross-platform design systems, I feel they miss the mark on a few points. This is simply my two cents in practical, future-forward, and realistic advice for naming in design systems.

On the naming of ‘components’, ‘patterns’, and more

Call them components, elements, patterns, interactive-clicky-things — it doesn’t really matter. The best practice here is to find common ground with your company with regards to what they are called, whether that means one team…


Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors. Leonardo now supports full theme generation.

Image for post
Image for post

If you’ve created a color palette for a website or app, you’ve probably encountered a few of the challenges in creating color palettes for user interfaces. One of the most common challenges is meeting accessibility criteria such as a minimum contrast ratios defined by the Web Content Accessibility Guidelines (WCAG). Current tools check the contrast between colors after you’ve selected them, or they output a list of combinations of existing colors that meet the requirements. …


An introduction to these topics in relation to user interface design and design systems.

Map with pin and strings emanating from the pin
Map with pin and strings emanating from the pin

Color is an important aspect of design. The process of choosing a scale of colors has a very close relationship with color science. Color scales are a common method of creating color systems for user interfaces. Color scales help to create a standard color palette with flexibility for use in a variety of ways.


Part three of a three-part series exploring a new approach to creating accessible and perceptually adaptive color palettes in design systems.

Image for post
Image for post
Adobe Spectrum color palette

*Updated based on the release of Leonardo, an open source tool for creating adaptive color palettes*

The entire concept of adaptive color palettes was derived from our experience solving for color in Adobe’s design system, Spectrum. At the time of this work, we supported six different color themes, all of which needed to appear aesthetically related, with similar perceptive contrast with the background colors, and to follow uniform guidelines for accessibility.

We started by generating our gray system based…


Part two of a three-part series exploring a new approach to creating accessible and perceptually adaptive color palettes in design systems.

Image for post
Image for post
Cropped view of Runge Farbenkugel by Philipp Otto Runge [Public domain]

This is why we have created what I refer to as “adaptive color palettes.” These palettes follow a systematic approach, in which designers define constraints that inform the generation of colors, rather than creating static swatches. Colors are defined with respect to their perceptual requirements and relationships, and swatches are generated based on minimal user input.

Accessibility First

First and foremost, we need to set a target contrast ratio. Target ratios allow us to generate color based on the desired contrast…


Part one of a three-part series exploring a new approach to creating accessible and perceptually adaptive color palettes in design systems.

Image for post
Image for post
Cropped view of Runge Farbenkugel by Philipp Otto Runge [Public domain]

So, you’re creating a design system for your company. Your team is furiously working to conceive, build, and audit a system of components and design principles.

As you think about your product’s interface, choosing a color palette is one of the first things you’ll do. If you’re following best practices, you are likely conforming to Web Content Accessibility Guidelines (WCAG). These guidelines define minimum contrast ratios to ensure legibility of content in web interfaces. If you’re not already following…


I hope not to offend; only to enlighten.

What is Design Thinking?

“Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.” — Tim Brown, president and CEO, IDEO

Image for post
Image for post

Design thinking is a fluid, research and data-driven approach to identifying a problem, the people it affects, exploring solutions with users, and continually integrating and improving the solution with the end users. …


Image for post
Image for post

If you’ve worked with themes in you web application, you know how difficult it can be. Usually you end up with multiple stylesheets and a script to swap them out.


Image for post
Image for post

Rethinking how we name and apply colors in our interfaces that have linguistic meaning.

This is a simple change in the way we think about colors and color application in interface design. It’s a change that’s small, and may not seem to add much value to the development principles of your web application’s framework, but the change adds tremendous value in the way we design, implement, and use visual interfaces as a mode of communication with our users.

I’ve mentioned what it takes to create a linguistic design system, and here I’m exploring a practical application for web apps. The concept I’m exploring specifically revolves around color use and semantics.

As designers, we’re already…

Nate Baldwin

Designer on Spectrum, @Adobe’s design system. Intensity curious about color, visual perception, and the systemization of design.

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