6.4 KiB
6.4 KiB
Figma Color System Configuration
This document provides a comprehensive structure for implementing the Figma design colors in the Inogen project. Please replace the placeholder values with the actual colors from the Figma design.
Instructions
- Open the Figma design file
- Extract the exact hex values for each color category
- Replace the placeholder values below
- Update the corresponding files in the project
Primary Brand Colors
Based on the current teal usage, these appear to be the main brand colors:
/* Primary Brand Color (Teal) */
--primary-50: #f0fdfa /* Replace with Figma value */
--primary-100: #ccfbf1 /* Replace with Figma value */
--primary-200: #99f6e4 /* Replace with Figma value */
--primary-300: #5eead4 /* Replace with Figma value */
--primary-400: #2dd4bf /* Replace with Figma value */
--primary-500: #48D1CC /* Current value - verify with Figma */
--primary-600: #40C4C4 /* Current value - verify with Figma */
--primary-700: #0f766e /* Replace with Figma value */
--primary-800: #115e59 /* Replace with Figma value */
--primary-900: #134e4a /* Replace with Figma value */
Dark Theme Colors
Based on the current login page dark background:
/* Dark Background Colors */
--dark-50: #f8fafc /* Replace with Figma value */
--dark-100: #f1f5f9 /* Replace with Figma value */
--dark-200: #e2e8f0 /* Replace with Figma value */
--dark-300: #cbd5e1 /* Replace with Figma value */
--dark-400: #94a3b8 /* Replace with Figma value */
--dark-500: #64748b /* Replace with Figma value */
--dark-600: #475569 /* Replace with Figma value */
--dark-700: #334155 /* Replace with Figma value */
--dark-800: #1A202C /* Current value - verify with Figma */
--dark-900: #0f172a /* Replace with Figma value */
Neutral/Gray Colors
For text, borders, and subtle backgrounds:
/* Neutral Colors */
--neutral-50: #FFFFFF /* Replace with Figma value */
--neutral-100: #F7F8F9 /* Replace with Figma value */
--neutral-200: #E5E7EB /* Replace with Figma value */
--neutral-300: #D1D5DB /* Replace with Figma value */
--neutral-400: #9CA3AF /* Replace with Figma value */
--neutral-500: #6B7280 /* Replace with Figma value */
--neutral-600: #4B5563 /* Replace with Figma value */
--neutral-700: #374151 /* Replace with Figma value */
--neutral-800: #1F2937 /* Replace with Figma value */
--neutral-900: #111827 /* Replace with Figma value */
Status Colors
Success Colors
--success-50: #F0FDF4 /* Replace with Figma value */
--success-100: #DCFCE7 /* Replace with Figma value */
--success-500: #22C55E /* Replace with Figma value */
--success-600: #16A34A /* Replace with Figma value */
--success-700: #15803D /* Replace with Figma value */
Error Colors
--error-50: #FEF2F2 /* Replace with Figma value */
--error-100: #FEE2E2 /* Replace with Figma value */
--error-500: #EF4444 /* Replace with Figma value */
--error-600: #DC2626 /* Replace with Figma value */
--error-700: #B91C1C /* Replace with Figma value */
Warning Colors
--warning-50: #FFFBEB /* Replace with Figma value */
--warning-100: #FEF3C7 /* Replace with Figma value */
--warning-500: #F59E0B /* Replace with Figma value */
--warning-600: #D97706 /* Replace with Figma value */
--warning-700: #B45309 /* Replace with Figma value */
Info Colors
--info-50: #EFF6FF /* Replace with Figma value */
--info-100: #DBEAFE /* Replace with Figma value */
--info-500: #3B82F6 /* Replace with Figma value */
--info-600: #2563EB /* Replace with Figma value */
--info-700: #1D4ED8 /* Replace with Figma value */
Semantic Color Mapping
Light Theme
/* Backgrounds */
--background: var(--neutral-50)
--surface: var(--neutral-50)
--card: var(--neutral-50)
/* Text */
--text-primary: var(--neutral-900)
--text-secondary: var(--neutral-600)
--text-muted: var(--neutral-500)
/* Borders */
--border: var(--neutral-200)
--border-strong: var(--neutral-300)
/* Interactive */
--primary: var(--primary-500)
--primary-hover: var(--primary-600)
--primary-active: var(--primary-700)
Dark Theme
/* Backgrounds */
--background: var(--dark-900)
--surface: var(--dark-800)
--card: var(--dark-800)
/* Text */
--text-primary: var(--neutral-50)
--text-secondary: var(--neutral-300)
--text-muted: var(--neutral-400)
/* Borders */
--border: var(--dark-700)
--border-strong: var(--dark-600)
/* Interactive */
--primary: var(--primary-500)
--primary-hover: var(--primary-400)
--primary-active: var(--primary-300)
Component-Specific Colors
Login Page
/* Login Background */
--login-bg: var(--dark-800) /* Current: #1A202C */
--login-sidebar: var(--primary-500) /* Current: #48D1CC */
--login-text: var(--neutral-50)
--login-text-muted: var(--neutral-300)
Buttons
/* Primary Button */
--btn-primary-bg: var(--primary-500)
--btn-primary-text: var(--dark-800)
--btn-primary-hover: var(--primary-600)
/* Secondary Button */
--btn-secondary-bg: var(--neutral-100)
--btn-secondary-text: var(--neutral-900)
--btn-secondary-hover: var(--neutral-200)
Forms
/* Input Fields */
--input-bg: var(--neutral-50)
--input-border: var(--neutral-300)
--input-border-focus: var(--primary-500)
--input-text: var(--neutral-900)
--input-placeholder: var(--neutral-500)
Files to Update
After getting the Figma colors, update these files:
app/app.css- Update CSS custom propertiesapp/lib/design-tokens.ts- Update TypeScript color tokenscomponents.json- Update base color if needed- Component files - Verify color usage matches design
How to Extract Colors from Figma
- Select any element with the desired color
- In the right panel, look at Fill/Stroke properties
- Copy the hex value (e.g., #48D1CC)
- Note if there are any opacity values
- Document color names/purposes from Figma layers
Verification Checklist
- All colors extracted from Figma
- Color scales properly generated (50-900)
- Semantic mappings make sense
- Accessibility contrast ratios checked
- Dark theme colors verified
- Component colors match Figma design
- Persian/RTL text remains readable
Next Steps
- Provide the actual Figma color values
- I'll update all the necessary files
- Test the implementation
- Verify design consistency
- Document any custom color usage