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
Interior Design Color Palettes
Explore top LinkedIn content from expert professionals.
-
-
🦜 “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 Taabassum --- 🍭 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
-
A practical way to build color palettes in Illustrator - straight from any image. Screenshot a frame from a film, a photograph, or a piece of artwork you're drawn to. Drag it into Illustrator, rasterize it, then run Object > Create Object Mosaic to break it down into a grid of color squares. Adjust the number of squares to control how detailed or simplified the palette is, select the colors you want, and save them as a global swatch group. From there, any tweak to a swatch automatically updates every instance of that color across the file - which makes iterating on color much faster. A good reminder that color inspiration doesn't need to come from a palette generator. It's already in the work you love. #illustrator #colorpalette #graphicdesign #adobeillustrator #designprocess #colortheory
-
Ever notice how WILDLY different product categories speak completely different visual languages on shelf? Take a look at these two shelf pics I snapped recently—they tell a fascinating story about consumer psychology that most shoppers never consciously register: In the dried fruit/BFY snack section, it's a VIBRANT COLOR EXPLOSION. Crispy Fruit's neon purple packaging screams for attention next to Love Corn's sunny yellows. Every brand fighting to be the most visually stimulating option. Meanwhile, the granola section is practically whispering with its sea of earthy tones. Kind, Bear Naked, and Purely Elizabeth all using the same muted palette playbook. This isn't random—it's strategic color psychology: For "serious nutrition" foods, we expect understated packaging that signals authenticity, purity and premium ingredients. The muted granola packaging says "I'm a thoughtful health choice" without saying a word. But better-for-you snacks? They're competing with conventional treats for your dopamine hit, so they maintain that visual excitement while offering healthier ingredients. Their bright packaging subtly promises: "I'm still fun! Just better for you!" The takeaway for emerging brands? 👉 Your packaging color strategy should acknowledge these unspoken category rules—while critically finding that differentiator sweet spot to stand out without alienating shoppers. What do you notice about the packaging strategies on these two shelves? 👇
-
Small color palettes can have a BIG impact. But how do you build one? As a younger designer, color used to completely overwhelm me. I’d scroll endlessly through swatches, trying to find the perfect combo, only to end up with a rainbow mess or a bunch of colors that just didn’t sit right together. What helped me finally get the hang of it? Limiting my palette. Giving myself fewer options ironically gave me more freedom to focus on balance, contrast, and cohesion. Now, most of my palettes use just a handful of colors—and they feel stronger and more intentional because of it. Here are some tricks I use to build small but mighty palettes: 1. Use a color harmony rule Start with something simple like analogous (colors next to each other on the wheel) for harmony or complementary (opposite colors) for contrast and energy. 2. Vary hue, value and saturation A limited palette doesn’t mean everything should look the same—play with lightness/darkness (value) and intensity (saturation) to keep it interesting. 3. Choose one “hero” color Let one color lead, and support it with tints, shades, or muted neighbors. This keeps your palette feeling cohesive without being flat. 4. Test in grayscale If everything looks the same when converted to black and white, you probably need more contrast. This is a great trick for making sure your design still works visually without color. 5. Consider color psychology What mood are you aiming for? Colors carry emotional weight (think calm blues, energetic reds, or fresh greens), and your palette should reflect your message. Color doesn’t have to be intimidating. Start small, stay intentional, and you’ll be surprised how far a few well-chosen colors can take you!
-
🍦 COLOR THEORY & CURVES: SMEG's Retro-Future Pop-Up 🍭 Design has the power to transport us. This delightful SMEG Pop-up Kiosk Concept, rendered with the vibrant realism of AI-driven visualization, is a masterclass in design nostalgia, translating the brand's mid-century aesthetic into a modular, high-impact commercial space. For Architects, Interior Designers, and Creative AI Specialists, this concept challenges the monochromatic norm: The Power of the Curve: The entire structure is defined by soft, continuous radii and smooth, rounded corners, reminiscent of classic 1950s automotive design and appliances. This geometry communicates approachability and comfort, creating a welcoming, non-intimidating environment. 🚗 Strategic Color Palette: The use of pastel color blocking (mint green, baby blue, powder pink, and cream) is not random; it's a deliberate psychological tool that evokes joy, warmth, and vintage Americana. This bold palette makes the kiosk instantly recognizable and memorable in any busy retail setting. 💚💙💖 Modular Diner Aesthetic: The entire structure functions as a modular "diner booth" or food truck concept. The curved display counters and the striped canopy roof (chrome/silver) perfectly frame the product, transforming high-end appliances into playful, desirable collectibles. 🍽️ AI’s Role in Emotional Design: Color Simulation: AI is crucial for precisely simulating how different lighting conditions affect the high-gloss finish of the pastel colors, ensuring the vibrancy and emotional warmth remain consistent day and night. ✨ Ergonomic Flow: Optimizing the counter heights and curved step displays to ensure seamless interaction and ideal viewing angles for the various appliance sizes. 📐 This design is a vivid reminder that color and historical reverence are powerful, indispensable tools in spatial design. What era of design deserves a modern retail interpretation next? #RetailArchitecture #InteriorDesign #DesignNostalgia #SMEG #Architects #Designers #CreativeAI #DesignInnovation #RetailDesignTrends #VisualMerchandising #ColorTheory #MidCenturyModern #ExperientialRetail #AIinDesign #PopUpDesign #ModularDesign #CommercialDesign #RetroDesign #BrandExperience #SpatialDesign #DesignStrategy #RetailTech #ArchitecturalVisualization #ComputationalDesign
-
+6
-
COLOR = THE FASTEST TRUST SIGNAL IN RETAIL Before a shopper reads a word… before they process price… color has already told their brain whether to trust you or not. 👉 This happens in milliseconds. 🧠 THE SCIENCE (CEO LENS) Color works because it taps: Pattern recognition (familiar = safe) Cognitive ease (easy to process = trusted) Category codes (colors signal what something “should” be) 👉 If the color feels “right,” the brain says: “This makes sense.” → trust increases 👉 If it feels off: “Something’s wrong.” → friction increases 🎨 WHAT DIFFERENT COLORS SIGNAL IN GROCERY 🟦 BLUE → TRUST / SAFETY / RELIABILITY Water, healthcare, household, staples Seen across Kirkland Signature (KS), Walmart, pharmacy cues 👉 Says: “You can depend on this” 🟩 GREEN → HEALTH / CLEAN / SUSTAINABLE Organic, better-for-you, plant-based 👉 BUT here’s the Gen Z twist: Must feel real, not fake greenwashing Overuse = skepticism 👉 Says: “This is good for you (prove it)” ⚪ WHITE / NEUTRAL → CLARITY / HONESTY / PREMIUM SIMPLICITY Massive in private label (especially KS) 👉 Says: “Nothing to hide” “No marketing fluff” 👉 This is why minimalism wins with Gen Z + Millennials 🟥 RED → URGENT / VALUE / ENERGY Promo, snacks, impulse categories 👉 Says: “Act now” But too much = chaos / distrust 🟨 YELLOW / ORANGE → AFFORDABLE / FRIENDLY / ACCESSIBLE Value chains (Aldi cues) Budget-positive perception 👉 Says: “Smart buy” ⚫ BLACK → PREMIUM / AUTHORITY / SERIOUS QUALITY Used selectively (coffee, alcohol, specialty) 👉 Says: “This is elevated” 🧬 HOW COLOR BUILDS (OR BREAKS) TRUST ✅ 1) CONSISTENCY = TRUST MULTIPLIER When color stays consistent across products: 👉 Brain says: “I’ve seen this before → safe choice” ✅ Kirkland Signature = repeatable palette → system trust ✅ Trader Joe’s = controlled variation → curated trust ✅ 2) CATEGORY ALIGNMENT = INSTANT BELIEVABILITY If a product’s color matches what shoppers expect: Blue = water ✅ Green = organic ✅ White = clean ✅ 👉 Trust is immediate Mismatch? ❌ Organic product in neon red ❌ Premium item in cheap yellow tone 👉 Creates friction → kills conversion ✅ 3) CONTRAST = DISCOVERY WITHOUT CONFUSION You need to stand out… without breaking trust. 👉 Strong brands balance: Familiar base (trust) Slight disruption (attention) That’s the sweet spot. ✅ 4) SIMPLICITY = HONESTY SIGNAL Too many colors = feels manipulative Clean color systems = feels: intentional transparent controlled 👉 Cognitive ease = trust acceleration 🧪 PRIVATE LABEL: THE COLOR MASTERCLASS 🏆 Why Kirkland Signature works (KS → K‑Sig) Neutral white base Minimal color coding Strong black/blue typography #ClubPackaging #ClubstoreDisplay Target BJ's Wholesale Club Sam's Club Costco Wholesale Wegmans Food Markets Packaging | Private Label | Retail Trust Engineering #PackagingStrategy #PrivateLabel #KirklandSignature #RetailDesign #ShopperBehavior #BrandTrust #CPG
-
One of the most practical things you can incorporate into your work as a web designer is the 70/20/10 color ratio. 70% neutrals. 20% accent color. 10% primary color. It sounds restrictive, but it's actually freeing. When you commit to constraint, you stop second-guessing your palette and start designing with intention. The hierarchy does the heavy lifting. Buttons pop. Headlines land. Backgrounds stay out of the way. Most sites I review during audits have the opposite problem. Four or five colors used at roughly equal weight across the page. Nothing feels intentional. The eye doesn't know where to land because everything is competing for attention at the same volume. The fix isn't adding more color. It's using less, with more purpose. Here's how I approach it on a new project. Start by picking one primary color. That's your 10%. Find a complementary secondary that supports it without competing. That's your 20%. Then fill the rest with neutrals. Whites, off-whites, grays, dark backgrounds. Whatever fits the brand and supports hierarchy. You'd be surprised how much stronger your layouts feel when color has a clear job instead of just being decorative.
-
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?
Explore categories
- Hospitality & Tourism
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Healthcare
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Career
- Business Strategy
- Change Management
- Organizational Culture
- Innovation
- Event Planning
- Training & Development