hollow ravine
We currently rely on the design tokens created in Figma, and because of that it’s difficult to keep track of changes and have a history to check later.
The idea of this project is to have a GitHub repository with a JSON file where platforms can import tokens from there, keeping all in sync and with change logs.
CC: @vivid wind @flat brook @remote cloak @old adder
Draft
Goals:
Please let me know your thoughts, suggestions, concerns etc
crystal harbor
Ok, I have some thoughts on that topic, base on my previous experience. I don’t know yet how much are you using tokens, but my approach is to create different linked libraries for specific use case.
One with all colours palette (so grey-100, grey-200 ect).
Second with context colours - something you have to define, you have to specify on design system level (for example: bg-button-primary, txt-error-state-hover).
Third is semantic with a twist of „let’s only deal with colours we use 99% of the time”. Make it as easy as possible to use, with clear humanlike name, and limited values. In my current job I’m using 6 variables here. There is: label, text, interactive, background, card background, border.
By doing that you increase enormously speed of design and keep all with the same visuals easier. Most of the time you only use this in design tool, with defined component library you don’t have to have swatches for button hover color with you all the time. Error red colours are setup as variant for error state. At the end you don’t have to think „what was the grey color we use on the background? Grey-100, or Grey-50? BG-main-sec, or bg-alt?”
I know that this is little bit off-topic, but if we are looking at setting up color token system, I thought this might be a good share