Takes best served hot
Recently, I watched a video by Colin & Samir speaking about a situation Hank Green is currently facing. Hank was recently accused of using AI in a video script because he said the words “I appreciate the pushback.” Hank went on to address not only that particular video but also transparently explained his AI usage. Even with that transparency, there was backlash. Long-time followers of Hank were…
After finishing a live show with Christine Vallaure last week, she sent me a message asking about the setup for my show. At first I remembered that I made a post about the behind-the-scenes of the show on this blog, but then I saw the date— two and a half years ago . A lot has changed since then, and I felt this was a good time to share what has changed. Concept In the original post, I spoke about…
Over the years, I’ve seen some folks choose to create tokens such as --color-black . And those tokens get completely inverted in dark mode, which confuses teams, who then reach for something more semantic. The funny thing is, designers say black but don’t often mean black . More often, they expect a color like #111 or eigengrau . One reason people reach for primitive tokens like this is to…
In the most recent Wireframe live show , Dan Abramov came on to talk about his excitement over the new AT Protocol . The AT Protocol is a new web standard that allows for decentralized social networking. It is designed to be more inclusive and accessible than existing social media platforms. Before the chat, I only really knew the protocol as the layer informing Bluesky. I tried learning more…
I am not a lawyer and this is not legal advice. I am an experience architect and this is my perspective on how law influences how we design. There’s a moment in nearly every project where the work stops being about the user. Someone from legal joins the call, and suddenly the clean flow we spent weeks refining has to grow a checkbox, a banner, a paragraph of fine print, or an entire screen that…
[O]rganizations which design systems (in the broad sense used here) are constrained to produce designs which are copies of the communication structures of these organizations. — Melvin E. Conway I felt like I’ve heard of “Conway’s Law” before, but I think I was confused with John Conway . I thought the law had something to do with mathematics and his Game of Life and numerous videos on Numberphile…
Doomscrolling last week, I came across a post with the word “eigengrau”. The post said that it was “the color you see when you close your eyes”. It even included a hex color associated with it: #16161D . That immediately made me think of all the posts I’ve seen on the Internet about how you shouldn’t use #000 as black and instead use something softer like #111 . I was connecting the dots: if this…
Over at the Design Systems House website , I made a small toggle for light and dark mode. While there’s an abundance of posts describing this, I didn’t find any that made it into a compact script of a few lines. Here’s how I did it, and some additional considerations to keep in mind. The script This is all the JavaScript that makes the toggle work: const LOCALSTORAGE_KEY = 'dark' ; const $toggle =…
I vibe design/coded a design system in a few hours! I see a post like this everyday on LinkedIn. In a world where AI is taking the industry by storm, it’s meant to show how powerful these tools are. But it also shows how little the industry understands about the work that goes into design systems. Design systems are for people This is a quote by Jina Anne and the word “people” is important. First,…
This weekend a project called pretext started making waves by Cheng Lou . Here’s a gif that has been blowing up social media: There’s no doubt about how impressive this demo is. The speed in which the text moves out of the way of the dragon is pretty incredible. As expected, many people are saying this is the end of CSS. So, let’s talk about it and address the demos provided that showcase some of…
By the time you are reading this, my several-year-long journey in book writing has neared its end. My first book, Mise en Mode, is now available for purchase. Now that it’s complete, I wanted to document some of the process so that you might consider venturing out into the great unknown of self-publishing a little better than I did. How it started After speaking on the subject at Clarity in 2023 ,…
A large part of the role for design system maintainers is to make things for your peers. This comes with having empathy for your organization and the people who compose it. Many organizations are composed of engineers that are jacks-of-all-trades. The idea of having a developer that can manage the front and the back-end seems very appealing to organizations. Especially since CSS is so easy, we…
From the days of working with design tools like Photoshop, layering compositions in 3D space on a computer has been part of the job. Managing what appears on top can be dozens of elements, maybe even groups of elements, and carefully curating the order of the layers is often a necessary unit of work. As you can expect, this sort of exercise has translated to the web, and traditionally we think the…
I tend to take a minimalist approach when it comes to design systems. One of the reasons for this is the empathy I have for maintainers of these systems. The responsibility of supporting a group of creatives while not being overwhelmed by the number of resources they need is a challenge. However, this doesn’t mean I don’t have empathy for the people looking to express themselves. It’s why I am so…
One of the most confusing but ubiquitous patterns in design is “small text with a background color that may or may not be interactive”. To some that sounds like a button with an identity crisis but to others they might recognize this as a few names: chip, badge, pill, tag, or even lozenge . It’s bad enough that the definition of these things is contested, but what is worse is because they are all…
Adam Argyle made a post on Bluesky today announcing a new property called text-grow is now available in Chrome Canary 145+. Much of the folks I follow there have been very excited about it. But I’m here to tell you to be careful. About fit text The concept of fit text is not new. The idea is that the size of the text will adapt to each line such that every line fills the width of the container.…
AI is everywhere in tech now. It is in the tools we use, the products we build, and the way we interact with users. It feels like if you aren’t with AI, you are behind. While there’s plenty of questionable AI use, one thing is for sure: AI is making waves. And it’s really hard to keep up with the latest. One of the concepts that are gaining lots of discussion is the “MCP” which stands for Model…
Before Mise en Mode , I went on a journey to try to truly understand what it meant to have a design token be “semantic”. The community had a fairly good understanding about what this meant as color, and the benefits that comes from thinking in this way. Text has been perhaps more elusive. Though in recent years we are seeing more and more teams separating the meaning of an “h2” from its visual…
There’s no shortage of posts that explain how to perform responsive typography. Here’s a small sample of them: Addressing Accessibility Concerns With Using Fluid Type Fluid Typography: Predicting A Problem With Your User’s Zoom-In Modern Fluid Typography Using CSS Clamp Fluid Responsive Typography With CSS Poly Fluid Sizing Responsive And Fluid Typography With vh And vw Units And that’s just…
I was speaking with a colleague recently about design system marketing. One of the problems I’ve seen is a person coming into design system resources and being immediately overwhelmed by the options. Hick’s Law strikes again. I’m not just talking about looking at a code base. This is the case for popular public design systems too. As much as I admire Adobe’s work on Spectrum, it’s very easy to be…
This week I tuned into The Question by Ben Callahan , co-hosted by Natalya Shelburne . During the chat I shared one of my patented hot takes: the design system specialist role will eventually disappear. Of course, if that’s true, it doesn’t bode well for me or for the rest of us in the meeting. Design systems are what we do. The rebuttal in the chat was strong: systems are becoming more complex…
I’ve been in the process of writing a book over the past year and the hardest part for me isn’t the writing, it’s the publishing. I’ve changed publishing systems a few times over the course of this work. I’ll most likely have a larger post speaking about the process later, but the current way that I’m expecting to prepare the book for publishing is with CSS. Yep, that’s right. Get your @page…
For a recent episode of wireframe , I borrowed some questions from another person’s AMA. Overall, good questions but one of them stuck out to me where I wanted to give it more thought: You are asked to build a website but you can use only 4 CSS properties, what are those? It’s clear to me that you’d have to think strategically about this. While I’d say that something like display is super…
I’m in the middle of deep thought about what a text component looks like. There’s the easy stuff like having the ability to choose the appropriate semantic element. There’s the less obvious stuff, like adding a flag for screenreader only content . But then there’s something that we tend to overlook, how to manage overflow content. Data loss It’s not uncommon for someone to choose the solution of…
First, we used pixels to describe the size of things on the web. Most digital tools and technologies communicated in pixels so this seemed like a logical decision to use. Over time, we’ve received other units in CSS that were relative to some other amount. Percentages were based on the parent element and many other units were based on font size. The use of font size was highly misunderstood across…
The concept of an accent color occurs in modern web design often, especially in minimalistic compositions of black and white. The accent color is typically used to start drawing attention to important elements and tie in with the beginnings of a brand expression. We often see this manifest in rudimentary token systems that might include something like $accent-color such that this color can be…
I think many of us who work with CSS and accessibility have been looking for a solution that helps provide the right amount of contrast for a given color. It’s floated around as a function within different CSS color specifications, currently found as contrast-color() in CSS Color Module Level 5 with the following syntax: background: var(--color); color: contrast-color(var(--color)); Unfortunately,…
Material Design 3 (Material You) was officially unveiled at Google I/O in May of 2021. At the time the new M3 site was still in the works with only a few analogs to the earlier Material Design site . I didn’t think much of this at the time, especially since 2021 was a busy year for me personally. But now, Material has a “new” launch called Expressive with an article explaining how we got here .…
I’m done building components. 🙅 This feeling was already strong for me. Teams are always in need of their own components for experiences that are unique to the platform. That means they need their own infrastructure for component development. These get built in isolation and don’t have the same level of communication that components in the core design system would have. This is something that a…
As someone who like to think he deeply understands the CSS I’m writing, I do everything I can to avoid using CSS that can cause unintended side effects. As an example, for my new personal website , I use z-index once to handle the page tearing animation. Trying to manipulate the order of things using CSS can seem reasonable at first but often has hidden problems that you might not notice. I’d like…
I released Gridless Design nearly 4 years ago as a response to a frustration I saw in the industry. Similar to the desire for responsive design, it was a call for folks making digital applications to take the foundations on the web into consideration when creating things on top of it. It has the same foundational argument attached to “should designers code” because it asks designers to understand…
I got into an argument on LinkedIn this week about design choices. Very on brand for me. It started with this image: The post was defending the choices made in the image, and went on to say that people who aren’t designers have no business questioning these decisions. The weird part about it was that this person wasn’t a designer according to their profile. Since they’ve blocked me from rebutting…
If you told me 2 years ago that I was going to write this post, I would have scoffed at the thought. But after a deeper think related to the current state of affairs when it comes to development today, I get it. The thumbnail used to promote the Code & Pixels podcast says it all. I’m very confident that there will never be a time where I will consciously choose Tailwind to style my work. I have…
The design systems community was buzzing a few days ago with the announcement of version 2 of the Salesforce Lightning Design System (SLDS). I shared the link to the new documentation on LinkedIn and the engagement has been significant. As someone who has visited dozens of design system documentation sites, there’s certain things I tend to look for when perusing the content. One of those things is…
My wife and I were having an argument about line-height. It’s what happens when you live in a design systems house. She was working on updating some font properties and making a case for a larger line-height reflecting on the WCAG guidelines 1.4.12 (Text spacing) . The guidelines were confusing so she also found another reference within the United States Web Design System (USWDS) with the…
Warning, you probably don’t want to what this post describes anywhere. It’s for funsies. In speaking with a colleague, we were discussing solutions for people who were unable to use a framework’s custom component that still expected to have the styles for that component. Think of how you might have a React <Button/> that would need to be visually similar to some static HTML page <button/> . Folks…
In my design system playground , one of my small goals was to have the ability to import a design token identically between CSS and JavaScript. Here’s an example of the developer experience I was expecting and succeed in making: to use tokens.$action_primary_backgroundColor as a value reference in both .scss and .js files identically. Writing (S)CSS. @use '../tokens.module' ; button :where ([…
Cory LaViska of Shoelace fame posted this a few days ago: when building a component library, what component do you build first and why is it always button? — Cory LaViska It’s a similar question that starts Dan Mall’s talk he first performed at Clarity 2022 . Dan argues that the button doesn’t provide impact to teams; buttons are easy and obvious. It would be more useful to determine what…
I’ve been writing CSS for a long time and it’s really exciting to see the fast improvements to the language that we’ve received over that time. In this post, I’ll demonstrate two ideas that I always wanted to do natively with CSS alone. First, a warm-up before we get to the wild stuff. Grid centered line-height I know of plenty of designers who want to maintain a vertical rhythm for all content on…
While having a good time with internet friends on Bluesky, I saw a thread asking about Josh Comeau’s website , specifically asking about why the entire card isn’t clickable. Josh’s replies concerning usability is spot on, and I’ve definitely been naughty doing the typical display: block on a <a/> element right here on the blog homepage. The replies in the thread also have some good suggestions but…
Storybook is an essential part of design system development. It is considered an industry standard for creating components in isolation before they appear in production experiences. I’ve been working with the tool for nearly 8 years now and the team has really done a great job supporting the needs of our industry. That said, we got a problem. Leaky styles I lean heavily into Storybook as a…
Clarity , the original design systems conference, just wrapped its 9th iteration this year. I was part of the small group of community volunteers that helps put the event together. I’d like to pull back the curtain behind the technical side of the event; somewhat to play Monday-morning quarterback on things I would have improved in my role on my end. Playback We planned to have all the talks…
Over the past year, I’ve had the task of creating layout components for an organization. This is something that was initially confused about. My initial assumption was that everyone knows about flexbox! It’s our lord and layout savior! Jokes about centering content should have vanished away now that we can use flexbox! Oh, how naïve I was. Realistically, the developer landscape doesn’t hone these…
I’ve been using Astro for a long time. The developer experience includes all the best parts from the way I learned web development nearly 30 years ago. The stuff that was missing back then is intuitively included, like HTML templating without the need for a heavy framework. I’ve since moved all the personal projects I’m currently developing onto an Astro stack. However, there’s been one thing that…
In my day job I code React components. React is a good solution to allow large teams to make significant applications fast and under a standardized set of rules. Without a library like React, the Javascript ecosystem would allow for many different ways of achieving a result. This makes it challenging for teams to gain traction. However, it doesn’t make it great for doing very specific things. Even…
My wife asked me a question one morning: Are there any good reasons why a button should have a min-width? My quick response was “No” and she agreed without much contest. However, I figured I’d ask the internet to see if there were any reasons we might have missed. While I’ll use the term “width” for much of this article, I recognize that some languages would be displayed in a vertical writing-mode…
While I don’t recommend scales within the semantic set , it could be helpful in your primitives. One way of providing a scale is through something called “T-shirt sizing”. In this method, each size is provided in a similar way to how you might find sizes of clothing in a store. You might choose this type of scale when you expect the middle value to be the default and have values exist in opposite…
I am a big proponent of component-driven development, and don’t agree with the utility class method of styling . In component-driven development, you offer blackbox abstractions of common implementations. Meanwhile, the utility class method allows for more customization. In a systematic approach, we want our experiences to be consistent and therefore follow the same patterns and conventions.…
This post is going to be a little different than others, as I expect to update it over time with resources I find about design engineering. designengineer.xyz This is one of the first websites I found dedicated to the recent hype. Launched by Karl Koch , it also seems to be one of the most fully covered with design engineering materials and resources such as related posts and jobs.…
This topic was sparked from a few discussions on Twitter . On one side there’s a school of thought that believes the size of a button should be achieved with padding. On the other side, there is also a belief that the size of the button should be handled with minimum dimensions. I have a strong opinion which is based on the principle that the size of an element is dictated by its contents and…