Open Props – Supercharged CSS Variables

I thought so too, tried putting a max width on the body and centering it. Ended up looking substantially better to my eye.

I think it is that the elements alternate in height between the left and the right columns, creating a weird kind of feeling of instability as you move down the page. The vertical rhythm of the layout creates a feeling of unsettledness and disease.

If you like Pollen, you will like the idea of Fluid Responsive Typography and modular spacing. Check out https://utopia.fyi

If pollen spells out each and every variable, the idea behind utopia will set you with something that you can use a few and it works across various screen sizes.

For colors, start looking at CSS's support OKLCH. It is a tad new but the support is pretty rock solid now. https://oklch.com/

Here is what I think. You can have color variables like `--grey-500` which has the value `light-dark(oklch(mid-value), oklch(another-value))`. Now, you just play with a common color token and your light-dark theme should be taken care of. The tint and shade can be either automated or manually tweak by tinkering with the OKLCH either high/low.

Finally with @container, one might not need to define media-queries at all or at just specific high-level wrappers/containers.

Doesn’t that take the main advantage of Tailwind away, in that I have to name hundreds of arbitrary things again, and inevitably build a crude cascade framework..? I mean I get the idea and it’s sure smart, but not having to come up with a class name hierarchy with Tailwind has been such a boon to my productivity, I wouldn’t want to trade that in.