A few thoughts on the new color palettes/modifiers

Hi all,

Another best quality work from the Cwicly team, congratulations :confetti_ball: :partying_face: :muscle: :heart:

However, after trying to use it in the real world, I mean actually building a site, I have a few remarks that could help improving things.

Of course, it is very related to MY OWN WORKFLOW, so it might differ for you, but well, I’d love to hear your thoughts as well :wink:

1. PALETTES in global color list

So, in my opinion palettes shouldn’t be part of the global colors list as is, but only a helper in the modifier tab, which would act as a shortcut to quickly choose a shade modifier. Like modifier presets.

We never need 10 shades of the same color. I usually use 1 or 2 shades, and I don’t want to see 10 shades displayed in the color picker, since I’ll have to remember which shade I use all the time.

So I would only display base colors and modifier colors in the global list, and display palettes in the modifier tab as a helper tool, which would automatically fill the luminosity field of the modifier.

NOTE: This is purely from the point of view of a webdesigner, but maybe for people who build only one personal site, the whole palette is OK, so maybe just adding a palette generator in the modifier tab so that we can quickly define modifiers from shades would be OK?

2. PALETTE and MODIFIERS CSS variables

First, with a few base colors with activated palettes, there will dozens of CSS variables declared for nothing, since I only use 1 or 2 shades.

But most importantly, I usually use the same semantic names for my colors CSS variables, like c-brand, c-brand-dark, c-brand-extra-light, c-accent, c-link, so that I can use my CSS framework on all my sites.
So the palettes generated CSS variables can’t work for me.

Same problem with generated variables for modifiers (well this one is even worse, since variable name changes with the value: Allow fixed CSS variables names for global color modifiers).

Of course I could use intermediary CSS like c-brand-dark: var(--c-brand-###), but in the end I would love to:

  • only declare the shades I use instead of the whole palette;
  • directly and manually define the right names for each variation (which would be modifiers).


Since modifiers are the way to go for me, I have created a few feature requests to improve them:


Color systems in builder are the most basic tool but are always clumsy!
I think Cwicly can reach the Graal soon with its always-solid implementations.
Then all other builders and addons can RIP :wink:

What are your thoughts about this?
As a beginner, as a one-shot but experienced user, as a webdesigner?

We use it in exactly the way it has been implemented as many of the designers we work with use this methodology in their workflows (e.g. in Figma). The 11 point palette is perfect for us in that respect, although I acknowledge that there can be more integration between it and modifiers to give more freedom.

Well, honestly, I was quite happy with the old colour system, until today. :blush:

But this new one, is just awesome! I reckon that for someone with a little bit of knowledge, imagination and taste, it opens a world of endless possibilities and combinations, yet quick and simple.
By far superior to any colour system I’ve seen in other builders until now.

Excellent work Cwicly Team! :+1: :heart_eyes: