250 lines
6.3 KiB
Markdown
250 lines
6.3 KiB
Markdown
# 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.
|
|
|
|
```css
|
|
--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.
|
|
|
|
```css
|
|
--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.
|
|
|
|
```css
|
|
--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.
|
|
|
|
```css
|
|
--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.
|
|
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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. |