On Creating a Design System - Course Required
Hey guys i was looking for a good course to learn how to create design systems in css, specifically using creating reusable tokens and the various abstraction layers one may need in order to create a design system, and themes using that design system.
I saw beyond CSS might be offering the information needed, but it seems like only the 4th module actually touches the subject which is important to me.
It might stem from naivety but my general idea was to have a two step solution to solve my problems:
1. Create a design system, IE: two foreground colors plus a background color, and their lower intensity variations. - Tokens.css or something similar. (maybe even something line dual-chrome-tokens.css, to signify it is a two color scheme and any theme can be written to support such a scheme)
2. Make a theme out of the system - IE apply styles to buttons, paragraphs, etc. - theme.css: consumes tokens.css
(3. NOT Directly relevant but might help - adding effect classes for composed effects such as advanced animations or other things.)
This way I can switch the base colors/other attributes to change the pallet, or alternatively change the theme completely in but keep color pallet the same - a theme will include animations for example.
So my main question is, which course should i take that would teach me the concepts i would need to achieve the above. I would like to keep it to css only if possible (using svelte), but will use other preprocessors if necessary (ie applying composed classes for effects to an element through css, instead of bloating the class declaration)
Thanks for your responses. And I hope i managed to remain clear, even though i might have showed my inexperience in my questions above.
[PS I was trying to see if there are sane systems out there that would allow sane style customization through css alone. But couldn't find a non-bloated solution.]
I saw beyond CSS might be offering the information needed, but it seems like only the 4th module actually touches the subject which is important to me.
It might stem from naivety but my general idea was to have a two step solution to solve my problems:
1. Create a design system, IE: two foreground colors plus a background color, and their lower intensity variations. - Tokens.css or something similar. (maybe even something line dual-chrome-tokens.css, to signify it is a two color scheme and any theme can be written to support such a scheme)
2. Make a theme out of the system - IE apply styles to buttons, paragraphs, etc. - theme.css: consumes tokens.css
(3. NOT Directly relevant but might help - adding effect classes for composed effects such as advanced animations or other things.)
This way I can switch the base colors/other attributes to change the pallet, or alternatively change the theme completely in but keep color pallet the same - a theme will include animations for example.
So my main question is, which course should i take that would teach me the concepts i would need to achieve the above. I would like to keep it to css only if possible (using svelte), but will use other preprocessors if necessary (ie applying composed classes for effects to an element through css, instead of bloating the class declaration)
Thanks for your responses. And I hope i managed to remain clear, even though i might have showed my inexperience in my questions above.
[PS I was trying to see if there are sane systems out there that would allow sane style customization through css alone. But couldn't find a non-bloated solution.]
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
