Gökberk Design System

A design system I made for myself and hobby projects — imagining myself as a brand.

When I was at Scania, at some point we had to use a design system in our applications, internally developed by another team. This was my first introduction to what a design system is; I had to dig into their repo back then to understand how things were implemented. Scania’s design system was web-components based, so it was an interesting learning experience for me — I met some cool people there, and understood their way of thinking and approach to frontend development.

Since then I’ve expanded my view on design systems: I checked out other brands and tech companies, went to a couple of meetups about design systems, and so on. It’s an interesting topic, though. I think it’s super important for serious brands and digital products to have a tone — but as individuals, why not make one for myself? This is a personal challenge to develop a design system, both technically and UX-wise.

I started by thinking about accessibility first and being fully AAA compliant; since I’m not a real brand and don’t have legacy colours from the past, I can be flexible and select my colours accordingly. I picked green because I like the colour — it reminds me of the Aegean forests around İzmir, where I grew up. That’s why I called it Ionian green. I also wanted to have good, nice motion, without being too janky or disturbing. I had to do a bit of research there, as this is a bit of a foreign domain for me in terms of best practices.

I got influenced a lot by other design systems; one of them was Adobe’s Spectrum, another IBM’s Carbon, and some others. I used Lit, and it’s web components.