Armagan Amcalar: Rethinking Colors in Design Systems: A CSS Approach to Idiomatic Design

In this talk, Aman Amelar discusses the complexities of using colors within design systems from a CSS perspective, highlighting common issues faced by frontend developers. He notes the challenge of managing color variables, particularly in frameworks like Atlassian and Ant Design, where developers often deal with a plethora of color shades and tokens that can lead to confusion and inconsistency in UI design. Aman emphasizes the need for a more structured approach to color management, proposing an algorithmic method for defining and utilizing colors effectively based on their hue, saturation, and purpose. The session culminates in demonstrating a solution that allows UI developers to easily implement consistent color choices without deep diving into complex specifications, thereby enhancing collaboration between designers and developers.

hello everyone and welcome to the last talk for this room for today uh we are glad to have uh Aman here uh who will talk uh about rethinking colors in Design Systems a CSS approach to aromatic design I must um it is a long time ago than that I looked into CSS so I'm really curious to see uh what what has changed and what your approach is

in new design and thank you very much have fun hello so let's pretend no one from the organization is here and let's rate how tired we are if you're tired put your hands up okay if you're not tired and you're dying to see some hardcore CSS put your up interesting okay so I hope I'm not gonna bore you to death with um the tiny nitty-gritty details that

I pay attention to and I hope this is going to be a shared concern going forward um oh nice slide is already up there so before we start um who is a front end engineer okay um now raise your hands if you are working with colors even if you're not a front L engineer like in in CSS in web development all right okay um today we're going

to talk about some problems and I'm going to start with your problems that you're having in dealing with colors in CSS but before we do that it's customary that I introduce myself I'm Arman Arman amelar I live in Berlin for the past 10 years I am right now a fractional CTO and that doesn't mean I'm half a CTO that means I'm working for multiple companies um NE

and open serve are two companies that I work with right now I love open source and I have a lot of fun experiments from back end to front end to brain signals um I have a JavaScript project that allows you to type with your brain signals if you have that headset above that one that I'm using and it's fully open source and has been for the last

six years I I guess so if you haven't heard about it maybe um this weekend you might want to check it out I also write a lot of Frameworks front end and back end Frameworks and this is kind of where this comes from this each comes from because at every new company that I work for there's a desire to create a new design system and whenever I

have the chance to create a new design system I um my experience is what I have done in the past and I try to do better this time and this talk is practically um a story that came out of one of those struggles that I had but before we start I also love to do interactive sessions it helps people um stay awake so um you can raise

your hands and tell me if you had any problems with colors in Design Systems what is your experience how do you work with color what is a typical color implementation for you like you write background color color and what comes afterwards what do you type and don't be shy we're all friends here and I just want to help you out so I'm not going to bite please

you write a column yes what comes afterwards a new line okay interesting so you use you go like background color colon new line oh okay all right so you write the hexadecimal series of numbers right either three four six or eight and never eight does it does anyone know what happens if you have eight characters after the pound sign in a color declaration please yes they are

alpha values so you're practically doing rgba which is great um and if you didn't know maybe that's the only thing you can remember out of this session but I'm very happy that we're starting to to generate value everyone okay any other types of writing colors I assume like like is that how you always do colors in in a project yeah you have custom properties hsl nice does

anyone know what hsl stand for not you you obviously know it anyone else no one I guess yes someone over there Hue saturation and luminesence yes this Hue thing is huge pun unintended um it's going to come up a lot I guess throughout the day it's practically what defines the color in the color wheel um you pick the Hue and then in hsl mode you can pick

saturation to define whether it's like gray scale or very saturated and um Luminosity luminousness lightness I actually always confuse those and that kind of tells about the brightness of the color so in RGB mode you have red green and blue three different values to define a color and it's a mixture of those numbers in hsl you have Hue which defines the tone the actual color once and

then you have parameters modifiers on top for saturation and for lightness or Luminosity actually someone can look that up so that I don't like keep making the same mistake forever in the so um all right so you have custom variables sometimes to Define some colors what happens if you need to change one color to another one like change all the blues to Red what does that workflow

look like M A designed toolkit so that we can change quickly how how would it work you have file for color constants that Define all the colors that you have and hopefully you define all the the blues once there right um is there anyone with that kind of an experience I've never seen a project that can define a color only in one place because there are like

hover colors right um something like what happens when it's active what happens when it's a um warning or background or a border color um anyway so I have had a lot of problems with this I'm not sure how much of those problems are resonating in the room right now but I hope it's going to be more and more clear when you see this so raise your hands

if you ever saw something like this in your developer Journey very good only so few people you're so lucky the rest of you if you haven't seen anything like this this is kind of a nightmare for a frontend engineer because the design system and this one in particular is from at atlassian do you know the company atlassian they make jir like very famous right they also have

a design system of course that they want us to use and they're doing a pretty good job actually but I'm not sure if we can really call it a design system and I'm going to talk more about this in in a little bit but this is basically what they give you for colors they give you saturated colors that's what they say and a lot of shades of

those colors and then you are free to do whatever you like with them now your designer picked picks some colors out of this some shades and gives them to you in terms of variables and you're supposed to use them and sometimes there are like for each color you pick like five or six different shades because you want different shades for for everything and it's maybe yeah it

becomes something this you might have some variable names like this um like I don't know Canan 300 400 purple Indigo 700 and the these are the colors that you define and use but the problem is my first problem and I'm I would love to know if you agree these numbers just don't mean anything to me and I'm struggling a little bit with short and long-term memory so

I can actually never remember like what numbers were we using and these are all available to me in the design system and this is from bootstrap so how do I know if I need to implement a design let's say the designer is modern and they did something in figma how do I know which color it is I click the element I look at the variable that they're

using and it turns out that it's 500 and that's what I type in my CSS that's a very um standard common workflow in work working Systems and then companies are trying to help with this atlastin has a lot of really nice tokens that you can use color text so everything starts with color it's a variable it's a JavaScript object and a CSS object and and everything um

so you can Define well they use CSS injs so you can define color text or color icon accent green or color ground brand bold now these are names you can remember and autocomplete really helps in this situation it pulls up whatever you have available but then this still doesn't really prevent you from making mistakes of combining different colors that shouldn't go together because these are all variables

that are available to you and in your designs whatever you want like you have a box that you want to color you can use any of those so how do you know again which one to use the answer is unfortunately you don't um oh yeah this is also a very similar um or I guess common implementation in in color you have something like this color purple color

yellow 300 Indigo 900 and your entire application is full of these things and what happens if you decide that let's say for accessibility reasons you need to change background colors to a different color or shade how are you going to go about that you cannot find and replace all Indigo 900s you cannot go and replace all yellow 300s it's just doesn't work like that and some items

need a different shade of indigo and some items need a so how is it going so far do any of these things relate with what you're doing daily please raise your hand and it's okay to not like I'm not going to be offended because I I I'm telling you like this is a niche problem that I had and I thought multiple people would have a similar problem

and that's why I'm here this is from Ant design exactly the same thing they give you magenta 10 geek Blue 5 it's almost like hair dye colors right you go to a shop and you buy some dyes for a hair they also come in numbers or so I'm told it's very difficult but yeah thank you for catching that one so look at this this is how you

do it in ant design you are defining your theme right and you have to pick something color success background hover that is legitimately something that you need to use or customize how are you going to find what you need here and if you want to make some of the colors look like the others like let's say you want to you want to have color success text and

color success border the same it's very difficult to manage this like you are like they they show down all of the variables in your face and it feels like these things are designed from a perspective this is carbon does anyone know who owns carbon Who develops carbon that one it's IBM I'm not surprised um but they also do a great job all of the design systems that

I've talked about or the Frameworks or whatever you call them are doing a great job in working with components layouts everything um and also some are doing great with uh with colors as well but I could say color is the weakest link there only beaten by accessibility accessibility is unfortunately the worst accessibility support anyway the problems with color how do you know which Shades you need to

use when in hover in active When You tab with keyboard navigation how do you know which Shades you need I can never remember those numbers when we use 700 I don't I cannot even remember them for fonts and for fonts we only have like five or six categories like light regular bold Bolder and so on like I can never know the exact font number um you have

to know which tokens you your your design system gives you and the problem is again there's nothing that prevents you from messing with color you can write color declarations in anywhere in your CSS and make something a different color and your designers or your product managers May demand that from you they might say hey do this different color yeah why are we doing ideas like why is

this the default way of dealing with CSS or or colors there is no other way good very good yes any other thoughts should there be a better way like raise your hand if you agree if there should be a better way of dealing colors well almost everyone okay good great um I also um agree and the the question is are we developing a framework for Design Systems

or are we developing a design system I think that's the the biggest question that we need to answer most of what I shown you ant design carbon bootstrap whatever they are not Systems in their own rights there are Frameworks for building design systems and you should probably never use them as they come out of the box because they give you too much flexibility and not enough constraints

and one of the the biggest benefits of a design system is that it gives you a lot of constraints it prevents you from doing mistakes right it helps you facilitates faster better more consistent designs by sometimes giving you the opportunity to build your own user interfaces and experiences without the help of designer because there are patterns that you put together an input box a button they make

a form and like that's part of your design system your and there I guess we come to a conclusion that it's actually a big problem that there are so many colors and all of these variables are open to us if you're building a single like Windows Mac OS and you get the idea of a single application or a web application like Airbnb you maybe need like five

colors and five Shades but they have very specific purposes so um again I told you in the beginning that this came out of a journey that we had at neol designing a design system from scratch and of course we started with color as well and my designer came up with a color palette that they wanted to use and they defined this like seven main colors and it's

a very colorful web page so we want to be abundant with color like everywhere the designers might choose to use a different color so we have these seven colors and then they you said you know we're going to have like 15 Shades 13 shades for each and this is the same Nightmare and I said well we shouldn't really do this it's not really useful and the way

they do is by picking these colors and then doing operations with them and this is kind of a spoiler but then we reduced it to this small pallette of I don't know 35 colors you might have a hard time seeing but there's a another column here so this was our set I'm I'm separating black white and gray Shades because they serve a different purpose but these were

the um the colors that we came up with and there is a specific alignment Within These colors can you spot anything if you look at these colors and their shades there's a specific correlation anyone same yeah same Hue yeah yeah so the goal in the goal for colors in design is of course like you want different shades but but you try to make them as realistic as

possible so when you're using purple you want all shades of purple to have the same Hue the same sweetness the same color I don't actually know how to define hue um it's the tone of the color the the dictionaries also don't really help and you just play with brightness but brightness is very tricky how do you add brightness to something and E way is to add some

white to it or when you want to add Darkness an easy way is to add some black to it to come up with different shades and this is practically um what we did but it was very difficult and maybe this is the the the most difficult part in terms of coming up with these um Shades the designers have to sit through this with a screen on their

faces basically to make sure that the luminance and and like all of the other colors um or parameters are the same in different shades across different colors so we can use them interchangeably so here's the thing a design system has three roles working on it one is the designer the other one is the person who's developing the design system and the other one is the person who

is developing the UI with that design system so designer wants to use as many colors as possible they want creative flexibility the design system developer does not want to increase the number of colors they want to limit it and they want a structure around those colors and the UI developer just wants the simplest implementation as simple as possible so whenever you're building uis you should not have

to think of which color to apply basically the KVs that I talked about and it should be really really straightforward like you should be able to understand at a glance what color an implementation is without looking at figma without looking at like oh what is this in Hover okay what is this in um in active state right now when you're um developing a new UI so um

we need a better approach I'm happy that we all align on this as well to align all three roles the designers the um design system developers and the UI developers as well it should feel natural easy to create think of and use now here's an example in code this is very simple um HTML code here and like it should this how do I add color to this

there's a card component here the background is white there's a card component with some some shadow um H1 some text some inputs with orders and stuff if you look at it though there are multiple Shades can you actually count how many different shades there are in this three four five I guess I counted five this is ugly to code this means like you you have we call

this called Rose this color rose you need to use row 100 200 300 4 and 500 separately for different aspects code and there is no like correlation between them right like this is not maintainable and this is this is very close to an actual design of course very difficult to see right so like this is white here but this is not white uh this card has a

very um light background color of the same Hue and inputs as well they have different backgrounds and different borders and so so the bigger problem is when I want to have multiple of these things how does that actually work now I need to add five more variables right and I need to make sure that the Border here has the same number like 500 as the Border here

that is tough and again this is a this is very close to an actual design that we had not in terms of login but with other components inside and this is a realistic need in certain um web design elements so why are we struggling with colors why do we do this and what can be an alternative Choice can we think algorithmically about this thing and that's practically

what we set out to do um I asked our design team to come up with the same mechanism for each color to create the shades and these like in this direction you get these Colors by adding white and in this direction you get the Colors by adding black and now not all shades work well together and I asked them to pick five shades and they said okay

the tens are very similar the 20s are very similar to one another the 30s the 50s and so on so they picked multiple Shades um that look very similar in terms ter of hue and brightness um like saturation and brightness in the vertical axis and then I said okay that's great so let's Implement that as a function what shade as a function of how should we Define

this amount of light interesting oh amount of white right yeah that definitely has to be a parameter right the the amount of white and also the amount of black in in those colors but what is it a function of sorry importance very good we're almost getting there so I'm not going to uh bore you to this because this is a very disgusting word I couldn't find a

better term for this shade is a function of function so the first function is a mathematical function and the second function is its use and that is for borders all the borders in your application should have the same tint or the same function like take the base color are you going to add add 20% white to it for the borders you add 20% white to all your

all of your base colors are you going to add 30% black to a background in the dark mode do that so um in design nothing is used or built just because it's fancy they are built because they serve a purpose and I I was thinking of like changing the the slides before the talk like shade as a function of purpose maybe that could also work well but

it's basically um what we need and Frameworks have finally acknowledged this and they are offering certain programmatic color manipulation because no one can manage those numbers anymore but it's still very deep in the uh framework we have to dig them out and you can literally change the algorithm that creates the shades and if you have a centralized way of applying those Shades then you solve your CSS

color problem um and design is one of my favorites I have a separate package to calculate these colors it happens in runtime so not very easy to change uh sorry it happens at compile time not very easy to change in R time because it gives you fixed colors um hex numbers bootstrap has two functions tint color shade color and all the others um that I have cited

today have uh similar Solutions but I actually want to show something let's see where are we oh here we are so this is the same UI let's make it super big maybe the colors will be visible then and oh no ugly and I want to change its color so the UI application developer should be able to do just this and all of the colors and all of

the functions should update automatically I can have blue or one of the colors that we have is grass and you don't need to change anything no color if you want to apply multiple colors to a design and if you want to let your designers to be as creative as they want but you still need consistency in everything and you do practically and if I'm sure you're not

noticing it but the Box Shadow is also changing color because in color theory not all Shadows are black it's a mixture of its color especially if it's giving a flight so this should be the the solution to my problem just by changing what I see and if I look at the design I can tell well okay this is grass or we have another color Sun well this

is built in Sun if you're not color blind this is straightforward to see and you don't have to worry with any other color um in your application the way to achieve this wait is this interesting so far are you sure okay let's see how this works so now we're looking at the design system code I declare a tinted class and I just declare the colors in it

so for H1s I mix black 80% for paragraphs I mix black at 30% so black is 70% and the original color is 30% for the card we have background color border color box Shadow for the inputs we have our colors and this is written only once you write this only once so that no one has to deal with color again so whatever color you have in your

application you define in a cent light place like this and no one touches that and of course there's a one more um level of detail in the design system and it's your actual root colors at the root you can Define um your variables your color variables this typical and you can have um some CSS classes to add them so in your HTML you ride card which is

tinted in the sun color so what sun does is to [Music] bring this as a CSS variable here setting the color to Sun and then you just have two functions color mix which is a relatively new CSS functionality I think it's supported by around 90% of the browsers which is really good like all major browsers and all major versions support this which is unfortunately not true for

some CSS properties like relative color to derive color from another derive take a base color and derive um change some parameters to it of it for example in hsl take an RGB color and in hsl change the saturation or Luminosity that's unfortunately not supported in every browser um there's no support in Firefox yet it's going to come in the next version um in Safari there's only partial

support that's why I had to show you some example Cod of how you could achieve a similar thing in Safari unfortunately um you have to do a fallback but color mix is widely supported and all it does is to take a color and add another color to it at a certain weight I'm using SAS here you didn't have to um like you can directly hardcode this into

your um your Styles as well this would also work but I just wanted to spice things up a little bit and um remove some of the noise so with this you can have an algorithmic way of defining what your colors are and no one has to worry about any differences or Shades in color anymore your designers are happy because colors are consistent they're always applied with this

certain set of rules that have been defined no one touches this file and your design system developers are happy developers application or UI developers don't use random colors the only parameter the application developer can change here is what class they can add to this let's go back to row I like it this is it so this is very idiomatic in terms of here application development just tinted

with rows in terms of design system development this is now an actual design system that your teams can use because it's giving you a lot of constraints and then some variables to make it all happen all right we don't have much time left so I want to ask if you have any questions yes yes very good question what would I do I think I would add another

tinted div here this let's see if this actually will work I have no idea I've never tried this well I mean this is not going to be a card right the input is blue maybe if I do this yeah works so if you want to color anything just add tinted to it and then type the name of the please uh it doesn't do anything other than to

apply these yeah it's just a parent class so that you know regular H ones don't get colors only the tinted ones do and there's a ple of ways to write this CSS like you could change it you like but um you know it's very simple now my actual question is why is this not a default way of working with colors in CSS and in building applications there

has to be a catch somewhere right with respect to what we're used to doing and I don't know any other questions please so I actually found a way to do that I had an attribute called DS for design system to a parent element like the buddy I wish we could do this because this would mean all of your application is running with the new design system I

add something like this data DS3 you can add this to any component that you have moved over to this new system and then you do tinted should apply only to data DS equals 3 you use an attribute selector to just you know apply this to the to the components that you have carried over does that make sense thank you any other questions please um good what is

the difference between color mix and color mix relative so these are two different syntaxes two different functionalities um that is made available in CSS color mix only allows you to um mix two colors but not play with different parameters so you can mix blue and yellow but not take blue as a color and add more uh um Brown to it and then you know or or add

more red and change the green and zero out the blue so relative allows you to do that relative allows you to take it apart to all parameters so you can change you can actually see here um I'm taking the srgb color and changing the r and the G and the B individually so you can also take an RGB color and change lch or okl CH color domain

um and play with all the parameters or hsl as well and unfortunately we are out of time but I had one last slide what about other color spaces because CSS allows you to use many different color spaces and I'm going to leave this as a homework to you because I'm also a teacher and I like doing this thing um if you're interested in color please play with

different color modes color spaces like hsl there is a very good web page that allows you to play with okl C which is trying to achieve basically what I just showed to you in a different way it's very wonky this is like a very nice tool to play with um so please play with it n see um and in the presentation I also have a couple of

resources this article is amazing evil Martian's article on okl CH um when you get the slides you can look it up and hopefully you're going to have as many troubles as I do with CSS colors and also the solution thank you very much thank you we have actually two more questions uh one is how to pick color and what shade intensity to use for compliance very good

I'm very happy to at least tell you that there are online applications that measure accessibility and the the biggest thing about accessibility is contrast of um between the pixels background color foreground color text or boxes and when you're applying these to your design system there are um browser extensions that you can also add um to to your browser to measure these difference in fact Google Chrome developer

tools also does that gives you a contrast ratio and you just make sure that it's um they also give you scores you make sure it's a a double a um for accessibility that's a very high Mark and if you're not getting double A you should change your Shades basically and the last question is what's your favorite color uh my favorite color is actually grass or mint green

I just love it I it is in fact this color all right thank you very much amama it was a pleasure to have you and with this we are finished in this track