Jacob Berglund

youtu.beJacob Berglund: Rethinking Color: A designer-developer's guide to modern color systems – Refill 2025YouTube video by Variant

19 May 2025

Here’s me, talking about colors, how to put it in systems and most importantly, OKLCH youtu.be/pQ0asU6mB1I #oklch #css #designsystem #designsystems

Jacob Berglund reposted

Geoff Graham

@geoffgraham.me

I'm so gosh-darned excited! css-tricks.com/css-tricks-h...

css-tricks.comCSS-Tricks has a new owner! | CSS-TricksYes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that.

youtube.comJacob Berglund: Variants Varde, kanske ett designsystem - Refill 2026YouTube video by Variant

This is me talking (in swedish, with a hint of norwegian) about some of the niceness of the CSS library/framework/design system I've created for Variant. The good stuff starts at about 01:30. www.youtube.com/watch?v=nZpE...

Jacob Berglund reposted

Keith Cirkel

@keithamus.social

19 Sept

I want Custom Attributes to exist - think Custom Elements (Web Components) but Attributes. I've been working on a proposal, specs, and now a polyfill: www.keithcirkel.co.uk/custom-attri... More coming soon!

keithcirkel.co.ukCustom Attributes polyfill

Jacob Berglund reposted

daniel r(ooooooh) in nyc 🇺🇸

@danielroe.dev

19 Sept

don't be nice.

roe.devDon't be niceSometimes, it's more important to be good than it is to be nice.

18 Sept

Ayyyy! Just released 1.0 of my take on an opinionated CSS framework. varde.variant.dev/docs/ Look, I love packages, but isn't it something magical about just referring to a CSS file? To get fonts, colors and utilities. It's probably not a design system, but it certainly is the foundation of one.

varde.variant.devVarde

18 Sept

Best parts: varde.variant.dev/docs/referen... - The best buttons I ever made. Heavy usage of color-mix. varde.variant.dev/docs/example... - This one show composition of a whole view + color-mode as smaller things varde.variant.dev/docs/example... - Showcases color-mode quite nicely.

varde.variant.devButtons

Jacob Berglund reposted

David Aerne

@meodai.color.pizza

15 Sept

After testing 100s of imgs comparing tiny and big changes to the algo: I am now confident to present to you: The new okpalette.color.pizza. Powerful as before, ~40% faster, better at detecting good presets and much better at finding rare colors! Test it with your pics and let me know what you think

A continuation of my <color-mode> rambling yesterday. OKLCH take the wheel! If a palette is something to be changed and inherited, we could extend with a semantic layer too. And what happens next is positively fascinating. Allow me to demonstrate 🧵

I feel like I've stumbled upon something close to magic in regards to how I want to build design system in the future. This feels like 4x2 and 2x2 LEGO. Not the overly specific ones like a green banana. Colors need not be handpicked in Figma. Color systems will be building blocks instead. kthx!

And add a pinch of JS to switch stuff and you'd get patters such as this (JS required is <color-mode palette="yellow">)

So here's them buttons inheriting palette and inverted color-mode like champs. Oh, and dark mode. Useful or not is yet to be determined!

Patterns starts to emerge. The middle one is inverted and has a shadow. The classes inside remains the same, subtle is still subtle. Button is still button, though it went from an outlined button to a filled one. Button inherits color from the inverted tokens. 🤯

There's actually two semantic layers. A "normal" one and an inverted one. Here's a demonstration of two <color-modes>, the inner one inherits from the first. Both can be inverted independent of each other.

Jacob Berglund reposted

Web Standards

@web-standards.dev

Make your logo brighter than white. Chris Bennett built a tool that turns a logo into a gain-map JPEG, so the colors you pick shine up to 7.5 times brighter than plain white on HDR screens and stay a normal JPEG everywhere else. #color #image www.soverybright.com/

I’m starting to think that colors set in hex (or the like) is akin to magic numbers. Relative colors and color-mix() unlocks a whole bunch new patterns. Example: Borders colors should be relative to backgrounds. Add alpha to it instead of specific hex values.

And if :hover is needed, you just increase the opaqueness, preferably as a custom property. 🧑‍🍳

This opens up borders to be a semantic, regardless of what background it rest on. Subtle or strong is a matter of how much alpha. Sure, it technically becomes different colors based on the background, but I believe it to be an OK trade off. Ugly example from a test bench:

Been hard at work to create an opinionated CSS framework. Best thing in it is what I dubbed <color-mode>. It sets a a color palette and everything inherits from it. The possibilities it opens for composing is positively bonkers. Got 4 different button variants, but color is not an axis. 🧵

It has a few semantic class names for text color and surfaces. These change color depending on the palette chosen in <color-mode>. In other words: color is inherited. Same goes for backgrounds. And why stop there? Also did ”inverted”, which flips it all. In essence a doubling of potential!

lea.verou.meDark mode toggles: two states are enough • Lea VerouYes, the underlying model must have three states, but one is always irrelevant to the actual user goal. Users do not seek out solutions to problems they don’t currently have. A lot of the hate towards...

Here are 2 different color-modes. Grey and blue. Both as inverted and non-inverted, in dark mode. Light mode would look different. What a time to be alive!

Sounds like madness, but really it’s just OKLCH being an absolute top dog. Making it easy to swap out palettes left and right.

Jacob Berglund reposted

Lea Verou, PhD

@lea.verou.me

6 Aug

🔥 New blog post: Dark mode toggles that expose three states (system, light, dark) seem like the best option. Until you think about user goals, that is. Before rushing to disagree, hear me out. lea.verou.me/blog/2026/da... PS: As a data point, @jakearchibald.com was converted after reading this 😅

20 May

How do you do ”default” link styling without interfering if there’s other classes being added to it? Like it looking like a button for example :not([class]) is too much smartness.

3 Mar

Sorry if I’m late to the party, but it occurred to me that cascade layers can be used to show the most important CSS at the top. Like a button with variants. I want the variants up top and not the base. Without cascade layers this requires smartness™. Nice.

github.comGitHub - jberglund/enhance-form: A web component to progressively enhance HTML formsA web component to progressively enhance HTML forms - jberglund/enhance-form

26 Feb

Made a web component to progressively enhance good ol' SSR forms. Introducing <enhance-form>! You wrap a form with it and you'll get inline form validation with minimal effort. Heavily inspired by Unpoly 😍

sugarcube.shsugarcubeDesign tokens, generated CSS, and optional components. Build front ends on strong, reusable foundations.

26 Feb

It makes some assumptions: It posts on blur with a custom header (X-Enhance-Validate). You gotta for that header that, do the validation and not doTheThings(). Make sure you return the same form with a 422 status code. And that's pretty much it. Hey-o!

Jacob Berglund reposted

Mark Tomlinson

@marktomlinson.dev

24 Feb

Sugarcube is now publicly available! sugarcube.sh

24 Feb

I’m done with Spotify. It just doesn’t feel like the app I used to love.

Jacob Berglund reposted

Rebane

@rebane2001.bsky.social

24 Feb

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS lyra.horse/x86css/

20 Feb

130 files changed, 125 insertions(+), 8115 deletions(-) Today was a gooood day. 🪓 Shoutout to knip.dev!

Jacob Berglund reposted

Florian Schepp

@scheppening.com

16 Feb

Just shipped bsky-comments! Embed Bluesky threads anywhere with a zero-dependency Web Component. • Framework Agnostic (Native WC) • < 3kb gzipped • Zero Config: Just paste the Post URL • Light DOM: Fully customizable (CSS/Tailwind) github.com/florianschep... #webdev #opensource #buildinpublic

17 Feb

Made a customizable-face-looking-at-the-cursor thing. Try it out: varianter.github.io/fjes/ Feedback is welcomed 😊

blog.jim-nielsen.comBuilding Websites With LLMSWriting about the big beautiful mess that is making things for the world wide web.

13 Feb

What is a combobox if not a popover, a text input to filter checkboxes/radios? Move the input, add in some arrow navigation and a programmatic click() and you got yourself a A+ LightDOM web component. The progressive enhancement is that it’s just a popover with some radios/checkboxes.

Jacob Berglund reposted

Zach Leatherman

@zachleat.com

12 Feb

gushing over the maintainability and simplicity of @jim-nielsen.com’s menu as a whole dang separate-standalone-HTML-page: blog.jim-nielsen.com/2025/lots-of... (via @dbushell.com)

Jacob Berglund reposted

Cabel Sasser

@cabel.panic.com

11 Feb

over a year ago, i gave a talk at the xoxo conference about a mural, a mcdonald’s, and a man. (but it was also secretly about life, and legacy, and meaning.) finally, i’m blogging the full story, with behind-the-scenes details, and a video of the talk. enjoy. cabel.com/wes-cook-and...

cabel.comWes Cook and the Centralia McDonald's MuralA personal story about discovering a mural in a McDonald's, an unknown artist named Wes Cook, saving the mural, and a conference talk about the whole thing.

jberglund.github.iocss-var-bind - Interactive Demo

11 Feb

Zoom, zoom! Made a demo/docs site for my utility web component css-var-bind. If you've got any suggestions for neat demos/examples, do know that they are appreciated. jberglund.github.io/css-var-bind/ Repo here: github.com/jberglund/cs...

github.comGitHub - jberglund/css-var-bind: A utility web component which binds (and syncs) inputs to CSS variablesA utility web component which binds (and syncs) inputs to CSS variables - jberglund/css-var-bind

11 Feb

I made a thing! This has been my workhorse for experimenting and creating token systems in CSS. Works really well with different input types; number, range, color. github.com/jberglund/cs...

6 Feb

The light dismiss on popover is a game changer. Stacked drawers nested inside each just works as expected. Like…wat? Since when do I not need to bend the arcane arts of the DOM to my liking? Positively delightful.

6 Feb

Standing ovation is in order to everyone involved in Popover API. It’s a beaut’.

Jacob Berglund reposted

Adam Argyle

@nerdy.dev

3 Feb

Wild how far you can push "customizable select" with just #CSS nerdy.dev/nice-select

3 Feb

Hatching a presentation about Progressive Enhancement and bringing things back to server-sided rendering. What questions would need answering? 🤔

29 Jan

As browsers have been getting prrrretty good at removing the need for JS with things like popover, view transitions and so on, I do believe the time for simpler stacks is upon us. Experimenting with hono to just HTML and, dare I say, it is quite delightful. 2026: progressive enhancement is back!

29 Jan

Imagine a form, on a page, with an action which points to itself. That form works ANYWHERE on the site. Now slap a web component on it which prevents the full reload, does fetch instead and swaps the content. Validation ✅ On success redirect is also just HTML, win-win.

youtu.beJacob Berglund: Rethinking Color: A designer-developer's guide to modern color systems – Refill 2025YouTube video by Variant

31 Dec 2025

Looking back at 2025, my own highlight is the talk I put together about color systems using OKLCH. youtu.be/pQ0asU6mB1I #designsystem #css