← Back to Home

A Developer's Color System That Actually Scales

Over the last few months, I’ve been working on a lot of projects. And every single time I start something new, I get stuck at the same place — choosing colors and visual patterns.

Not because I love design. But because bad colors can ruin a good product, and overthinking colors can delay building the product at all.

After repeating this mistake enough times, I stopped chasing “perfect palettes” and started using a simple system. It doesn't always produce the best-looking UI — but it saves time, keeps things consistent, and lets me focus on actually building.

Color Philosophy

I don't think of colors as “art”. I think of them as constraints.

  1. Understand the Brand:

    • Colors should match what the product is, not what's popular. For example a developer tool doesn't need flashy gradients, A fitness app probably shouldn't look calm and muted. The goal isn't beauty, it's a clearity.

  2. Color Psychology:

    • Colors do influence emotions and behaviors. But do not over-optimze for it.
    • Minimal or glassmorphic interfaces usually work better with: - low saturation - controlled contrast - very few accent colors
    • Energy-heavy apps can afford stronger colors. Serious tools usually can't

  3. Constraint & Context:

    • Platform, accessbility, contrast, and context matter more than personal preference. If text isn't readable or buttons don't stand out, the pallete has already failed.

How I Break Colors Down

Instead of thinking in “palettes”, I break colors into roles.

This helps me design faster and keeps everything predictable.

  1. Background – main surface color, usually neutral

  2. Foreground – text and readable content

  3. Primary – main actions (buttons, links)

  4. Secondary – subtle supporting elements

  5. Accent – highlights, badges, small attention-grabbers

  6. Muted – disabled or low-priority elements

  7. Border – separation without visual noise

Once those roles are defined, adding new ui becomes trivial. Need a new button? Make it primary.

My Default Color System

This is the base I use for most projects. I tweak the primary and accent based on the product, but everything else stays stable.

:root {
  /* Background */
  --background: rgba(16, 16, 18, 0.98);
  --background-glass: rgba(20, 20, 24, 0.4);
  --background-glass-hover: rgba(30, 30, 36, 0.5);

  /* Foreground */
  --foreground: #e7e7e7;
  --foreground-secondary: rgba(255, 255, 255, 0.8);
  --foreground-muted: rgba(255, 255, 255, 0.6);

  /* Primary (varies per project) */
  --primary: #6b5b95;
  --primary-hover: #7d6fb3;

  /* Secondary */
  --secondary: rgba(255, 255, 255, 0.05);

  /* Accent */
  --accent: #4fd1c5;

  /* Muted */
  --muted: rgba(255, 255, 255, 0.3);
  --muted-background: rgba(255, 255, 255, 0.03);

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(107, 91, 149, 0.25);

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Glass highlights */
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --glass-highlight-hover: rgba(255, 255, 255, 0.08);
}

Final Thoughts

I am not a designer. I don't enjoy tweaking colors for hours. This system exists for one reason

So I can stop thinking about colors and start shipping products.

If you're a developer struggling with design, I hope this helps you too.