CSS and design systems people - BlogFlock

Using CSS to fix the irradiation illusion - Adam Argyle

2025-11-29T21:47:37.000Z

Ever noticed how white text on a black background looks thicker than black text on a white background, even though the weights are the same?

This post teaches you how to account for this and adjust perceived font weight for dark mode without layout shift, with variable fonts and the GRAD axis.

g…RAD! 👈😎👈

Feel out the problem space #

Test your eyes and feel the problem space with the following demo
(def open it up larger):

See the Pen by Adam Argyle (@argyleink) on CodePen.

To test:
Flip between light and dark. Look closely at font weights in the "un-adjusted" and "adjusted" example content.

The goal:
The visual weight to not perceptively change when switching between light and dark. This means, when in dark mode, using a negative value for GRAD to reduce the perceived thickness.

Some play:
In dark mode, use the slider to adjust the GRAD axis to see how it changes the perceived weight of the font in the adjusted example. Feel free to fine tune the slider to find the perfect balance for your eyes, flipping back and forth, adjust the slider until you see no weight change when flipping themes.

I think it's easier to notice the difference in the paragraph text than the heading text, but you find which is easier to notice for yourself.

It's subtle:
Don't expect this to jump out at you, but you'll struggle to unsee once you see.

Irradiation illusion #

Humans perceive white on black vs black on white differently. We learned it from the world, the way shadows and light have given us biases and expectations. Our squishy human eye has been through some things you know?

GRAD in variable fonts to the rescue #

Before variable fonts, font weight was the only way to adjust the perceived weight of a font, but this changes the glyph size. This can cause accidental layout shift, aka a janky experience.

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

Fixing bold link hovers #

Here, you'll recognize this classic issue. Hover the links in the below demo to see a small preview of the type of layout shift that can occur.

See the Pen by Adam Argyle (@argyleink) on CodePen.

With variable fonts, we can use the GRAD axis to adjust the perceived weight of a font without changing the glyph size.

This allows us to adjust the perceived weight of a font without causing layout shift. That's what the "fixed" example is using.

One step further #

So far we've only adjusted the perceived weight of a font in dark mode with a negative value for GRAD, and for links being hovered that use a positive value for GRAD, but we can go even further:

See the Pen by Adam Argyle (@argyleink) on CodePen.

This allows us to adjust the perceived weight of a font based on the users contrast preferences.

If the user prefers more contrast, without layout shift, we can use a positive value for GRAD to increase the perceived thickness. In dark mode, we can use a negative value for GRAD to reduce the perceived thickness while still maintaining their preference.

body {
  --GRAD: 0;
  font-variation-settings: "GRAD" var(--GRAD);
}

@media (prefers-contrast: more) { body { --GRAD: 700 } }
@media (prefers-contrast: less) { body { --GRAD: -50 } }

@media (prefers-color-scheme: dark)                              { body { --GRAD: -50 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { body { --GRAD: 150 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: less) { body { --GRAD: -150 } }

Users will never ask for something like this. They'll just be able to easily read the content in your design in a way that feels natural.

Time to check if your favorite font has a GRAD axis.

Midi Meets CSS At Beyond Tellerrand - Adam Argyle

2025-11-27T07:16:43.000Z

MIDI Meets CSS; out now on YouTube!

Beyond Tellerrand Talk Done - Adam Argyle

2025-11-07T02:56:09.000Z

My talk Midi Meets CSS is done! Had a blast bein a high energy nerd on stage blastin banjo and beats from a K.O. II.

Marc, BTconf; you rock. Day 1 of the talks have been so inspiring. Stoked for day 2.

On General Musings With Kevin Powell About Interviewing For Frontend Roles In 2025 - Adam Argyle

2025-10-31T14:48:48.000Z

I was on the General Musings show with Kevin Powell 🤘🏻💀

We chat front-end job hunting in 2025, the misalignments between the technical interviews and the roles they were looking to fill, the overall state of the industry and hiring processes and how to distinguish yourself from the crowd.

Audio · Video

Web components know about the user, device, variables, layout and more - Adam Argyle

2025-10-30T23:51:37.000Z

Since I've tried and failed like 3 times to try and write a blog post on "sector driven design" or "smart components," this post is just gonna try and elaborate on what Miriam Suzanne kids a li'l and says "components know stuff."

This is huge though, for development and design.

Components can own all their presentation aspects for nearly any scenario now. They can feel like magic, perfectly adapting to wherever the component author or designer has condoned.

A new one that not enough people talk about is, CSS named container queries. A component can easily know if it's in the sidenav, footer, article area, callout, whatever!

@container --some-area {
  …
}

That's amazing.

No more chasing down all the styles and variations that scatter across your application.

Components are aware of it's user, device, variables, layout and more. In an attempt to get y'all stoked too, here's a list of all the "stuff" that components know.

What kind of stuff? #

Let's create the ultimate list of all the rad "stuff" that components know:

the users preferences
(dark/light, reduced motion, forced-colors, etc)
the users writing and reading preferences
(rtl, lrt, etc)
the user's device size, orientation, and capabilities
(color, pointer, etc)
the app's design system
(colors, spacing, etc)
where they are in the app
(container name queries)
how much space they have
(container size queries)
how many items they contain
(quantity query)
what kind of items they contain
(:has())
what the value of a variable for them is
(style query)
whats in or out of view
(scroll animations)
whether its scrolling or not
(scroll-state)
is the user hovering, focusing or activating elements
whether there's focus within or not
(focus-within)
if there's valid in invalid form inputs
(validity)

Let me know in the comments what I missed.
I'll give ya a shout for your recommendation 🤘🏻💀

An Abundance of Inspiration - Robin Rendle

2025-10-28T16:21:49.000Z

Redesigning this website over the weekend gave me a curious feeling. It was a deeply cozy one, as if my work sits on a continuum of all the other websites and books every made. As if my work is a link in a long chain through time. You’ll likely spot the inspiration right away: this redesign took an LLM copyright approach to Tschichold’s work and his rather beautiful designs for Penguin Books that are still iconic almost a century later.

There’s other inspirations in here, too. Little details, like the code blocks from Chase McCoy’s website which give an air of confidence to an otherwise empty, sad little box of code. Or you can peek under the hood into the code itself and find snippets like this one, the full-bleed CSS utility by Andy Bell:

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

However, the redesign of this website has always been inspired by a new font release and this time Edgar was the one that caught my eye. It’s stately and elegant and sick. Tobias Frere-Jones and Nina Stössinger made a system that’s clearly bookish yet without feeling prudish or uptight about it.

But reading Edgar’s design notes you can follow my inspiration back and connect the dots to other sources of inspiration, too:

“Looking at Caslon again, I realized this wasn’t just some historical artifact. There was something deeper — something still very present and alive,” says Frere-Jones, who felt “an unexpectedly strong reaction” as he pored over the letterforms more intensely. “It was a kind of strange resonance, like when you play a certain note on a speaker and the windows rattle.”

That’s what inspiration is: finding an old thing and watching it move once again, discovering something else in there that you can remix. Or perhaps even rescue.

At the Art of Manga exhibition at the de Young Museum last week I could hear that same hum. With my nose smushed against the glass, zooming in as far as I could to the beautiful sketches and drawings, I could see how all this work was connected: thousands upon thousands of hours. And all of it stacked on top of more work that I couldn’t see underneath with references and inspirations looted from somewhere else then tweaked and applied in strange new ways.

Speaking of which, I’ve been reading William Gibson’s novel Neuromancer lately and it feels as if I’ve found some holy text, the source of truth for all modern sci-fi. Going in I knew the book was an inspiration to dozens of books and videogames and movies but I hadn’t quite grasped the full extent of it:

He’d operated on an almost permanent adrenaline high, a by-product of youth and proficiency, jacked into a custom cyberspace deck that projected his disembodied consciousness into the consensual hallucination that was the matrix.

I gasped as I discovered how throwaway lines or concepts that the novel introduces for a gentle dose of color and world-building have inspired enormous universes of fresh new stories: Night City, decks, eddies, “jacking in”, chrome, corpos, and the goddamn matrix just to name a few.

This was how I felt redesigning my website this time round as there was just so much inspiration that it’s become overwhelming. I want to steal basically everything from anh’s new homepage or bottle up the typographic confidence of Naz’s website. I want to distill the warm welcome of Doug’s and soak up all the the focus and sturdiness of Printing Films and then for good measure package up the ordered curiosity of Mandy’s website. And, of course, I want to put as much effort and energy into a thing as Lucas Pope put into modeling his beautiful boat.

For now this redesign will do. It’s still messy, unfinished in places. Dark mode needs a lot of work. Mobile styles look clunky, too. I’ll continue to polish the infinite-scrolling blog posts (or I’ll get sick of them in a week and quietly cut them). I might re-add an about page or more information about me since that feels a little stark and threadbare today. That stuff is always tricky to figure out though.

But this redesign was a good reminder that I’m always working amongst smart, inquisitive folks and all of them are taking inspiration from unlikely sources and adding their own thing to the mix. There is an abundance of inspiration out there—across media and genre and quirky publishing formats—and I just have to keep my eyes open to see it.

Beyond Tellerrand 2025 - Adam Argyle

2025-10-26T21:04:54.000Z

Stoked for my upcoming talk at Beyond Tellerrand in Berlin next month:

🎶 Midi Meets CSS 🎶

Most folks use WebGL to visualize their audio (and it's awesome) but that's not me, CSS is. I've taken a different approach…

Be there or be aspect-ratio: 1

WWW Ep214 Npm Worms Rubygem Coups - Adam Argyle

2025-10-21T00:20:07.000Z

Ep #214
NPM Worms & RubyGems Coups: Trust Issues in Open Source

Robbie, Chuck, and I talk about the worst whiskey, Tailwind as a “state management library,” recent security scares in open source, NPM dependency hygiene, developer visa drama, and tech salaries.

⤷ whiskey.fm · youtube · spotify · apple

Oops CSS Got Away From Me Send Halp At Cascadiajs 2025 - Adam Argyle

2025-10-12T22:32:11.000Z

You can now watch my talk from CascadiaJS 2025 3 weeks ago 🤘🏻💀

Watch on YouTube

WWW Ep213 With Kevin Powell - Adam Argyle

2025-10-09T12:23:20.000Z

Ep #213
Is CSS A programming language?

Robbie and I chat with Kevin Powell about the quirks and complexities of CSS, Tailwind and Flexbox, AI’s failure to write decent styles, anchor dingles, trim styles, and more.

⤷ whiskey.fm · youtube · spotify · apple

CSS Bluesky Feed - Adam Argyle

2025-10-04T22:44:31.000Z

On Bluesky? Here's a CSS Feed I made 🤓

Try Warp - Adam Argyle

2025-10-03T03:03:08.000Z

Still a fan of Warp, it's good stuff y'all.

On Log Rocket With Kevin And Paige - Adam Argyle

2025-10-02T19:57:24.000Z

Checkout this episode of PodRocket with Kevin Powell, Paige and I; we chat about… you guessed it, CSS!

Watch or Listen

WWW Ep212 With Dave Rupert - Adam Argyle

2025-10-02T14:29:04.000Z

Ep #212
TalkShop Show w/ Macho Man Randy Standards

Robbie and I chat with Dave Rupert about whiskey, web culture, the quirks of building side projects, the shifting landscape of the web, AI-driven development, spec-driven workflows, RSS’s decline, and more.

⤷ whiskey.fm · youtube · spotify · apple

A Rad Function To Be Excited About - Adam Argyle

2025-10-01T05:03:02.000Z

Bramus with a rad snippet:

@function --light-dark(--l, --d) {
  result: if (color-scheme(dark): var(--d); else: var(--l));
}

In 3 lines, a --light-dark() CSS function that works anywhere 🤩

Getting A Frontend Job In 2025 On Frontend Fire - Adam Argyle

2025-09-29T14:38:31.000Z

I joined the good folks on Front-End Fire to share how front-end interviewing is like in 2025, in the age of AI and short attention spans.

⤷ website · youtube · spotify · apple

Sticky Gradient Transitions - Adam Argyle

2025-09-26T15:22:13.000Z

Sticky staggered offsets + gradients = neat transition

Simple version (linear)
Trig version (curves)

Squircles - Adam Argyle

2025-09-26T03:01:58.000Z

Squircles with clip-path: shape()

Try on Codepen

Just Vite It - Adam Argyle

2025-09-25T04:27:27.000Z

Nobody wants to see your ugly config,
Just Vite It.

Scroll To Bloom - Adam Argyle

2025-09-20T18:28:51.000Z

Scroll To Bloom

SO fun.