My Last Component Library

As I built my own lit­tle blog and its sib­ling online course site, I start­ed fresh with com­po­nents and set myself a goal: Nev­er again!

My jour­ney hasn’t just got me geek­ing out about the visu­al side of web design; I’ve also become fas­ci­nat­ed by its under­ly­ing struc­ture. My brief three-year stint study­ing engi­neer­ing clear­ly left a last­ing impression!

I believe beau­ti­ful design is about more than the sur­face (as mil­lions of Dribb­ble designs might have you believe). Good soft­ware feels good. And, just like kick­ing the floors in a new build can reas­sure you, a sol­id foun­da­tion encour­ages commitment.

Strik­ing out on my own felt like the ground had been tak­en away.

CSS Trends

At my old com­pa­ny (for which I’m still so grate­ful), we took pride in build­ing our own frame­works and CSS libraries. We dab­bled in Boot­strap and Tail­wind, but always came back to authored CSS.

They were gen­er­ous enough to let me pur­sue that approach. We went through many trends: SMAC­SS, BEM, SCSS mix­in libraries and name­spacing every­thing. We kept mov­ing for­ward as the tech­nol­o­gy pro­gressed — which, in the dark IE6 years, wasn’t very fast.

To put it blunt­ly, I’ve lost count of how many times we rewrote the but­ton component.

So here I am, once again promis­ing myself: ​“This is the last time I write the CSS for a but­ton component.”

This time, it’s a neces­si­ty, not a whim. Start­ing with a clean slate is as excit­ing as it is daunt­ing, so here we go.

My lat­est last com­po­nent library 

What’s dif­fer­ent this time? Before, acces­si­bil­i­ty was always part of the mix, even if it some­times took a bit of a fight. This time, I call the shots, and acces­si­bil­i­ty is the baseline.

From the ground up, acces­si­bil­i­ty has a seat at the table — there’s a mad mix of metaphors… sor­ry. That means tap areas, con­trast and clar­i­ty, as well as hon­our­ing user preferences.

As it turns out, putting these any­where oth­er than the foun­da­tions would have been a bad idea.

This time, it was also time to let go of Sass. You’ve been good to me, thank you, but you’re still just CSS — and Sass has a prob­lem now. CSS has become so capa­ble that, rather than bridg­ing a gap, Sass is play­ing catch-up, rework­ing fea­tures that have become native to CSS. Func­tions are now in CSS itself; mix­ins are coming…

What’s more, this frees you to cre­ate the tool­ing you need to make life eas­i­er. More on that later.

Atom­ic design 

I leaned ful­ly into Brad Frost’s Atom­ic Design and Token Sys­tem.

For those unfa­mil­iar with atom­ic design, it organ­is­es com­po­nents from fun­da­men­tal, indi­vis­i­ble atoms to small struc­tures (mol­e­cules), then on to larg­er ​“organ­isms”, like a page header.

A token sys­tem formed the core of them­ing: every­thing, from colour ramps to a button’s bor­der radius, could be con­trolled there.

At my old work­place, we had many dis­cus­sions about com­po­nent name­spaces: c- for com­po­nents, l- for lay­outs and u- for util­i­ties. This time, I chose… none. That’s right! Name­spaces are gone. A but­ton is ​“but­ton”.

Ramps and scales 

The token sys­tem brought colour ramps and type scales. Before, we tweaked them so often that the scales became obso­lete. This time, the ramps and scales are foun­da­tion­al: if a font size or colour didn’t feel right, I adjust­ed the scales or ramps.

I also embraced new tech­niques. I men­tioned acces­si­bil­i­ty as the base­line; there’s anoth­er Base­line. My rule was to use ​“Wide­ly Avail­able” tech­niques, and reserve ​“New­ly Avail­able” ones for pro­gres­sive enhancement.

This means future ver­sions of the library will both grow and shrink. As ​“New­ly Avail­able” becomes ​“Wide­ly Avail­able”, I can drop old­er tech­niques. Of course, that’s not some­thing to do blind­ly. Under­stand­ing CSS, its quirks and how to use your judge­ment are still huge­ly important.

I’ll expand on some of these approach­es in future articles.

New tools

I men­tioned tool­ing. This is where the com­po­nent library takes things to the next lev­el. I need­ed two main things: a UI for tweak­ing tokens and a way to sync vari­ables between CSS and Figma.

I start­ed by sync­ing to Fig­ma. Tokens are stored in a JSON file, and a script I built pre­pares files for Fig­ma. It was so cool to see changes in the library appear in Fig­ma designs with just a few clicks.

Then came the token UI. It meant I could stop dig­ging around in JSON files and use an inter­face instead.

I built a colour ramp sys­tem and a type scale sys­tem, both of which run along­side AXE to check for poten­tial acces­si­bil­i­ty vio­la­tions. Colour is built on OKLCH, which offers a wider gamut and han­dles light­ness more even­ly than, say, HSL or sRGB, regard­less of hue. A yellow-600, for instance, is visu­al­ly the same light­ness as blue-600.

The ramp sys­tem lets you adjust a light­ness curve, choose how sat­u­rat­ed you want your colours to be, or tweak each ramp individually.

The typog­ra­phy tool lets you choose scales and design flu­id sizes that adjust to screen size. ​“Floor” and ​“ceil­ing” lim­its help pre­vent text from break­ing at 200% zoom.

I won’t go into the oth­er tools this inter­face pro­vides; suf­fice it to say, it’s made them­ing a dream. Light­house loves me.

I have so much more to say about this.

AI side­note

Now, did I use AI? Of course. This would have been impos­si­ble with­out it. But what’s my take? It’s a machine, like a cal­cu­la­tor or a dish­wash­er. It does what a machine does. That’s all it is to me: it’s not a per­son. And peo­ple have used machines since for­ev­er, so it would be rude not to.

A source of truth 

The last piece of the puz­zle was fin­ish­ing the work in Fig­ma. In Novem­ber 2026, there’s no point in let­ting code and Fig­ma fall out of sync. I remem­ber con­stant­ly hav­ing to rework the Fig­ma file we called our ​“source of truth”.

“Hey, my devel­op­er friend, what you’ve done there looks a bit dif­fer­ent from Figma.”

“There’s a Figma?”

You know how it goes. With the token design­er, though, the source of truth moves between the two dis­ci­plines. It makes much more sense to check how things look on the web as ear­ly as pos­si­ble, before mov­ing on to code or Fig­ma. Again, things have to ​“feel” right.

And with the Com­po­nent Library for Fig­ma built too, I hope this real­ly is my last button.

Okay, I’m going to stop now. I’ll write more about what I’ve learnt from this project, and I’m look­ing for­ward to shar­ing it with the world soon.