Modern B2B SaaS Indigo & Slate Design System Palette

Interface Application Guidelines

Reserve Indigo 600 strictly for primary calls-to-action (CTA buttons, active navigation pills, focus indicator rings). Avoid using indigo as large background flood surfaces in data-heavy screens; rely on Slate 50 and pure #ffffff cards to prevent visual cognitive overload.

Tailwind CSS Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#4f46e5',
          hover: '#4338ca',
          subtle: '#e0e7ff',
        },
        surface: {
          base: '#f8fafc',
          card: '#ffffff',
          border: '#e2e8f0',
        }
      }
    }
  }
};