A step-by-step guide to bring a design system into your company without losing your mind. — A design system can solve your problems with quality, speed, maintainability, and more. It is seen as a drop-in solution that everyone should have. But is this actually true? Should you start building a design system for your company? And if so, how do you start? This article provides steps…

The success of a design system depends more on stakeholder management than on the quality of its components. — Stakeholder management (also project stakeholder management) is a critical component in the successful delivery of any project, program or activity. ~ wikipedia¹ Stakeholder management is a continuous process of developing a communication strategy² for your project and influencing stakeholders through engagement.

How to use Figma variables to implement different design token strategies — What are design tokens anyway? Design tokens are named entities that store raw, indivisible design values like colors or pixel sizes. They are the core pieces of a design system. Stored in a technology agnostic format they can be transformed for use on any platform, replacing hard-coded values. …

Design tokens for data visualization and more — Presentational tokens bring the color into data visualisation¹ and customizable UI elements. They are the colors used for labels or folders and similar elements. What makes them specific in design token terms is, that they don’t have a semantic meaning. …

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…