Let's face it; we all have to relearn how to make the browser design for us. But what does that mean, "design for us"? Do we want lay-out, responsive design, or theming? All of it?

I've recently put a lot of work into naming things succinctly, which is a fancy way of saying relatively in perception. Naming things is hard, really hard. And S.A.D. So lets start, and end, sad, so we can make happy little accidents in between. And a happy little bush of CSS.

lRRDhGWk.jpg

S.A.D. is my personal design principle for keeping things Salient, Accessible and Do-able, or it didn't happen. Salient is a way of saying "instinctively clear on first-sight", no manual needed. Like a name, an icon, instantly recognizable at face-value. A happy face to see😇

Heart of Inclusion.png

A logo I made using a blown-up version of "the heart of inclusion". I never used it for anything but so here it is; the logo for the dDS: Two-FACE. Like CMYK-colors that are kissing, interfacing, indiscriminately. I like that :)

On that topic: there's no API for naming things, there's no methodology, there's no system for naming things in systems. Language is a technology and words frame the mind. A perception.

Atomic Design is not a methodology but simply a perception of grouping and ordering, not naming. Yet I see it mentioned many times, yet like UFO; never seen in the actual naming itself.

To be honest, that's mostly because we think in systems of complexity, not simplicity. There's no alternative than the tech-savy way of design systems. There's no Bob Ross who can "teach us how to paint" and make happy little trees...

Untill now: meet Two-FACE, a dutch design system (dDS) that makes the browser design a face for you, no dependencies, just CSS to show how you can paint like Tailwind without any opinionated design choices. Dial up two digits, and you have a brand new FACE!

IqBNWx2gbP.gif

Dialing up the cyaan FACE-value from #00face to #44face to #88face, using just two digits to control the cyaan color-channel. This process can be repeated for the other colors magenta and yellow too. Just like with paint.

Just plug in some CMYK color theory in under 7 minutes, and you're good to go! It resembles the same process as print, and it's memorable by hand and heart! Just what we want; the Bob Ross experience.

Here's a refresher image if you have that already under your belt, but the main difference is simply this; you can't print white... Really that's it, you can make CMYK with RGB. I'll show you later.

https://blog.tubikstudio.com/wp-content/uploads/2017/03/difference-between-RGB-CMYK.jpg

Here's the DS demo I made based on Adam Argyle's Shadow Offset Menu game-menu demo;

https://codepen.io/alolalo/pen/eYRpRQZ

Codepen by justgu.us showing how theming can be applied with a utility-driven approach inside CSS, without any dependencies or frameworks, and works just as nice as Tailwind

Utility-driven vs Utility-first vs Utility-only