Posts

One look, one voice: a small design system for my public pages

A fan deck of paper colour swatches, spread out in a rainbow from yellow and green to blue, purple and red.
Photo: Mika Baumeister on Unsplash Image credits

Today I have three small websites: bojica.com, the family front door, silviu.bojica.com, this site, and orgthread.dev, which for now forwards to the page about my open-source project. Soon there will be slides and documents too.

Until this week, they shared their look by copy and paste. That worked for one afternoon.

Two small inconsistencies that made the case

My earlier roles, as a front-end developer and as a product person, trained my eye for details. Small visual inconsistencies jump out at me, the way a typo jumps out at an editor. And I found two.

The first one was in a footer. On bojica.com, the little dots between “Imprint” and “Privacy” were drawn inside the links, so the underline ran under the dots too. The site silviu.bojica.com had already solved this. The fix existed. It just lived in the other kitchen.

The second one was worse. I changed the stylesheet of bojica.com, and my own browser showed the new page with the old styles. The server lets browsers keep a stylesheet for 30 days. The site silviu.bojica.com never had this problem, because its build gives the stylesheet a new name on every change. The family page is plain HTML, so it needed its own answer.

Neither was hard to fix. But both came from the same place: the same decisions, made twice, by hand.

A recipe card for several kitchens

A design system is a recipe card that several kitchens share. You change the recipe once, and every kitchen cooks the same dish.

My design system is small on purpose:

  • Eight colours, for light and dark mode. Blue and orange on a light or a deep navy ground. Never red, and never black as an accent.
  • Two fonts: Space Grotesk for text, JetBrains Mono for small labels. Both are served from my own sites, so no visitor data goes to a font service.
  • A handful of components: a button, a card, a footer, a back link, a list of facts.
  • A few rules that hold everywhere: every page works in light and dark mode, from a phone to a wide screen, links are at least 44 px high, and no page loads anything from another server.

All values live in one file. A short script turns it into the stylesheet the websites use. For slides and documents, the same values sit in tables.

The words are part of the design

Most design systems stop at colours and buttons. My design system also says how the words read, because a page that looks calm but reads in a hurry is not consistent.

So the system has a language chapter. Simple English and short sentences. No contractions and no em dashes. Metric units. Dates with the day name, such as Wednesday, 4 November 2026.

One rule I like in particular is about arrows. A button with → leads to one of my own sites. A button with ↗ leads to a site of someone else, such as GitHub or Instagram. Links in a text follow the same idea: a link to a site of someone else ends in a small ↗, like the links in this post. You can tell before you click whether you stay or leave.

Another rule is about the name of my project. It is written in lower case, always, so it never starts a sentence: a lower-case word at the start of a sentence looks like a typo. I write “With orgthread in between, …” instead.

Open source, and why

The system is public on GitHub: Bojicas Design System. There is also an overview on this site, built with the system itself. The code is under the MIT licence and the docs under CC BY 4.0. My name, the orgthread name and the logos stay mine.

There are two reasons. The first is that I want to work in the open, steadily, and this is part of that work. The second is that small design systems are rare. Most public ones serve large companies with large teams. A design system for one person and a handful of pages may be useful to someone who wants the same calm across their own little corner of the web.

What comes next

Version 0.3.0 is out, and both websites (bojica.com and silviu.bojica.com) already use the design system. The hand-copied code is gone, and the pages look the same as before. After that may come a handful of templates for documents, once I need them for real.

If you use it, or take parts of it, I would like to hear about it.

Feed of all posts