A feature enhancement to Leonardo, Adobe’s open-source tool for creating beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.
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.
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.
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.
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.
*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.
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.
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
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. …
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.
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.
