Flagrant

Delightfully Friday Junior: Tier List Edition

2026-02-19T05:08:00-06:00

Delightfully Friday Junior comes for us all, and this time it was my turn. (What’s Delightfully Friday Junior? Check this out.)

I thought what we’d do was set up some tier lists for rating things. Rating what? Whatever we wanted! That’s part of the fun of just putting a little bit of structure around an activity — seeing what direction people go once you give them a starting point. And that’s what I really wanted to see.

Sure, I provided not only the tier list template, but also some ideas of things that would be interesting to rate. In the end, though, I think I was the only one who chose something from the list of ideas.

(It was Muppets, by the way.)

(I will be taking no questions.)

But from others, we got to share wonderful things like thoughts on hot breakfast foods (we don’t have time to rank all breakfast foods), or dice used in Dungeons & Dragons (a d4 ranked surprisingly highly, but with an explanation that got me on board). There was an entire run-down of all the stuffies on someone’s living room couch (just the couch — again, we’re operating with limited time here). And I think we all learned a good bit about just how many Barbie movies there were.

And in a moment of delicious meta-ness, we also got a rating of rating systems.

Feeling John Henry

2026-02-17T06:00:00-06:00

This week, for the first time, I decided to try out a coding agent using the Zed editor on a free pro trial. As a seasoned developer I have found patterns that suit my pace and personality so there is often resistance to trying out the latest new tool that might disrupt my workflow.

Of course, AI has already largely replaced much of my searching for answers from documentation, tutorials and Stack Overflow entries. I will also get coding suggestions and copy snippets from chatbots. However, as a software craftsman I feel ambivalent about completely opening up my personal workspace to the powerful yet invasive forces of AI.

When not working at my computer you will often find me outside in my garden. With small scale agriculture you get a visceral experience of both the benefits and cost from using tools. With gardening, there is a clear boundary you cross once you get involved with mechanized devices. While your productivity increases dramatically so do your material costs and dependency on external resources and supply chains. You are also more removed from the long term impact on the soil and ecology that sustains us.

With AI encroaching on my profession as a computer software engineer I now face a similar choice. Here is a task that might take me fifteen minutes of tedious copying and pasting to complete. Even though I know exactly where the files are located and some pretty efficient keystrokes on my trusted primitive editor my fingers and single core brain can only move so fast.

On the other hand, in a few minutes I can compose a prompt for an agent in the Zed editor and if I explain myself clearly and the AI stars align I could end up with success and shave off quite a bit of time.

It occurs to me that for the first time in my career, the specter of obsolescence lurks in my own machine. I am reminded of the story of John Henry, the folklore hero who raced the newly invented steam powered drill to tunnel through a mountain with a chisel and sledge hammer. In the legend our hero competes at the pivot point of a new technology and is still able to keep up with and even win against the machine but only at the cost of collapsing from exhaustion.

In these early days of AI agents I can probably keep up and maybe even perform faster for simple tasks. However, the more I practice and get better at prompting and as the LLM models evolve and become more powerful, it will make less and less sense to physically compose and write my own code. Like John Henry, I will need to choose to adapt or perish.

However, it is worth taking some time to consider some of the larger impacts of these options. Though we are at the precipice of something completely revolutionary and novel, we have many historical precedents to refer to for wisdom and caution.

Take for example, the impact of industrial agriculture. Mechanization, fertilizers and genetic engineering has been credited with transforming human society, ending famine and the drudgery of an agrarian lifestyle.

On the other hand, one could argue that there has been incalculable loss to the ecological health and resiliency of the soils and environment that sustain us. Machines do not have the same relationship with the organisms that protect and sustain human beings. Less hands working the soil and fewer eyes directly observing the impacts means that we are vulnerable to destructive practices on a massive scale.

Today, when we purchase an amazing quantity and variety of food from the supermarket we have little connection with the impact of our choices. We are also disempowered from doing much about it since we are so dependent on the technology that has replaced the centuries of agricultural experience and wisdom now largely lost.

Am I embarking on a similar inevitable process of erosion as I choose to prompt an agent while I am completely detached from the short and long term environmental and cultural impacts? How much are my savings of time and effort subsidized by the reckless financial risks and ambitions of large corporations? How much future employment am I sacrificing to meet immediate deadlines? How much learning and experience am I foregoing, contributing to the atrophy of my craftwork?

While the immediate cost of AI tokens and savings in human work hours are easily tabulated it may take generations to realize the overall balance of AI’s impact on humanity. Will we once again become dependent on a new level of technology we lack the skills and knowledge to maintain and control? How much of our accumulated experience and expertise are we willing to surrender in the name of questionable progress?

I feel humbled by the enormity of the transformation we are presented with; changes we could not have foreseen even five years ago. I can only hope that our culture will find ways to adapt as it has through other major industrial revolutions. With any luck, there will still be a place for the software craftsmen just like the small scale homesteaders that find joy and satisfaction from tending their gardens.

Delightfully Friday Junior: Gingerbread Houses

2025-12-29T03:13:00-06:00

For our final Delightfully Friday Junior (if you haven’t heard of it yet, learn more here) of the year, the team gathered to make gingerbread houses and other digitally baked scenes. As we weren’t limited to the social integrity of the usual marshmallows and graham crackers, we closed out 2025 and wielded our imaginations with a celebration of gingerbread houses, gardens, trains, and a crematorium 🪦😂 Enjoy our silly, festive creations!

Garbage Pile Friends

2025-12-18T07:35:00-06:00

In case you missed it, Flagrant just launched our swag shop! In honor of this, I’m super excited to give you a little BTS of the creation of some of our items and some insight into how this came about.

Quick overview of the problem: Finding a way to show and sell our designs.

We wanted to make a place to sell Flagrant-flavored items for a while now, but could not find a way to do it that was not labor-intensive for the team. One of our previous attempts was through Gumroad, which would handle the listing and money exchange part of the process, but left members of the team needing to find a place to get the item printed (t-shirts, stickers or pins) through a separate vendor, a place to store the items, and handle all of the packing and shipping once an order came through. This was NOT an effective or sustainable way for us to operate our shop. So, thanks to an internal project called #co-shipit (see more about #co-shipit in the footnote) by Max and me, we were able to find a solution that worked for the whole team: Big Cartel!

Big Cartel is a platform that creates a storefront for you to display items and process payments. On the inventory front, Big Cartel integrates with platforms like Printful and CreativeHub. These sites are where you can upload your designs and create items for sale. The items are printed on demand once a customer makes a purchase and is directly shipped to the customer. This takes all the hassle of storage, shipping, and processing away from the team and allows us to focus on other tasks.

The Swag: Why I made what I made

One of the long-time jokes here at Flagrant amongst the designers is that we are like possums guarding our “trashpile” of designs when someone asks to see what we are working on. Because of this common phrase, I thought it would be fun to make some designs to represent this. I started by sketching out some ideas of how I’d like to make the possum, how I wanted the character to look and feel. I also wanted to make sure that the style was repeatable so that I could create a series of related items/designs.

The inspo:

The sketches:

After I had a solid idea of how I wanted it to look, I started making the poses. The poses I made were based on some of the phrases that float around the Flagrant workspace, like partners in sublime, garbage pile kids and unleashing your spark.

I wanted to make all of these phrases into fun, wearable designs that people would like, even if they didn’t know the meaning behind them. So, the following designs were born under the umbrella of “Garbage Pile Friends”, a series of swag designs:

The Stinker (Like “The Thinker”, but with trash)

Partners in Sublime (Possum and Raccoon friends in a famous anime pose, Dragon Ball Z Fusion Dance)

Unleash Your Spark (a junkyard dog making a break for it)

These designs, as well as a few designs from our vault, have been added to the Flagrant shop! We are so excited to finally see them out in the world <3

See some sneak peeks of some of the items!

Our model Jim is showing off the “Unleash Your Spark” t-shirt in “Grape”.

Footnote: Co-ship it is something we do on a biweekly basis. Two individuals pair together in order to ship ‘a thing’. They present the thing during Friday’s clap & cringe, and all of us will get to marvel at the wonder that is teamwork.

Making an Old-School Game

2025-12-15T06:56:00-06:00

I just participated in PiCoSteveMo. What’s that? It’s a month-long game jam for making a PICO-8 game inspired by a Stephen King work.

Oh, did that just raise further questions? Hold on.

“What’s a game jam?” It’s an event where you try to create a video game from scratch.
“What’s PICO-8?” In the creator’s words, “PICO-8 is a fantasy console for making, sharing and playing tiny games and other computer programs.” If it helps, think of it as a constrained virtual environment for running little games and programs. But there’s also an integrated editor for code, and graphics, and sound and music. And a standard library on top of the embedded Lua language. Actually, “fantasy console” is probably easier.
“Who’s Stephen King?” You’re kidding, right?

Why did I do it? Well, partly because it’s hosted by former Flagrantino Casey, and he’s talked about it and PICO-8 a lot. Partly because it just seemed interesting. And honestly, partly because I’m a silly, silly man — there’s been so much going on in my life lately, and why not add one more thing to do? I’m glad I did, because it turned out to be really fun and rewarding.

I think I’ve made it clear that I don’t necessarily think of myself as a very creative guy, but I do really like working on the craft. And also I super feel the terror of the blank page. Constraints and prompts are great. So the combination of a clear prompt (“write a game inspired by a Stephen King work”) and constraints (do it in a month, use PICO-8 — which has its own constraints) really sparked my interest. Also, I nerd-sniped myself by making a throwaway snarky comment like “sure, if I could somehow find a way to make a game based on ‘The Jaunt’… oh wait I just had the idea”.

So began a journey that started with a purchase and download of PICO-8, and then a tutorial zine and working through that. And finding various other incredibly useful resources, like the manual, and the PICO-8 Wiki, and NerdyTeachers, and Lazy Devs Academy, and Gruber, and so much on the Lexaloffle BBS.

In keeping with the spirit of the jam, I toyed around a bit with PICO-8 enough to get some things working (like going through the examples in the tutorial zine), but then I didn’t work on my project until the first of November. And then I really dove in, documenting my progress in a sort of devlog community thread.

So much of the experience fell somewhere between comfortable and uncomfortable. Yes, I’ve been programming for a long time, but there are many forms and focuses in that field. And there are many frameworks for working in. Thankfully, I was already familiar with the init/update/draw game loop through my interest in Processing (in particular the JS version, and its `setup()` and `draw()`). However, that sort of thing makes me put far more in global state than I like. And the restriction PICO-8 has on tokens can put some major incentives on having variables in the global namespace rather than nicely encapsulated in objects, or having logic in-line rather than in separate functions.

None of this is to say that what PICO-8 does is wrong. The constraints are deliberate choices, and are incredible aids in the creative process. They force you to consider what really belongs in your game, or at least what different things are worth to you. This mostly goes for the token limit, but is also definitely felt with the graphics and sound limitations. The “fantasy console” gives you one single platform to deal with — one resolution, one color palette, one sound library — and you’re freed from having to worry about all the different options here. (Note that this is very reminiscent of the Java Virtual Machine “write once, run anywhere” promise.)

And the game loop is incredibly helpful for breaking down the frankly thorny problem of handling game input + logic + visuals into easier-to-handle pieces. I may feel uncomfortable with putting more into global state, but I can’t say I’d feel better if I had to somehow manage updating game state and the screen 30 times every second all on my own. (And PICO-8 lets you do that, if you’re so inclined. I’m not… yet?)

One thing I especially appreciated was getting a good reason to dive into Lua for real. I’ve toyed with it before, but nothing serious — probably my biggest thing was making some improvements to someone else’s Tabletop Simulator mod. (There it is, programming + games again.) And I somehow thought that’s what Lua was for — scripting in games. I’d just heard of it being used in video games so much that I somehow internalized the idea that it was created for that purpose. And I was correct in a sense, but not entirely. Lua was created in 1993 (a few years before Ruby, Java, and Javascript; a few years after Python and Visual Basic) and designed to be embedded in other applications to allow greater flexibility and customization. And I really enjoyed it! I mean, apart from array (sorry, “table”) indices starting at 1. Again, I’m not going to say Lua is doing it wrong, but array indices starting at 0 is so ingrained in me — my thought processes, my habits, my math — that this caused no small number of bugs.

That was no big deal, though. My experience as a programmer helped me in a good few ways, especially in noticing the patterns where I have trouble and making some helper and utility functions to give me guardrails.

So I got to really enjoy this creative process and these constraints. It’s funny to look back on various times during the month when I cycled through:

feeling like there was still maybe too much freedom
feeling like the constraints were helpful but still nice and loose
bumping against some hard wall like screen size and resolution, or color palette
accepting the situation and finding a solution I enjoyed
lather, rinse, repeat

And just like in any effort, there was the biggest constraint of all: time. There’s no relaxing this, no pushing against it and winning. In fact, that went for me in both the obvious way of having to finish this game in a month and carving out moments to work on it, but also how much of the game was built on events happening at specific times, or at least specific intervals. That worked out fine with actual gameplay, but it really bit me when I wanted to make a tutorial and had to figure out ways to pause in the middle of events or delay them so that the player could have time to read and understand what they’re being taught.

As I said in a devlog post, the things I did there weren’t quite “NPC train hat funky”, but I’m starting to understand how things like that happen. I’ve definitely learned some lessons about how to do this better in the future, just as I’ve learned over the years how to write better code for flexibility and testing.

Oh, testing. That’s something that would be a great luxury here. Can it be done? Can I get myself to do it? I’ve never been good at testing visuals and UI interactions.

In the end, I made something that I consider successful and I’m pretty proud of — check out JaunTender on itch.io. But more than that, I really enjoyed the experience, and I felt I learned a lot and had a good time doing it. I learned these skills and about this framework, sure, but I also feel I learned a bit about myself, and experienced some growth as well.

Looking forward to more, for all of it.

Delightfully Friday Junior: Puzzling Together

2025-12-12T09:47:00-06:00

Life is a puzzle. You are born, you die and a lot of puzzling stuff happens in between.

We here at Flagrant love puzzles. I think the thing I enjoy most about my work is that I get to solve real world puzzles everyday. Sometimes it is trying to figure out how to write a database query, debug a flaky test or get css to match a design. Other times it is helping a client figure out what problem they are trying to solve and then come up with the right solution. And then of course there is the puzzle of figuring out what we are feeling and how to best express it to our co-workers so that it can be heard and understood.

But sometimes we just need to do some old fashioned puzzles just for fun! In fact, once a week we at Flagrant take a break from our “regular work” to do a puzzle together. Our goto website is Jigsaw Explorer. A link is shared and everyone logs on while we get our dopamine hits from virtually snapping pieces into place and racing to get that final piece to complete the image and maybe guess where the photo was taken. Sometimes it is quiet and other times we banter. Afterwards we all take a moment to share some appreciations from our work and/or personal lives.

Putting a puzzle together is a great metaphor for how we work at Flagrant. Each of us has a different perspective and skill set and it takes a team to figure out how all the pieces fit together to get a complete picture. Most of all, it is more fun and satisfying to work together and celebrate our individual and collective accomplishments as a team.

While puzzles are a year round daily part of our lives, the holidays are an especially rich time for puzzles. Some of our developers stay up late working on Advent Of Code. It is also when the New York Times releases their Puzzle Mania. And everyone appreciates that jigsaw puzzle on the coffee table to help break the ice during holiday gatherings and vacations.

Puzzles are such a rich part of our culture at Flagrant so we decided a couple weeks to get together and find a way to share some of it with you! At a recent Friday Junior (what is that? see here) we put together a montage of our favorite puzzles to share with the world.

Then as a group activity we created a puzzle of our own for you to solve! A new favorite puzzle called bracket-city by the Atlantic recently released a puzzle builder which allows you to send your own secret messages or special announcements. You should check out how to play and it may become a new favorite daily puzzle of your own.

Then when you are ready you can try out our own puzzle here. Once you have it solved it will reveal a very important message about something new on our website that you might also find helpful for your celebrations this holiday season (spolier alert: you might need to come back here once you are done). Let use know what you think!

Delightfully Friday Junior: Photo Scavenger Hunt

2025-11-19T10:04:00-06:00

For our 4th Delightfully Friday Junior activity (see more about Delightfully Friday Junior here!) the team embarked on a virtual scavenger hunt. The goal was to use photos from our camera rolls to answer prompts and then share a bit about the photos we share. This activity was designed to get us to open up about what has been happening in our lives and show more of what is important to us as individuals. We gathered some interesting results, including: a shoe filled with tennis balls, an old baby blanket, and lots of kitties. Take a look for yourself!

Something you like to eat or drink

Something that makes you happy

Something that reminds you of someone important in your life

The oldest thing you own

5. The view from your window

A no-context photo from your camera roll

After posting our photos, we went around and got to ask questions about the photos people uploaded and hear their stories. It was a relaxing and simple way to share more about our lives. We hope you have enjoyed these goofy, lovely, and precious photos the team shared!

Until next time!

The Dark Art of Designing for Dark Mode

2025-11-07T11:26:00-06:00

From a talk I gave on September 20, 2025, at XO Ruby New Orleans.

If you use dark mode on any of your devices—or even if you don’t—you’ve probably seen a lot of interfaces and websites in dark themes.

Framer, Google Fonts, Linear’s website, and many others showcase dark mode designs, even when you view them with “light mode” on:

There’s a surprising amount happening here. Even as a professional designer who uses dark mode all day every day, I didn’t fully intuit what design principles to follow when designing for dark mode.

After adding dark mode to several client products, I’ve gathered useful guidelines to follow when designing for dark mode.

Color terminology 101

Before we get to guidelines and the Dark Mode Dark Arts, let’s step back and define some key color terminology.

There are many ways to talk about, identify, and work with color. A lot of how we talk about and work with color depends on the medium.

CMYK, color spaces, Pantone - These may indicate you’re dealing with printed materials.
Subtractive color vs. additive color - Pigmented color (paint, ink, etc.) is subtractive, where mixing all colors gets you something brown or black. Colored light (theater lighting, etc.) is additive—mixing all colors gets you white light.
P3 and other color gamuts - Color gamuts often come into play when we’re dealing with digital devices and how many colors they can display.
HSL / HSB / RGB / RGBa / Hex - Any and all of these are used on the web and when designing software.

Since we’re talking about software UI and dealing with color on screens, we’ll focus on #4—specifically HSB, (hue, saturation, and brightness), which is what I use to manipulate color when designing.

All color is a result of how our eyes physically process light waves. Each color has a different wavelength in the spectrum of light.

In color theory, we often talk about “the color wheel” which is really just the spectrum of light twisted around so that the violet and red ends are joined.

Hue is often what we mean when we say “color”—like red, green, blue, yellow. Hues have different wavelengths in the spectrum of light. Hue is the “H” value in both HSL and HSB.

Here you can see the different H values for each color:

Saturation can also be called a color’s intensity. It’s a measurement of how different a color is from pure gray. Saturation isn’t really a matter of light and dark—it’s more how pale or intense the color is.

Here you can see high saturation on the left moving to low saturation on the right, with a constant hue—or H value—of 359:

When we talk about how light or dark a color is, we’re talking about brightness. The higher the brightness of a color, the more light it emits on a screen.

Here’s a chart showing how brightness and saturation impact a color (from Leigh Cotnoir):

When I work with clients on design projects, I’m often given just two or three core brand colors from which I derive a full color ramp of more shades. HSB is what I use to do that.

Defining the extended color ramps for a brand’s palette is a crucial early step in design projects to ensure there are enough shades to work with in order to meet accessibility guidelines for color contrast.

I manipulate the saturation and brightness of a brand color to make a color ramp with many steps. For this purple palette, the hue—the H value—stays the same.

As you move from top to bottom (from 50-950):

Hue stays the same
Saturation increases
Brightness decreases

This mimics how light and shadow impact color in the real world. In these examples from Erik Kennedy, the area of shadow has higher saturation and lower brightness than the area not in shadow:

Color and accessibility

Now that we’ve talked about hue, saturation, and brightness, let’s cover some basic accessibility guidelines when it comes to color.

Fortunately, there are some well-documented accessibility standards we can follow. If you’re not familiar with WCAG, it stands for the Web Content Accessibility Guidelines. WCAG standards aim to make web content more accessible to people with visual, auditory, physical, cognitive, and neurological impairments. So it’s not just about color.

WCAG supplies us with guidelines for color contrast ratios—the difference in contrast between two colors. For example, in the second button the dark text has a contrast ratio of 9.5 to 1 against the green button background. The same green button background has a contrast ratio of only 1.2:1 with the gray page background.

Did you know that there are several different types of colorblindness? It’s another thing to factor in when working with color. As you can see with some of these oranges, yellows, greens, and reds, color contrast might help with legibility, but high color contrast alone may not help with color differentiation for certain types of color blindness:

That’s why one of the standards from WCAG is not to rely on color alone as the only way to convey information.

WCAG cheat sheet:

Don’t use color as the only way to convey information
3:1 - Buttons against a background
3:1 - Large text (24px+)
4.5:1 - Normal text against a background (any size)
3:1 - Icons & graphs, any size
3:1 - Focus rings, UI elements, or other signifiers

But even if all you’re going to do is comply with contrast ratios, it’s a lot to consider. Especially since this is not a complete list.

As if that’s not complicated enough, when you add dark mode to your website or application, you effectively double the amount of color combinations that must be accessible.

I’m not going to go in depth about the solutions for dealing with this complexity, but if you’re interested in knowing more, you can read my post on setting up color systems with color variables.

Color + your brain

Color perception and relativity

I said earlier that all color is a result of how your eyes physically process light waves. That’s true. What’s also true is that colors are the way your brain by use of your eyes interprets those colors in a given context.

Color is perception. Yes—the physical mechanisms like rods and cones in your eyes and wavelengths of light—but there’s an added influence given how our brains process those physical inputs, like:

Proximity to other colors
The color temperature and amount of light in our given context
The way light reflects off of something (your glass phone screen, shiny vs. matte paper, etc.)

This could mean that the kind of light a color is seen in impacts the colors we think we see.

Is this dress black and blue? Or is it white and gold?

I bet you have some personal experience with this if you’ve ever looked at your phone screen when you’re in a dark room.

Our color perception is influenced quite literally by what colors appear next to each other. Many such experiments in color and perception were designed by Joseph Albers in his book Interaction of Color.

For example, focus your eyes on the small rectangle in the center of the top (blue) half of this image. After your eyes rest there for a few moments, the small rectangle in the center of the bottom (red) half appears similar in color to the one you’re focusing on.

In fact they are very different colors. But we don’t perceive them that way because of the field of color surrounding them.

The small boxes next to 1 and 1 are the same color. And the small boxes next 2 and 2 are the same color. When you change the colors next to or surrounding them, it impacts your perception of the color.

This notion of perception—or what I like to call “color relativity”—is especially relevant for dark mode. Your punchy, vibrant brand colors or the reds you’re using to grab the user’s attention for errors may read really differently when they’re on a dark background.

A bright red or a punchy blue on a light background can feel muddy and against a dark background:

Yes, checking our color contrast ratios can guide us. But there’s a little more going on here. The perceived saturation of a color is not constant. It varies depending on the surroundings and light a color is seen in.

When we’re in the dark, closer objects are brighter

Another way that our brains interpret and perceive information from our eyeballs has to do with light sources and shadow. In daylight, items that are more distant appear lighter in color.

Photo of mountains from Mario von Rotz on Unsplash.

But in the dark, items closer to a light source appear lighter in color. Given the way we rely on light in the darkness to help us see, items closer to us and our eyes (and a nearby light source) appear lighter in color.

Photo of dark hallway from Qiu MenFeng on Unsplash.

This perception informs one of the key principles of designing for dark mode. In light mode we can rely on shadows alone to convey elevation. But in dark mode, items that are “closer” to us in the UI should get a lighter background to create that sense of elevation and proximity.

Even though the differences between a “closer” menu and a background behind it may be quite subtle, it feels quite natural to our eyes and our brain, and when done incorrectly can contribute to a dark mode implementation feeling “off.”

Image from Dark Mode UI: 7 Best Practices

For example, this drop down menu on Linear’s website pops over the top of the page behind it. To give that sense of “closeness” to a light source near our eyes, it uses a lighter gray background than the page behind it:

Common misconceptions

If you haven’t spent much time thinking about or dissecting why dark mode looks the way it does, it might seem pretty straightforward. What’s the big deal?

Let’s talk about some of the common misconceptions.

“Just invert the colors”

Isn’t dark mode just inverting all the color? Not exactly. That would mean any UI elements with shadow would have a soft glow around them.

True color inversion might be fine for white or black elements like backgrounds and text. But it will also change things like brand colors, which are commonly used for attention-grabbing UI elements like buttons. And we know better than to muck around with brand colors, don’t we?

“So…just invert the color ramps then?”

So if we don’t do a true inversion, couldn’t we just invert the color ramps and flip where the dark colors and light colors get used? So dark greens flip to light greens, light greens flip to dark greens, and all the colors for dark mode are…well…darker?

Not exactly. That gets us that super-saturated “muddy” feeling in dark mode, like with this dark red alert, which doesn’t have much contrast against a dark background:

Depending on the specific hue of the color ramp, inverting the light colors to dark ones from the same color ramp may mean that something unimportant (like our green success alert) steals a lot of visual attention from primary content or a call-to-action button.

“Can’t we just throw Tailwind’s ‘.dark’ class on it and call it a day?”

Haven’t tools like Tailwind solved this problem for us? Well…yes and no.

As Tailwind’s dark mode docs indicate, you can add Tailwind’s “.dark” class to the body of a page. But that assumes that you’ve specified the right color for every element you want recolored for dark mode. Or that you’re using pre-styled Tailwind components without customization or any additional brand colors.

Tips & tricks for dark mode

So what parts of a color’s formula do you manipulate for a successful design in dark mode? What tips and tricks can you follow to do dark mode the “right” way?

1. Avoid using saturated colors.

It can be hard to pass accessibility requirements with saturated colors on dark backgrounds.

Highly saturated colors will feel too intense in dark mode. Because of the way we perceive color, a desaturated color will feel more intense when it’s on a dark background. Lower saturation will still “feel” colorful in dark mode.

Reserve the intense, saturated colors for expressing brand or for call-to-action situations where you really do need to grab attention.

2. Don’t just invert your light mode colors.

Don’t just invert your light mode color scheme. It won’t necessarily have enough contrast to meet accessibility standards.

Be patient and create a dark-mode-specific color palette that has enough contrast and is pleasant to the eye.

Just inverting light and dark steps your color palettes will likely result in icons or buttons not meeting contrast requirements against dark backgrounds.

3. Avoid using pure white or pure black.

White text on a pure black background can be challenging or painful to look at with certain vestibular or vision impairments.

4. Communicate elevation with lighter surfaces.

In light mode, we use shadows to communicate depth. The higher the surface is, the closer it is to the “light source” and the bigger shadow it casts.

This doesn’t work the same way in dark mode. But we can use the same “light source” theory and apply it to surface color.

For elements in the UI that are “in front” like fly-out menus or dialogs, use soft grays rather than dark blacks and bright whites. Shadows will still show on grays. It will still feel dark, but much softer and nicer to look at.

If you’re using grays and not blacks, shadows still help create depth in addition to the gray scale giving that sense of elevation:

5. Use a robust gray palette that carries some of your brand color

Consider creating harmony with other UI elements by creating a gray palette that isn’t totally neutral, but carries a very desaturated version of a brand color. It will feel more sophisticated and easier on the eyes.

Try combining a primary brand color at low opacity with neutral grays to create a gray palette that carries a branded hue.

Conclusion

Designing for dark mode can be surprisingly complex. It requires an understanding of how our eyes perceive color and how to mimic colors in the real world by manipulating the saturation and brightness of colors.

By using HSB, we can:

create a gray palette that carries some brand color for added harmony
apply lighter grays to “closer” surfaces to convey elevation
avoiding saturated colors except in instances where we want to draw attention

I hope you’ve learned a little something about working with color. Need help with dark mode designs or working with color on your project? Get in touch!

Resources

Color in UI Design: A (Practical) Framework by Erik Kennedy on constructing color palettes and understanding color relationships with hue, saturation, and brightness or HSB
Hue, Value, Saturation—a great explanation of different color terminology (beyond just HSB) if you wanna nerd out
The Surprising Science Behind Color Codes by Patrick Woodhead
Seven Myths of Color Contrast Accessibility from UX Movement exposes when WCAG formulas for contrast ratios actually don’t help
Dark Mode: how to come over to the dark side by the team at Redmadrobot Design Lab
Material Design guidelines for creating dark themes—a good summary of putting all the principles together in an extremely practical way without having to go deep on the theory
The same guidelines for iOS
Session from WWDC 2019 on dark theme design for iOS
Dark mode UI design—7 best practices by Ondřej Pešička
Color palette generators and tools: Colordot, Pokemon Palettes, Colorlab.dev, ColorBox, Material Design color tool, Accessible color palette builder, Happy Hues
Color contrast cheat sheet with a list of many other contrast-oriented accessibility tools and resources
Color simulator tools: Sim Daltonism for Mac, Color Blindness Simulator plugin for Figma
Color contrast tools: Lighthouse, Stark - Contrast & Accessibility Checker plugin for Figma

Delightfully Friday Junior: Halloween Edition

2025-11-07T08:31:00-06:00

Delightfully Friday Junior III

We have offically done three rounds of Delightfully Friday Junior. Where does the time go?

If this sounds new to you, here is our first take - show and tell), and our second take - this or that. Take a gander at these to get the who, what, why, where an when of Delightfully Friday Junior. Plus you will get to learn more about the Flagrant weirdos (like given the choice between chocolate and cheese: we choose cheese).

Episode 3: Halloween Edition

For our third session, we got into the spooky spirit and carved pumpkins…virtually! We met on Oct. 30, the day before Halloween, which felt like the perfect excuse to unleash our creativity and channel our inner children.

Don’t worry, no gourds were harmed in the making of this week’s Delightfully Friday Junior. Thanks to Figma’s built-in pumpkin-carving widget, we kept things festive and virtual.

Our virtual pumpkin carving event turned out to be a surprisingly fun way to connect as a team, no matter where we all were. From classic jack-o’-lantern faces to more imaginative designs, the creativity was on full display.

We had pumpkins representing everything from quirky self-portraits, a cute penguin and a melting face that looked like it had seen one too many bug fixes.

There was even a Ruby method called carve. Bonus points to Jim who carved out the XORuby logo. And yes, there was a vampire pumpkin looking a bit more sad than scary, because even spooky creatures have bad days.

Here they are in all their glory:

And that wraps up our third Delightfully Friday Junior! Each round keeps getting a little more creative, and a lot more “us.” Whether we’re showing off our favorite things, debating the merits of noodles over ice cream, or carving virtual pumpkins that reflect our quirks and humor, these moments remind us why we love working together and help us connect as humans.

Until the next Delightfully Friday Junior - may your pumpkins stay un-smashed and your ideas delightfully weird. 🎃

Delightfully Friday Junior: This or That?

2025-10-22T10:59:00-05:00

What’s Delightfully Friday Junior, you ask?

This is only our second go-round (see our first take—show and tell—here), so you’re forgiven for not knowing.

At Flagrant we have different themes to our daily stand-ups, each one focusing on a different vibe, prompt, or mini team-building moment of fun before each of us scatters to the wind of our respective client projects.

Delightfully Friday Junior is just the latest iteration of that for the Flagrant team. Every other Thursday for standup, someone else on the team leads a playful activity in FigJam—something a little experimental, a little silly, all in the spirit of getting to connect with our coworkers and learn more about ourselves in the process.

We love to foster a fun “water cooler” moment with coworkers, especially as a distributed team that is not always staffed together on the same projects. Bonus points if those same moments by the virtual water cooler help us understand a teammate better (or have an interesting disagreement with them about totally hypothetical super powers).

Episode 2: This or that?

For our second session, we put five minutes on the clock and everyone generated “this or that” questions. Wouldn’t you know it? Our team of weirdos came up with a lot of weird questions.

Then we took some time to read through and answer:

Would you rather snuggle with a puppy or old dog?
Outdoors or outside?
Dance party or just music listening?
Would you rather be Gumby or a gingerbread person?
Playlists or podcasts?
Are tacos sandwiches or are submarines tacos?
Would you rather take a road trip or immediately teleport to your destination?
If you had to choose, would you rather always have socks on for the rest of your life, or never be able to wear socks?
Would you rather have a time machine that only goes back in time or one that only goes into the future?
Are you a cat person or a dog?
Chocolate or vanilla?
Would you rather eat only noodles forever or only ice cream?
Would you rather be able to never eat cheese again or never chocolate?
Would you rather be able to control plants or control animals?
Would you rather be a superhero with no real powers or a supervillain with incredible abilities?
Would you rather have the ability to instantly learn any skill or have the ability to instantly heal from any injury?
Are you a summer or a winter person?
Would you rather only speak in rhyme or song?

What we learned

Our team choose noodles forever over ice cream forever, and cheese over chocolate. Some folks would rather instantly learn a skill than heal from injury, whereas others think all the fun is in the learning and skill acquisition. Why not choose the ability to repair these fragile, wet meatbags we call bodies?

Sometimes all it takes is 15 minutes with a fun activity and some silly questions to enjoy your teammates and get to know them a little better.