User Story: As a Webstudio user building large-scale websites with Craft, I find it annoying that when I change
--foreground-primary
, it also affects components I didn’t intend to modify (e.g my navbar and footer). This reveals that the system I built on global tokens isn’t as scalable as I thought. One change cascades unintentionally leading to manual work were I thought it wouldn't be needed.
Situation:
I am building a design system for a partner agency in Berlin right now. The directors have over 20 years of experience in brand design, so it's a great opportunity to build a design system that matches their expectations. I thought… let's give Webstudio a spin and build it the WS way (Craft, Open Props, Open Color, Custom CSS Variables). I would love to share my experiences with you – and if I can, help building design systems in Webstudio faster and easier.
The first thing that came up:
the "foreground" variables will not work in professional brand style guidelines. There are way too few.
My idea to solve this problem is to split up the "
foreground
" colors into:
Probably also other core components (but I will see while building)
I also added a new color section "
system
" for success, warning, error.
Have a look
↗︎
Dev Page↗︎
Read LinkCurious to hear your perspective,
@Webstudio Team, @Sam Gilbert, @Milan Boisgard | Uncode School and other pro devs and designers!