Design considerations for crafting a great dark mode. — In this article I discuss the key aspects to consider when designing a dark mode/theme. Everything from colors and shadows to icons and typography. This is a two-part series: Implementing dark mode Designing dark mode What is dark mode? You can skip this if you have read part one of the series. Dark mode…

How to implement dark mode with as little effort as possible — This article discusses everything from triggering dark mode, to setting up design tokens to get automatic dark mode for all components. This is a two part series: 1. Implementing dark mode 2. Designing dark mode Introduction: Dark mode — what is it? Dark modes emit low levels of light while maintaining a high standard of usability. Source…

Find out how to make the icons in your design system accessible with a few simple steps. — In part 1 of design system accessibility I discussed the topic of colors. Part 2 focuses on another really important aspect: Icons. Icons are a major part of any modern interface. They are functional and add a pleasing visual at the same time. If designed well, they are easy and…

How to effectively name your design tokens in a systematic and future-proof way. — Design tokens are the single source of truth for design primitives like colors or tokens. If you are new to the topic, you may want to learn the basics of design tokens first. Note: This article aims to be an exhaustive reference for naming design tokens. If you find some…

Design systems are often seen as a way to improve accessibility. Some even say that you get accessibility for free by using a design system. But what do you have to do, to make your design system accessible? The consumers of a design system, designers & developers, do get accessible…

By now everyone seems to know that design systems are great. They make your work easier, faster and cheaper, you don’t even need designers anymore — or do you? — In this article I will talk about the known and not so well known benefits of implementing a design system. And before you get the wrong idea: no, you can’t fire all designers. A design system is an ever-evolving, living system. …

You may know what design tokens are and what benefits they can bring. But you may wonder how exactly to start using them and how you can integrate them into your workflow. I this article you will learn just that: How to lean on design tokens to make better design…

Translating designs into products is hard! Learn how design tokens make building products easier for both designers and developers. — Design tokens ease building products by improving the communication around design. They help scale your product by separating design decisions from specific platforms & technologies. They improve communication with build-in documentation & promoting design decisions out of design files.