One skeleton, many skins

Every product needed the same pieces, built again: a dialog, a dropdown, a toast. Three products meant three dialogs: one that closed on Escape, one that kept focus inside, one that did neither. Each copy drifted a little further from the last one, and accessibility got checked again from scratch every time, or not at all.

The mission is one skeleton under every product: build the accessible core once, then let every brand put on its own skin. A new brand means a new skin, never a new implementation, so a new look cannot break what the core already guarantees.

What makes it different in its field is how little it asks. The classes are plain CSS, so the whole library ships as a stylesheet and never needs a framework: the same markup runs in plain HTML, Astro, Next.js or React. A dialog is a real <dialog> and a menu a real popover; where a script is needed, it stays under 1.5 KB gzipped. You change the skin, not the code.

Calaca is my favorite word in Spanish. I learned it from my Mexican family: my wife is Mexican, and thanks to her and her family my interest in Mexican culture has only grown. It is a small word with a warm sound, and it stuck with me from the first time I heard it.

A calaca is a skeleton, but not the spooky kind. In Mexico the calaca is the friendly one: the skeleton you dress up, paint with flowers and celebrate during the Day of the Dead. Catrina, the most famous calaca, is elegant, a little funny and completely unafraid. The word already carries the feeling I wanted this library to have: handmade, festive and warm, never cold or corporate.

I liked the word before I knew what I would build. When the component library took shape, the fit was immediate: one skeleton that stays the same, and a skin for every product. The name did not describe the project afterwards. It described the idea from the start.

I live in Drachten, in Friesland, with my wife and our son, where the flat land runs straight into the Wadden Sea. Most of my working life sits between two disciplines that are usually pulled apart: I design the interface and I build it, so nothing gets lost in translation between a mockup and a stylesheet.

For businesses I do web design, front-end development and branding, from the first concept to a site that has to make an impression and keep working.

I work for NHL Stenden, a university of applied sciences in Leeuwarden, where I build websites and apps for the academy of Media, Commerce & Entrepreneurship and the Creative Business programme.

I help students with everything I know about design, for print and for the web, and I gladly share my knowledge and experience to help them grow. Together with my colleagues I also organize workshops focused on practical skills and on stimulating creativity.

How I work follows one rule: understandable and logical above all. I am always looking for the solution that works best for me, the way I actually see and use things: easy to grasp, without unnecessary complexity. Over-engineered solutions put me off, because they are often impractical and hard to handle. I keep things simple, clear and easy to maintain, so I can work fast and efficiently, without obstacles in the way.

I have always been endlessly curious, constantly looking for answers and new insights. Why do they do it this way and not another? What are the underlying reasons and considerations behind their approach? And how can I improve my workflow so I never have to do the same work twice, so I work faster and more effectively?

You can find more about the work at martijnbokma.nl.