inogen/EXTRACT_FIGMA_COLORS.md

# Extract Colors from Figma Design

This guide will help you extract the exact colors from the Figma design and update the project's color system.

## Step 1: Open Figma Design
Open the Figma design file: https://www.figma.com/design/HIefa5H7GKjgY5iW9BGpHK/inogen?node-id=344-2669&t=LwjHmbVQf99rv2Vw-4

## Step 2: Extract Colors

Please fill in the actual hex values from Figma by inspecting each color used in the design:

### Primary Brand Colors
Look for the main teal/turquoise colors used in buttons, highlights, and brand elements:

```
Primary 50:  #______  (lightest teal)
Primary 100: #______
Primary 200: #______
Primary 300: #______
Primary 400: #______
Primary 500: #______  (main brand color - currently #48D1CC)
Primary 600: #______  (hover state - currently #40C4C4)
Primary 700: #______
Primary 800: #______
Primary 900: #______  (darkest teal)
```

### Dark Background Colors
Look for the dark backgrounds used in the login page and dark theme:

```
Dark 50:  #______   (lightest)
Dark 100: #______
Dark 200: #______
Dark 300: #______
Dark 400: #______
Dark 500: #______
Dark 600: #______
Dark 700: #______
Dark 800: #______   (main dark bg - currently #1A202C)
Dark 900: #______   (darkest)
```

### Neutral/Gray Colors
Look for text colors, borders, and subtle backgrounds:

```
Neutral 50:  #______  (white/lightest)
Neutral 100: #______
Neutral 200: #______  (light borders)
Neutral 300: #______
Neutral 400: #______
Neutral 500: #______  (medium text)
Neutral 600: #______
Neutral 700: #______  (dark text)
Neutral 800: #______
Neutral 900: #______  (darkest text)
```

### Status Colors
Look for success, error, warning, and info colors used in alerts and notifications:

#### Success (Green)
```
Success 50:  #______
Success 500: #______  (main success color)
Success 600: #______
Success 700: #______
```

#### Error (Red)
```
Error 50:  #______
Error 500: #______    (main error color)
Error 600: #______
Error 700: #______
```

#### Warning (Yellow/Orange)
```
Warning 50:  #______
Warning 500: #______  (main warning color)
Warning 600: #______
Warning 700: #______
```

#### Info (Blue)
```
Info 50:  #______
Info 500: #______     (main info color)
Info 600: #______
Info 700: #______
```

## Step 3: How to Extract Colors from Figma

1. **Select an element** with the color you want to extract
2. **Look at the right panel** under "Fill" or "Stroke"
3. **Copy the hex value** (format: #RRGGBB)
4. **Note any opacity** values if present
5. **Document the color's purpose** (e.g., "primary button", "error text")

## Step 4: Common Elements to Check

### Login Page
- [ ] Background color of left panel
- [ ] Background color of right panel (teal sidebar)
- [ ] Text colors (white, dark)
- [ ] Button colors (login button)
- [ ] Input field colors

### Buttons
- [ ] Primary button background
- [ ] Primary button text
- [ ] Primary button hover state
- [ ] Secondary button colors
- [ ] Disabled button colors

### Text Elements
- [ ] Primary text color
- [ ] Secondary text color
- [ ] Muted text color
- [ ] Link colors

### Form Elements
- [ ] Input background
- [ ] Input border (normal state)
- [ ] Input border (focus state)
- [ ] Input border (error state)
- [ ] Placeholder text color

### Cards and Surfaces
- [ ] Card background
- [ ] Card border
- [ ] Surface backgrounds
- [ ] Divider colors

## Step 5: Update the Project

Once you have all the colors, follow these steps:

1. **Update the script**: Edit `scripts/update-colors.js` and replace the `FIGMA_COLORS` object with your extracted values

2. **Run the update script**:
   ```bash
   cd inogen
   node scripts/update-colors.js
   ```

3. **Verify the changes**: Check that the colors look correct in the application

4. **Test both themes**: Make sure both light and dark themes work properly

## Step 6: Validation Checklist

After updating the colors:

- [ ] Login page matches Figma design
- [ ] Button colors are correct
- [ ] Text is readable (good contrast)
- [ ] Dark theme works properly
- [ ] All status colors (success, error, warning, info) are correct
- [ ] Persian/Farsi text remains readable
- [ ] No accessibility issues with color contrast

## Step 7: Color Naming Conventions

When documenting colors, use these naming patterns:

- **Primary**: Main brand color (teal)
- **Secondary**: Supporting color (usually blue)
- **Neutral**: Grays for text and borders
- **Dark**: Dark theme backgrounds
- **Success**: Green colors for positive actions
- **Error**: Red colors for errors and warnings
- **Warning**: Yellow/orange for cautions
- **Info**: Blue for informational content

## Example Color Documentation

```
// Example of well-documented colors:
Primary 500: #48D1CC  // Main brand teal, used for primary buttons
Primary 600: #40C4C4  // Hover state for primary buttons
Dark 800: #1A202C     // Login page background
Neutral 900: #111827  // Primary text color
Success 500: #10B981  // Success notifications and confirmations
Error 500: #EF4444    // Error messages and destructive actions
```

## Need Help?

If you encounter any issues:

1. Double-check the hex values are correct (6-digit format)
2. Ensure all required colors are filled in
3. Verify the colors work in both light and dark themes
4. Test accessibility with a color contrast checker

Once you provide the Figma colors, I can help update all the files and ensure everything works correctly!