Color Theory in Web Design

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 to make Claude actually use your design system.                                                      Every designer working with AI tools hits the same wall: it renders its own colors, type, and spacing. The system you spent months on becomes background noise. It's not Claude's fault. Most projects never tell it the system exists.                         Six steps to fix that. Save for when you start your next AI-assisted project:      → Step 1 — Export tokens Figma Variables → JSON. Primitives, Semantic, Components. Three layers. → Step 2 — Single source of truth tokens/ at the repo root. This is the only thing Claude reads for design values. Anywhere else is a bug. → Step 3 — Tell Claude they exist Add a paragraph to CLAUDE.md or DESIGN.md. "Use semantic token names, never raw values. Map at tokens/Semantic.json. Don't invent new tokens." Step 4 — Prompt semantically Say ✅ background-surface-default, not ❌#1a1a1a. Claude can't substitute what you didn't ask for. Step 5 — Verify on render Every color in the output should map to a token. An invented hex value is the bug to catch. Step 6 — Iterate the map, not the prompts When Claude misses repeatedly, the token map needs an entry, not your prompt needs more words. Make the system bigger. Keep the prompt simple.

CSS variables aren't design tokens. Here's the difference: 𝗗𝗲𝘀𝗶𝗴𝗻 𝘁𝗼𝗸𝗲𝗻𝘀 𝗮𝗿𝗲 𝘀𝗲𝗺𝗮𝗻𝘁𝗶𝗰, 𝗻𝗼𝘁 𝗹𝗶𝘁𝗲𝗿𝗮𝗹 Bad: --blue-500: #3B82F6 Good: --color-primary: var(--blue-500) Better: --color-action-primary: var(--color-primary) Why: Change blue to green in one place 𝗧𝗵𝗲 𝘁𝗼𝗸𝗲𝗻 𝗵𝗶𝗲𝗿𝗮𝗿𝗰𝗵𝘆 Tier 1: Raw values (--blue-500, --spacing-4) Tier 2: Semantic tokens (--color-primary, --space-md) Tier 3: Component tokens (--button-bg, --input-padding) Each tier references tier above 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 𝗮𝗰𝗿𝗼𝘀𝘀 𝗽𝗹𝗮𝘁𝗳𝗼𝗿𝗺𝘀 Source: JSON or YAML Generate: CSS variables, JS objects, iOS/Android Tool: Style Dictionary (Amazon's tool) Result: Design system in all platforms 𝗪𝗵𝗮𝘁 𝘁𝗼 𝘁𝗼𝗸𝗲𝗻𝗶𝘇𝗲 Colors: All of them (including transparencies) Spacing: Base scale (4px, 8px, 16px...) Typography: Sizes, weights, line heights Shadows: Elevation system Border radius: Consistent rounding Transitions: Duration, easing 𝗥𝗲𝗮𝗹-𝘄𝗼𝗿𝗹𝗱 𝗯𝗲𝗻𝗲𝗳𝗶𝘁𝘀: Design update: Change 1 file, rebuild Dark mode: Swap token values White labeling: Different tokens per client Cross-platform: Same design, different code 𝗖𝗼𝗺𝗺𝗼𝗻 𝗺𝗶𝘀𝘁𝗮𝗸𝗲𝘀: Too many tokens (analysis paralysis) Not semantic enough (defeats purpose) No naming convention (chaos) Tokens not in version control The killer feature: Designers update Figma → Tokens auto-export → PR auto-created → Deploy Follow Sakshi Gawande for more such 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?

If your UI uses “blue-500,” You don’t have a design system. You have a color palette. Not a strategy. Good design systems use semantic tokens: → text.primary → background.surface → border.divider → status. error Why? Because the semantic roles scale: → Across themes → Across brands → Across platforms 📌 Example: status.success  → Light mode: green-400  → Dark mode: green-200  → High contrast: black with check icon surface. elevated  → Web: white with shadow  → Mobile: light gray How to migrate: → Step 1: Audit raw colors in use → Step 2: Map them to semantic tokens → Step 3: Replace tokens in codebase → Step 4: Lock the raw palette This isn’t about colors. It’s about scale. Remember: Tokens are meaningful, not hex codes. Want a token naming cheat sheet?

My client asked for Dark & Light Mode Webapp, here’s how I delivered it in minutes (in Figma). Clients ask for dark + light mode a lot. It’s not just aesthetics, it’s UX: 🌙 Many people prefer dark mode at night for comfort ☀️ Others read faster in light mode during the day Smart products adapt to both. Here is the exact process I used in Figma 👇 Step-by-step (Figma Variables): 1️⃣Plan semantic tokens (not raw colors). Define roles like bg/default, bg/subtle, text/primary, text/secondary, border, accent/primary, accent/on-primary, state/success|warning|error. 2️⃣Create a Variable Collection. In the Variables panel: New collection → “Theme”. Add two modes: Light and Dark. 3️⃣Add color variables. For each semantic token above, set values for both modes (e.g., text/primary = #111 in Light, #F4F4F5 in Dark). Tip: keep brand colors as their own variables (e.g., brand/primary) and alias accent/primary to them. 4️⃣Bind variables to Styles (for reuse). Create Color Styles (e.g., Text/Primary, Surface/Default) referencing those variables so teams can pick styles while still getting theme switching. 5️⃣Apply variables across your system. Update component fills, strokes, icons, borders, shadows to use variables (no hard-coded hex). 6️⃣Build a theme toggle. In Prototype, add “Set variable” interaction to a toggle/switch to flip the Theme mode between Light ↔ Dark. 🥳Results: a consistent, accessible UI that adapts to users’ environment without duplicating screens. Founders: want dark + light mode implemented fast and correctly across your product? DM me, I can set up the system and hand off a maintainable library. Designers: struggling with variables or the theme toggle? DM “DARK/LIGHT” and I’ll send you the full tutorial. #UIUX #ProductDesign #Figma #DesignSystems #DarkMode #LightMode #Accessibility #Startups #Founders #UXDesign