Building your w3c standard design tokens with style dictionary — Who is the w3c and who is working on design tokens? The World Wide Web Consortium (W3C) is an international community¹. It’s led by Tim Berners-Lee² and Jeffrey Jaffe. Together with organizations, a full-time staff, and individual developers they develop web standards³. Founded in 1994, as of march 2022, the W3C had 459 members¹. …

Actionable tips on how to nail WCAG 2.1 color compliance. — What is WCAG Web Content Accessibility Guidelines (WCAG) define rules, that make your product accessible to people with disabilities.¹* The WCAG is an open standard developed by the w3c together with individuals and orgs around the world. (Like all other w3c standards). * Being general guidelines following the WCAG won’t make your product…

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…