Is the documentation site open to design tweaks?

[chrisk-7777]

Disclaimer, I'm not a designer :)

I really like the current site, but it is very data-dense and can be hard to parse quickly.
For example, the color grid, can be hard to track at a glance.

I've put together a very quick mock.

Suggestion

Current on wide screen

Side by side

For comparison, the tailwind color grid: https://tailwindcss.com/docs/customizing-colors#default-color-palette
Having the number always visible might also be useful from a reference point of view

[argyleink]

I went with a visually interesting and "rag right" design through the whole site, these colors included. I feel like this palette display is mostly for initial naming reference, but in actual practice you just type a color like --teal- and then play with the numbers until you get the shade you want like --teal-4 nahhh --teal-5 yeah.

Maybe tho, if it's really making it hard for folks, a new design that's more grid and table like could be nice. Could also make it a more interactive experience. But yeah, I think this display is mostly for an overview of the colors but while using the colors in code it's not a reference anymore.

Thanks for offering this tho! It's not a bad idea, I just don't think the current one is broken.

[chrisk-7777]

Totally makes sense, completely understand the rationale.
And in no way was I throwing shade on the current designs, I'm not a designer or anything.

Keep up the ace work 🙌

[WebMechanic]

I've also been "put off" the first time I saw that colour chart. It feels "noisy" and the long fade-out delay adds to this impression.
I literally couldn't stand watching it, so my quick little fix was a simple devtools hack:

.open-colors > h4 {
    counter-reset: basic -1;
    min-width: 7ch;  /* ORDER! Thank you. */
}

Maybe have a "straighten" thingy above it so people can toggle and bring back some "order" into their life 😁
I presume the hover animation is behind a media query.

I personally don't care if it's there or not, nor what the colours look like, 'cos we have (to use) our vey own colour schemes, so this big chunk of files was never included in our new projects anyway. But we ❤️ the rest!! 😁
Sorry :)

---

I frankly and generally don't understand the applicability of such generic colour charts, based off some quasi-standard set of named colour primitives. Virtually every CSS "tool" has one and they're all pointless - and often utterly horrible, too. They're the first thing I dismiss, also because they make up a large chunk of unnecessary data.
Maybe it's because many devs are male and many male humans have some sort of colour viewing deficiency, so they rely on such charts? 🤷‍♂️

These rudimentary charts never helped me to create a new scheme in +25 years and companies already have a Corporate Identity with a (rigid) colour scheme to follow anyway. One can't just throw in a random teal, green or orange from any such charts. And they're not helpful to translate long existing print colours (Pantone, HKS, NCS etc.) to screen anyway.

Having a colour ramp "generator" would be more useful imho: pass it the chroma and saturation values (props) and generate a ramp with some clever calc() and the new colour functions. I presume lab(), lch(), and maybe even hwb() also produce more consistent perceived lightness across the board (on sRGB screens).

FWIW creating a set of 3-4 colours from an image is much more pleasant and useful for new projects, and building a lightness ramp from there is easy.