Streamlining Color Updates With Design Systems

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

Your design system documentation has a 3-week lag problem 👇 Designer updates the button → Developer ships it → Someone hopefully remembers to update the docs. The result? 🤯 → "Is this the latest version?" 12 times per sprint → Hours wasted hunting for correct specs → 30% of components still using old tokens months later Most teams try to solve this with better processes. More meetings. Stricter update cadences. Automated reminders. That's optimizing the wrong thing. The only way to kill latency is to connect your tools so they document themselves. ✨ Here is the automated design system documentation workflow: Figma (API + MCP) → AI reads specs (I used Claude Code) → Mintlify auto-deploys What gets automated: → Screenshot exports from Figma frames → Spec extraction (spacing, colors, tokens) → Documentation updates → Pull requests with visual diffs ✨ You can even set up GitHub Actions to check tracked Figma frames weekly and create PRs automatically. The guide is available on today's newsletter. 🙌 What's your setup? #designsystem #documentation #productmanagement #productdesign

In 2025, as a designer, not knowing components, variables, and autolayout is like showing up to a race without shoes. The best thing that can happen to a designer’s workflow? Mastering components, variables, and autolayout from Day 1. Imagine this: You design a card. Use it across 60 screens. But you didn’t make it a component. Now you’re holding a presentation. Client says, "Can we change the color? Also, the font size. Oh, and adjust the spacing." Guess what? You’re stuck changing them one by one. Painful. And completely avoidable. That’s where components come in. Make it once, update it once, and it updates everywhere. Then there’s autolayout Set it right, and your design moves like water. Want to add extra text? Change the button size? Shift things around? Everything adjusts smoothly without you dragging frames around like it’s 2015. And don’t even get me started on variables One central system for colors, font styles, spacings so when your brand team says “we’re tweaking the primary color,” you click once and your whole design updates. All these tools aren’t just about making work easier They’re about staying consistent, especially when you’re working with a team. If you want to design at a serious level, knowledge of these systems is not optional , it’s the standard. Work smart. Stay sharp. Protect your time.

When it comes to managing design systems in Figma, there’s an aspect I’ve noticed trips up a lot of beginners: Figma doesn’t technically have “design tokens,” but you can absolutely create and manage them using Figma’s variables. In practice, design tokens are named values for things like color, typography, spacing, and more. Designers like them because they’re reusable, consistent, and easy to hand off to dev. Basically: Your design decisions made once and then applied system-wide. In Figma, variables let you define visual styles once and apply them everywhere. So instead of coding #D84F2B as the background color for every button, you use a variable like ‘color.primary’. Here’s how design tokens help: ✅ Consistency: Every component pulls from the same source ✅ Scalability: Make a change once, and it updates everywhere ✅ Dev collaboration: Variables make your design language exportable and codable How to get started: 1. Set up variables for core values (color, type, spacing) 2. Name them clearly (ex: color.text.secondary) 3. Apply them across your components Optional: Use a plugin like Tokens Studio to connect with dev tools. If you’re building or maintaining a design system, using variables to manage design tokens is the key to scaling without chaos. Start small. Stay consistent. And name your tokens like future-you has to live with them. Still wrapping your head around variables? Or love them already? Let’s compare notes below. 👇 #FigmaFriday #Figma #designsystems #uxdesign #uidesign #productdesign #webdesign #variables #uxui ⸻ 👋 Hi, I’m Dane—sharing design guides & strategies. ❤️ Found this helpful? 'Like’ it to support me. 🔄 Share to help others (& save for later). ➕ Want more? Follow me for free DAILY insights.

If you’re working in Figma, here’s how to build a solid color system from scratch: 1. Use Styles, Not Just Hex Codes Stop copying colors manually. Use Color Styles in Figma so you can: • Update colors globally • Maintain design consistency • Hand off clean files to devs 2. Set a Naming Convention Your naming system should describe: 1. Purpose (Brand, Text, Background, etc.) 2. Type or role (Primary, Secondary, Neutral, etc.) 3. Weight or shade (100, 500, 900, etc.) This helps with clarity, scalability, and collaboration (especially in large teams). 3. Include Semantic Tokens Instead of naming colors by hex or shade, name them by use case: • Button/Primary • Text/Body • Background/Surface This helps when the same color appears in different contexts. 4. Test for Accessibility Early Don’t wait until handoff to check contrast. Use plugins like: • Able (Figma plugin) • Contrast • Stark Aim for minimum 4.5:1 contrast for body text and 3:1 for large text. 5. Document Your System Create a “Color Guide” in your file: • What each color is for • When to use light vs. dark backgrounds • Examples of color in action (buttons, alerts, cards) This helps keep the system usable across designers and developers. Include light and dark mode variations in your system from day one. It’ll save you later. A good color system doesn’t just make your designs look better it makes your team work better. Are you building your color styles from scratch or refining an existing one?

A client was manually updating 47 buttons for the new arrow they added across their site until I showed them this ONE Webflow feature that turned 40 hours of work into a 2-minute task. Most designers are still building Webflow sites like it's 2019, copying and pasting elements across pages. That's not scaling. That's suffering. Webflow's variables and components rollout changed everything, but most designers haven't adopted it yet. Here's what's costing you time and sanity 👇 ↳ Manual updates: Change one color, hunt through 30 pages to update it everywhere.  ↳ Inconsistent spacing: Every designer on your team uses different margin values.  ↳ Component chaos: You rebuild the same card design 15 times with slight variations. That's not a workflow, that's a time killer. Here's how I build scalable Webflow sites now: 📍 Variables as your design system backbone  Set up global colors, spacing, and typography once. Every component inherits these values automatically. 📍 Smart component architecture  Build master components with variable overrides. One testimonial card adapts to light themes, dark themes, and different content lengths. 📍 Nested components that actually work  I create button components inside card components. Change the button style once, it updates across every card, every page. Quick wins you can implement today:  ➤ Set up 5 color variables before you design anything else.  ➤ Create spacing variables for consistent margins and padding.  ➤ Build one master component, then clone and customize with variables. I reduced my client revision time by 70% using this approach. Most designers resist this because it requires upfront planning, but spending 2 hours setting up variables saves 20 hours during revisions. What's your biggest challenge when maintaining consistency across large websites? #webflow #variables #components

🎨 Designers using both Figma + Tailwind - this one is for you. Most colour workflows break the moment you move from design to code… But this 5-step technique fixes that completely. ⚡ Here’s a Tailwind-ready colour system you can build directly inside Figma 👇 (based on the workflow shown in the document) 🔵 1. Choose Your Core Palette Define your primary, secondary, and accent colours. Use HSLA to fine-tune hue & consistency. 🟣 2. Generate Tints & Shades Automatically 500 → base colour 50–400 → tints 600–950 → shades Use the Color Shades & Tints Generator plugin for instant scale. 🟢 3. Turn Every Colour Into a Style Faster updates, cleaner handoff, consistent tokens. 🟠 4. Convert Styles → Variables Figma Variables or Style-to-Variables plugin = global colour control with Tailwind-friendly naming. 🔴 5. Build a Mini Style Guide Label your tokens clearly, collect everything in one frame, and share it with your dev team for alignment. 🎯 Why this workflow works: ✓ Perfect match with Tailwind’s tone scale ✓ Easy to update + maintain ✓ Zero colour mismatch between design & code ✓ Great for scaling design systems 💬 Want me to turn this into a Figma template you can download? Comment “TEMPLATE” and I’ll share it. #Figma #UIDesign #DesignSystems #TailwindCSS #ProductDesign #UXUI #FigmaTips #DesignWorkflow #ColorSystem #VariableDesign #Frontend #WebDesign #DesignToken #TechDesign #AIforDesign

🦜 “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

Figma’s rapid growth left its design system fragmented, resulting in: - Outdated tools. - Inconsistent components. To address these challenges, Figma took the following steps: 1️⃣ Engineer-Designer Collaboration: A team of five designers and engineers was formed, adopting a paired approach inspired by "pair programming" to rethink workflows and bridge the gap between design and engineering. 2️⃣ Bridging Design & Code: Then, they used Figma’s REST API to automate syncing of design variables like color, typography, and spacing between design tools and engineering systems. Dev Mode ensured developers could directly access accurate variables, eliminating inconsistencies. The system was restructured into two variable types: - Primitive Variables: Standardized color ramps (light to dark). - Semantic Variables: Product-specific themes (e.g., FigJam, Dev Mode, Slides). After this, the team moved on to rebuilding the components. 3️⃣ Rebuilding Components The team started with simple components (e.g., checkboxes) to build momentum, then tackled more complex ones. Every component was rebuilt with accessibility in mind and required compatibility with Code Connect to ensure seamless integration. 4️⃣ Automation for Scalability Finally, GitHub Actions streamlined workflows, automating tasks such as updating brand colors. This reduced engineering effort, maintained consistency, and ensured alignment between design systems and engineering output. After five months of focused work, Figma delivered: - A cohesive & accessible UI. - 22 component sets with 670+ variants. - Unified documentation for design and engineering. - New engineering docs with APIs and migration guides. - 680+ tokens for color, typography, sizing, spacing, and radius. #figma #automation #softwareengineering #simform _____________________________ PS. Read more details about this case study in my recent Newsletter. Subscribe now! The link is given in the comments. My Newsletter contains: - Product engineering insights - Proven development strategies - The latest trends in Azure & Generative AI

🚫 𝗦𝘁𝗼𝗽 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮 “𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀” 𝗽𝗮𝗴𝗲 𝗶𝗻 𝗣𝗼𝘄𝗲𝗿 𝗕𝗜. It’s a trap! It looks tidy... until the next rebrand nukes your colors and half your visuals stop matching. We’ve all done it. You build a neat “components” page with buttons, cards, slicers,... ✨ All perfectly styled. ✨ It looks great… until marketing changes the brand color. Suddenly, half your visuals don’t match, and you’re manually fixing hex codes again. Here’s the thing: #PowerBI already gives you a better way. Designers have Components and Variants in Figma. We have Visual Elements and Style Presets in Power BI. 𝗙𝗶𝗴𝗺𝗮 "𝗩𝗮𝗿𝗶𝗮𝗻𝘁" = 𝗣𝗼𝘄𝗲𝗿 𝗕𝗜 "𝗦𝘁𝘆𝗹𝗲 𝗣𝗿𝗲𝘀𝗲𝘁" ✅ Define your variants in the theme file. ❌ Not on a canvas. Then, when someone adds a button, they just pick “Primary” or “Secondary.” Everything stays connected to the theme. Next time your brand changes, update your theme file, and watch your entire report update. 𝗔𝗨𝗧𝗢 👏🏽 𝗠𝗔 👏🏽 𝗧𝗜 👏🏽 𝗖𝗔 👏🏽 𝗟𝗟𝗬! That’s design-system thinking, in Power Bi form. And one of the best habits I’ve picked up after a decade of building enterprise Power BI setups. • • • Hi, I'm Julien! I’m building scalable Power Bi setups for enterprise teams, and I share #dataviz design tips. Grab it straight from thestartuser.com and keep your #dashboards scalable.