Interior Design Color Palettes

I have spent hundreds of hours analyzing design systems. One of the things that confused me for many years is how to structure color scales and tokens. I have experimented with multiple structures at different sizes of design systems, and at a high-level recommend the following approach: 1. Primitive Colors Your design system foundations should always start with a full color scale that is based on your brand identity. We call these colors Primitives, and your variable/token collection should look like this: - purple-600 - purple-500 - purple-400 - And so on.. To create a Primitives palette you will want to start from your main brand colors and use a tool like UIColors, Supapalette, Colorbox to expand to the full scale. (links in comments) This is a great foundation to have, as it gives you a set of shades that can be used in different ways, and ensures all of them have consistent hues, saturation and brightness. However, Primitive colors are simply not effective when used directly in your designs: - They create ambiguity - Their names have no contextual meaning - They are often misused due to similarity If you have had the “why are there 20 different shades of gray?” conversation with an engineer, you know what I mean. So let’s see how we can improve that. 2. Semantic Colors This is my default recommendation to all product design teams that don’t have a highly complex design system. What you will want to do here is create a new variable collection named Semantic, which is what’s visible in your design files, and comprises of: - Brand / Action - Text - Link - Border - Icon - Surface / Background - Bias - Data / Charts Each color should point to a primitive value, e.g. - text-primary → gray-800 - text-secondary → gray-600 - text-tertiary → gray-400 This takes a bit of setting up, but creates immense long-term value. A great example of a simple, theme-level Semantic structure is Shopify’s Polaris (link in comments) 3. Component-level Semantic Lastly, if you are working on a design system with a lot of complexity and, ideally, a dedicated design systems team, you might want to add another level of hierarchy and specify colors at a component-level. In this structure, you would want to create color tokens based on how they are used in each component. - input-text-filled → text-primary - input-text-placeholder → text-secondary - input-text-disabled → text-tertiary This eliminates all guesswork, but also increases the complexity exponentially. It does serve a purpose though. As design systems scale, you may find that: - A theme-level semantic structure is too restrictive - There is still some guesswork - Decisions need to be documented. An example of this is Uber’s Base and Adobe’s Spectrum design system, linked in the comments. I’m curious to know, what structure are you using for your design system and what has worked well for you? — If you found this useful, consider reposting ♻️ #uidesign #designsystems #productdesign

🦜 “How We Fixed Skyscanner’s Broken Color Palette” (https://lnkd.in/erqd-yCX), a practical case study on how the Skyscanner team fixed their color palette — along with process, naming, testing and explorations to get there. Neatly put together by Adam Wilson, via Anna Palgan. ✅ Set your base colors: primary, secondary and UI states. ✅ Define core color pairings and extended pairings. ✅ Choose product-specific colors, gradients, patterns. ✅ 4 color groups: neutral, white text, black text, yellow/orange. 🚫 Avoid poetic names: they are difficult to remember and refer to. ✅ Mix black and grey with primary color for a better design fit. ✅ Choose a night color that is slightly lighter than black. ✅ Your colors will need to appear on different backgrounds. ✅ Create color sets with transparency for such cases. ✅ Create tints based on the color contrast against black. ✅ Create shades based on the color contrast against white. ✅ Test for color contrast, colorweakness, colorblindness early. ✅ Double-check the dark yellow problem in your palette. --- 🌱 Useful Guides How To Design A Color Palette For Design Systems, by Alex Baránov https://lnkd.in/epJkT252 How To Set Up Color in Design Systems, by Nathan Curtis https://lnkd.in/e48aJaGb How To Create An Accessible Color Palette, by Stéphanie Walter https://lnkd.in/eUnSTYSM “Dark Yellow Problem” In Color Palettes https://lnkd.in/eS7YqfCf --- 🪴 Useful Case Studies Contentful: https://lnkd.in/edHpghSj, by Fabian Schultz Goldman Sachs: https://lnkd.in/e28Fxuuv Modern Health: https://lnkd.in/ez7xM5xt, by Brian Cleveland Stripe: https://lnkd.in/enaXpWvD, by Daryl Koopersmith, Wilson Miner Wise: https://lnkd.in/eyv8Qh7r, by Stephanie S. Wish: https://lnkd.in/eGYGa7PK, by Taamannae T. --- 🍭 Color Palette Generators ABC: https://lnkd.in/e7QHC2gx Accessible Palette Generator: https://lnkd.in/ejkpyWqZ Colorbox: https://colorbox.io/ Contrast Grid: https://lnkd.in/e6sENdRW Figma Color Palettes: https://lnkd.in/et2zeUjX Leonardo: https://leonardocolor.io/ Naming colors: https://lnkd.in/e6jJzRdW OKLCH Color Converter: https://lnkd.in/esP29Jyj Primer Prism: https://lnkd.in/ekpTmkkM Poline: https://lnkd.in/eSwuXW5P 👍 Stark: https://www.getstark.co/ HUGE thanks to all the wonderful people who worked and shared their insights here for all of us to use and learn from! 👏🏼👏🏽👏🏾 If you also struggle with color, hopefully that’s a good foundation to start with. What techniques, guides and tools do you use to design color palettes? Share what has and hasn’t worked for you in the comments below! 🙏🏾 #ux #design

I build color palettes the same way a CEO builds a team. Every color has a job. You can implement the same strategy by asking these questions as you design your palette: 1. What will this color achieve? What role will this color serve for your brand? What need does it fulfill that other colors in your palette currently don’t? What is its purpose? Each color in your palette needs to reflect the unique personality of your brand, your consumers, and the meaningful space where you two intersect. It needs to incorporate your brand’s strategy, history, and reality. It must go beyond being a forecasted trend color. Each color must be dialed to elevate your brand’s individual character, relevance, and market leadership. Every color also has a human, marketing, and sales cost – populate your palette with high performers. 2. Who does this color appeal to? Color is an immediate communicator and the quickest way to emotionally connect with your consumers. Who will this color speak to – which of your current customers, distribution channels, or targeted areas of growth? Will it appeal to a big enough or valuable enough audience to make its addition worthwhile? What message does it need to send? Make sure you have a clear sense of what each color in your palette is communicating and who it is speaking to. Nail this. 3. What products is this color applicable for? Look at the products in your line that will get new or additional colors for the season. Does this color make sense for those products – their end-use, materiality, life-cycle, price point? How often can this color be used? Will it show up frequently enough in the line to adequately convey its message and be worth the investment? In that same vein, how can this color be applied – as an all-over color, combined with multiple other palette hues, only as an accent? Does this justify its value? 4. Is this color a team-player? Does this color merchandise well with the other colors in your palette? Does it allow you to create sellable color assortments across products? Is it a color workhorse that can be paired with multiple colors in your palette? Does it inject calculated energy into your line? Color additions should add balance or excitement to your overall palette by working with or off of the other hues. 5. Core, directional, or seasonal? Core colors need to be foundational, chosen for their ability to merchandise with a wide range of other colors, translate well on various materials, and have sustaining appeal with all or the vast majority of your consumers. Directional colors (1-3 yr lifespan) align with the near-future priorities and lifestyles of your consumers and can be more nuanced. These colors will be the dominant visual communicators of your brand’s ethos, culture, and values. Seasonal colors are timely, precise storytellers. They are opportunities for your brand, and thus your consumer, to express a potent, captivating emotion. This is how you put color to work. #color

Here’s every lesson I’ve learned after 7 years of working with color systems in design. 🎨 Grouped into 5s so you can skim, save, and test them in your own work. Palette Foundations — 1. Stop picking “pretty colors” without rules. 2. Always define your Primary first, it’s the anchor. 3. Your Accent tones should guide attention, not fight for it. 4. Neutrals aren’t boring, they’re balance. 5. A system beats intuition every time. Contrast & Clarity — 6. Test palettes in grayscale before calling them final. 7. Low contrast looks modern, but kills readability fast. 8. Accessibility checks matter more than personal preference. 9. Light backgrounds with dark text are the safest rule of thumb. 10. “Pop” isn’t a strategy, it’s usually a readability problem. Tints, Tones & Shades — 11. A Tint = add white, a Shade = add black, a Tone = add gray. 12. Limit each palette to 1–2 shades max. Too many creates chaos. 13. Tints soften emotion, shades anchor weight. 14. Mid-tone values carry the workload in layouts. 15. When in doubt, keep shadows cool and highlights warm. Systems & Roles — 16. Every color in your palette needs a job description. 17. Primary = recognition, Accent = emphasis, Neutral = stability. 18. Backgrounds should never compete with type. 19. Reserve one color for CTA only. Protect it like gold. 20. Brands collapse when Accent and CTA colors overlap. Psychology in Color — 21. Blue = trust, calm, renewal (your Glacial Gates proof). 22. Red = urgency, energy, intensity. 23. Green = growth, health, safety. 24. Yellow = optimism, warmth, creativity. 25. Black = power, luxury, precision. Consistency & Brand Trust — 26. One brand red, not six versions. 27. Define CMYK, RGB, HEX for every palette, no guessing. 28. Lock them into a style guide or you’ll regret it. 29. Train your team on when and where to use colors. 30. Consistency builds trust faster than any logo redesign. Practical Workflow — 31. Build palettes with swatch libraries in Illustrator/InDesign. 32. Test across print and digital, because colors shift. 33. Export ASE files for teammates, it saves arguments. 34. Never approve palettes from one screen only. 35. Test colors on mockups, not just swatches. Growth & Mastery — 36. Copy great palettes, then evolve them. 37. Systems beat “inspiration boards” every time. 38. Learn color psychology, not just theory. 39. Great palettes disappear, they support, not distract. 40. You’ll learn 100x more testing palettes in real projects than reading guides. ⚡️ Take these with a grain of salt. I’m one designer sharing what years of testing has taught me. Your context may differ. Here’s my truth: systems > decoration. That’s how you stop designing with chaos and start designing with clarity. 👉 If you could only keep 3 colors in your brand system forever, which ones would you choose?