CSS and design systems people - BlogFlock

Games Of December 2025 - Adam Argyle

2025-12-27T06:12:36.000Z

Some people read about the hero, some people play as the hero. If you don't play video games, you have 2 choices:

Suffer through my ramblings
Realize you're missing out and give one of these a try

Here's what we've been playing:

Skate Story #

You're a glass skateboarder stuck in the Underworld who has to skate to (get out?). A rad soundtrack, interesting visuals, and a weird story.

Steam

Wheel World #

Ride a fixie through cell shaded worlds to a chill beat. Race others, discover stuff, collect things, and just take in the atmosphere.

Steam

Lego Voyagers #

We loved Lego Builder's Journey, and this one has local co-op (our favorite). Play as 2 little Lego's who admire rocket ships and want to build one. Use your building skills and unravel the visually engaging and beautifully lit story.

Steam

Bubble Bobble Sugar Dungeons #

We love retro games around here and got super pumped when we saw they were making a 2025 version of Bubble Bobble. BUT, we played Sugar Dungeons a few times and were disappointed it was single player. While it's fine… it's lacking some soul. It's just a bit bland and doesn't really tickle the nostalgia bug like we hoped.

Steam

Dorf Romantik (the Boardgame) #

This house has played a lot of Dorf Romantik the video game. Everyone, young to old, feels satisfied with the cozy yet solitaire-like experience you get from this game. The board game does an AMAZING job of capturing the charm of the video game while combining it with the limitations of a board game.

The board game is beautifully done, creating a compelling campaign arc, unlocks, and other exciting elements.

Board Game

Ball Pit #

Whelp, we got super addicted to this one. Very arcade-like, super fun roguelike-style gameplay, and a fun gameloop. Super fun 5-20 minute sessions.

Steam

Just Shapes and Beats #

Connect up to 4 controllers and dodge the shapes as they react to the beat. Each level is a full on custom visual beat experience to a track from a rad retro-bit playlist. All you gotta do is dodge stuff, you can move a stick right?

Steam

Curse Of The Dead Gods #

Mix a little Hades with FTL and you've got yourself this roguelite. See how far you can get, do your best not to get hit, get some synergy in a sweet build, hack and slash your way to freedom.

Steam

Bring The Color - Adam Argyle

2025-12-16T07:05:00.000Z

Bring the color in at gradient.style

So Many Websites - Robin Rendle

2025-12-14T18:06:50.000Z

I’ve been thinking about the web and how it’ll change with the increasingly…uh…worrying decline of search. It feels like the order of their results can no longer be trusted, the web no longer reliably scraped. Instead, this essential tool we’ve relied on for more than two decades has halted all progress, reversed course. In a heart beat I would pick the search engine of 2014 over the one I use today.

So there’s a lot of anxiety out there about how this fundamentally changes the economics of the web. Folks are worried that without search functioning properly then the web itself is fading away, becoming irrelevant, or already even broken beyond repair. But I disagree! The premise at the heart of these conversations is that websites deserve and require a mass readership to be important or worthwhile. But what if they don’t?

Sure, a lot of businesses were built around the economics of search and ten billion people looking at a block of text imprisoned by a swamp of ads for cars and questionable dietary supplements. Although, that doesn’t mean the web itself requires that specific business model to thrive, to still be worthwhile, to still be important. My hot take here is that ugly business models created ugly websites, but I digress.

This idea has been rolling around my head since I started reading So Many Books by Gabriel Zaid where he writes: “It is worth asking, in the first place, whether all books need or deserve a mass readership.” Yikes! Whoa! This line hit me like a ton of bricks because most business models on the web have assumed a mass readership is out there—but what if it isn’t? What if the web, and most websites besides the few obvious exceptions, were instead more like book publishing? A few thousand dedicated readers out there, at best.

I can feel the disappointment in the conversations I’ve been listening to, as if the whole point of the web is to exist at bewildering, eye-watering scale. A million clicks is so lame, man, when compared to a billion. Heck, your website only gets fifty trillion clicks a day? Is there a point to publishing that dinky website if it’s so small?

But perhaps the death of search is good for the future of the web. Perhaps websites can be free of dumb rankings and junky ads that are designed to make fractions of a penny at a time. Perhaps the web needs to be released from the burden of this business model. Perhaps mass readership isn’t possible for the vast majority of websites and was never really sustainable in the first place.

And perhaps we should let our websites be small and private things once again.

CSS Text Grow - Adam Argyle

2025-12-05T06:34:16.000Z

Fit width text in 1 line of CSS:

h1 {
  text-grow: per-line scale;
}

Prototype available in Canary 165

Codepen · CSSWG · Explainer · Prior Art

On The Ux Show - Adam Argyle

2025-12-02T00:29:57.000Z

Was on The UX Show with Yash Raj and Victor Sanchez 🤓

Watch it on YouTube

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 🤩