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:

   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!