Design palettes instead of color palettes?

Question

I've finally become proficient with Tailwind CSS.However, my sites still look ok. I've adopted the idea of "use different shades gray to make UIs" and, as a result, my sites look... professional but uninviting.Consider sites like:- https://curius.app/- https://www.notion.so/- https://www.focusmate.com/These sites look warm and inviting. Being proficient with Tailwind CSS just helps me have good padding, margins, and a reasonable default color scheme. It doesn't help me make my site look... human.I feel like I need a "design palette" instead of a mere "color/margin palette". What's the recommendation for this?

winkelwagen · Accepted Answer

I think you are right, but a designer makes color pallets. Investing a bit of time in the psychology of hue or &ldquo;color&rdquo;, saturation and value might put you on the right track. It goes way deeper of course. But it a good starting point. Colors also obey to trends. A color palette usually has a hierarchy. Just take a look at dribble for some inspiration. Design borrows quite heavy on &ldquo;stealing&rdquo;. Of course don&rsquo;t just copy paste something 1:1 but it might also be a good step. How we perceive Colors is greatly influenced by the relation of other colors in the composition/palet keep that in mind.

muzani · Answer

The Atomic Design book has a lot of good recommendations for setting up a design system: https://atomicdesign.bradfrost.com/
It does take a lot of work. But the idea is to build blocks (atoms) of elements, combine them into bigger blocks (molecules and organisms).
Design evolves too, and so these blocks should also be made to evolve accordingly. Bootstrap is a good example of doing this, but you don't really want every site to look like Bootstrap, which is where engineering comes in.