inogen/COLOR_SYSTEM.md

Color System Documentation

This document outlines the complete color system used in the Inogen project, ensuring consistency across all components and maintaining accessibility standards.

Color Palette

Primary Colors (Green)

Used for primary actions, success states, and brand elements.

--color-primary-50: #f0fdf4
--color-primary-100: #dcfce7
--color-primary-200: #bbf7d0
--color-primary-300: #86efac
--color-primary-400: #4ade80
--color-primary-500: #22c55e  /* Main primary color */
--color-primary-600: #16a34a
--color-primary-700: #15803d
--color-primary-800: #166534
--color-primary-900: #14532d
--color-primary-950: #052e16

Secondary Colors (Blue)

Used for secondary actions and informational elements.

--color-secondary-50: #eff6ff
--color-secondary-100: #dbeafe
--color-secondary-200: #bfdbfe
--color-secondary-300: #93c5fd
--color-secondary-400: #60a5fa
--color-secondary-500: #3b82f6  /* Main secondary color */
--color-secondary-600: #2563eb
--color-secondary-700: #1d4ed8
--color-secondary-800: #1e40af
--color-secondary-900: #1e3a8a
--color-secondary-950: #172554

Teal Colors (Brand Accent)

Used for brand-specific elements, especially in the login interface.

--color-teal-50: #f0fdfa
--color-teal-100: #ccfbf1
--color-teal-200: #99f6e4
--color-teal-300: #5eead4
--color-teal-400: #2dd4bf
--color-teal-500: #14b8a6   /* Main teal color */
--color-teal-600: #0d9488
--color-teal-700: #0f766e
--color-teal-800: #115e59
--color-teal-900: #134e4a
--color-teal-950: #042f2e

Slate Colors (Dark Theme)

Used for dark backgrounds and sophisticated UI elements.

--color-slate-50: #f8fafc
--color-slate-100: #f1f5f9
--color-slate-200: #e2e8f0
--color-slate-300: #cbd5e1
--color-slate-400: #94a3b8
--color-slate-500: #64748b
--color-slate-600: #475569
--color-slate-700: #334155
--color-slate-800: #1e293b   /* Login background */
--color-slate-900: #0f172a
--color-slate-950: #020617

Neutral Colors

Used for text, borders, and general UI elements.

--color-neutral-50: #fafafa
--color-neutral-100: #f5f5f5
--color-neutral-200: #e5e5e5
--color-neutral-300: #d4d4d4
--color-neutral-400: #a3a3a3
--color-neutral-500: #737373
--color-neutral-600: #525252
--color-neutral-700: #404040
--color-neutral-800: #262626
--color-neutral-900: #171717
--color-neutral-950: #0a0a0a

Status Colors

Success

--color-success-50: #f0fdf4
--color-success-100: #dcfce7
--color-success-200: #bbf7d0
--color-success-300: #86efac
--color-success-400: #4ade80
--color-success-500: #22c55e
--color-success-600: #16a34a
--color-success-700: #15803d
--color-success-800: #166534
--color-success-900: #14532d

Error

--color-error-50: #fef2f2
--color-error-100: #fee2e2
--color-error-200: #fecaca
--color-error-300: #fca5a5
--color-error-400: #f87171
--color-error-500: #ef4444
--color-error-600: #dc2626
--color-error-700: #b91c1c
--color-error-800: #991b1b
--color-error-900: #7f1d1d

Warning

--color-warning-50: #fffbeb
--color-warning-100: #fef3c7
--color-warning-200: #fde68a
--color-warning-300: #fcd34d
--color-warning-400: #fbbf24
--color-warning-500: #f59e0b
--color-warning-600: #d97706
--color-warning-700: #b45309
--color-warning-800: #92400e
--color-warning-900: #78350f

Info

--color-info-50: #eff6ff
--color-info-100: #dbeafe
--color-info-200: #bfdbfe
--color-info-300: #93c5fd
--color-info-400: #60a5fa
--color-info-500: #3b82f6
--color-info-600: #2563eb
--color-info-700: #1d4ed8
--color-info-800: #1e40af
--color-info-900: #1e3a8a

Semantic Color Tokens

Light Theme

--background: #ffffff
--foreground: #0a0a0a
--card: #ffffff
--card-foreground: #0a0a0a
--popover: #ffffff
--popover-foreground: #0a0a0a
--primary: #22c55e
--primary-foreground: #ffffff
--secondary: #f5f5f5
--secondary-foreground: #0a0a0a
--muted: #f5f5f5
--muted-foreground: #737373
--accent: #f5f5f5
--accent-foreground: #0a0a0a
--destructive: #ef4444
--destructive-foreground: #ffffff
--border: #e5e5e5
--input: #e5e5e5
--ring: #22c55e

Dark Theme

--background: #020617
--foreground: #f8fafc
--card: #0f172a
--card-foreground: #f8fafc
--popover: #0f172a
--popover-foreground: #f8fafc
--primary: #22c55e
--primary-foreground: #0a0a0a
--secondary: #1e293b
--secondary-foreground: #f8fafc
--muted: #1e293b
--muted-foreground: #94a3b8
--accent: #1e293b
--accent-foreground: #f8fafc
--destructive: #ef4444
--destructive-foreground: #f8fafc
--border: #1e293b
--input: #1e293b
--ring: #22c55e

Usage Guidelines

Button Variants

• Primary: Use bg-primary for main actions
• Secondary: Use bg-secondary for secondary actions
• Teal: Use bg-teal-500 for brand-specific actions (like login)
• Success: Use bg-green-500 for positive actions
• Info: Use bg-blue-500 for informational actions
• Destructive: Use bg-destructive for dangerous actions

Text Colors

• Primary text: Use text-foreground
• Secondary text: Use text-muted-foreground
• Success text: Use text-green-600
• Error text: Use text-destructive
• Warning text: Use text-yellow-600

Background Colors

• Main background: Use bg-background
• Card background: Use bg-card
• Muted background: Use bg-muted

Border Colors

• Default borders: Use border-border
• Input borders: Use border-input
• Focus rings: Use ring-ring

Accessibility

• All color combinations meet WCAG 2.1 AA contrast requirements
• Colors are designed to work well for users with color vision deficiencies
• Always provide text alternatives for color-coded information

RTL (Right-to-Left) Support

The color system is designed to work seamlessly with RTL layouts. All color tokens are direction-agnostic and will maintain their semantic meaning regardless of text direction.

Brand Colors Reference

For quick reference, the main brand colors are:

• Primary Green: #22c55e (primary-500)
• Brand Teal: #14b8a6 (teal-500)
• Dark Background: #1e293b (slate-800)
• Light Background: #ffffff (white)

Implementation

All colors are available as:

1. CSS custom properties (e.g., var(--color-primary-500))
2. Tailwind utility classes (e.g., bg-primary-500)
3. Design tokens in TypeScript (e.g., colors.primary[500])

This ensures consistency across all implementation methods and makes the color system maintainable and scalable.