Skip to content
Nim UI

Colors

Nim UI uses a carefully crafted color system built on semantic color scales. All colors are designed to work in both light and dark modes with proper contrast ratios.

Primary Colors

The primary color palette is used for primary actions, links, and brand elements.

Primary

50
#f0f9ff
100
#e0f2fe
200
#bae6fd
300
#7dd3fc
400
#38bdf8
500
#0ea5e9
600
#0284c7
700
#0369a1
800
#075985
900
#0c4a6e

Usage

// In Tailwind classes
<div className="bg-primary-500 text-white">Primary</div>
<button className="hover:bg-primary-600">Hover</button>


// In components
<Button variant="primary">Primary Button</Button>

Neutral Colors

Neutral colors (grays) are used for text, backgrounds, borders, and other UI elements.

Neutral

50
#f9fafb
100
#f3f4f6
200
#e5e7eb
300
#d1d5db
400
#9ca3af
500
#6b7280
600
#4b5563
700
#374151
800
#1f2937
900
#111827

Usage

// Text colors
<p className="text-neutral-900 dark:text-neutral-100">Primary text</p>
<p className="text-neutral-600 dark:text-neutral-400">Secondary text</p>


// Backgrounds
<div className="bg-neutral-50 dark:bg-neutral-900">Background</div>


// Borders
<div className="border border-neutral-200 dark:border-neutral-800">Card</div>

Semantic Colors

Semantic colors provide meaning and context to UI elements.

Success

Used for positive actions, confirmations, and success states.

Success

50
#f0fdf4
100
#dcfce7
200
#bbf7d0
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
700
#15803d
800
#166534
900
#14532d 
<Alert variant="success">Operation successful!</Alert>
<Badge variant="success">Active</Badge>

Warning

Used for warnings, cautions, and items requiring attention.

Warning

50
#fffbeb
100
#fef3c7
200
#fde68a
300
#fcd34d
400
#fbbf24
500
#f59e0b
600
#d97706
700
#b45309
800
#92400e
900
#78350f 
<Alert variant="warning">Please review your changes</Alert>
<Badge variant="warning">Pending</Badge>

Danger

Used for errors, destructive actions, and critical states.

Danger

50
#fef2f2
100
#fee2e2
200
#fecaca
300
#fca5a5
400
#f87171
500
#ef4444
600
#dc2626
700
#b91c1c
800
#991b1b
900
#7f1d1d 
<Alert variant="danger">An error occurred</Alert>
<Button variant="danger">Delete</Button>

Info

Used for informational messages and neutral notifications.

Info

50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a 
<Alert variant="info">Did you know...</Alert>
<Badge variant="info">New</Badge>

Color Usage Guidelines

Contrast Ratios

All color combinations meet WCAG 2.1 AA standards:

  • Text on backgrounds: Minimum 4.5:1 contrast ratio
  • Large text (18px+): Minimum 3:1 contrast ratio
  • Interactive elements: Minimum 3:1 contrast ratio
// ✅ Good contrast
<div className="bg-primary-500 text-white">High contrast</div>
<div className="bg-neutral-100 text-neutral-900">Good readability</div>


// ❌ Poor contrast
<div className="bg-primary-300 text-white">Low contrast</div>
<div className="bg-neutral-200 text-neutral-400">Hard to read</div>

Dark Mode

Colors automatically adjust for dark mode:

// Automatically adapts to dark mode
<div className="bg-white dark:bg-neutral-900">
  <p className="text-neutral-900 dark:text-neutral-100">
    Text color changes with theme
  </p>
</div>

Customizing Colors

Override Default Colors

Customize the color palette in your Tailwind config:

tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          // Your custom primary color scale
          50: '#fff1f2',
          100: '#ffe4e6',
          // ... rest of the scale
          500: '#f43f5e', // Base color
          // ... rest of the scale
          900: '#881337',
        },
      },
    },
  },
};

Add Brand Colors

Add your brand colors alongside the defaults:

tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          purple: '#8b5cf6',
          pink: '#ec4899',
          orange: '#f97316',
        },
      },
    },
  },
};

Use in components:

<Button className="bg-brand-purple text-white">
  Brand Button
</Button>

CSS Variables

Use CSS variables for dynamic theming:

src/styles/theme.css
:root {
  --color-primary: 14 165 233; /* RGB values for #0ea5e9 */
  --color-success: 34 197 94;
  --color-danger: 239 68 68;
}


.dark {
  --color-primary: 56 189 248; /* Lighter for dark mode */
}

Use with Tailwind:

<div className="bg-[rgb(var(--color-primary))]">
  Dynamic color
</div>

Color Accessibility

Testing Tools

Use these tools to verify color contrast:

Best Practices

  1. Use semantic colors appropriately

    • Success: green tones
    • Warning: yellow/orange tones
    • Danger: red tones
    • Info: blue tones

  2. Don’t rely on color alone

    • Add icons or labels
    • Use patterns or textures
    • Provide text alternatives

  3. Test in different modes

    • Light mode
    • Dark mode
    • High contrast mode
    • Color blind simulation

What’s Next?