213 lines
6.4 KiB
Markdown
213 lines
6.4 KiB
Markdown
# 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
|
|
1. Open the Figma design file
|
|
2. Extract the exact hex values for each color category
|
|
3. Replace the placeholder values below
|
|
4. Update the corresponding files in the project
|
|
|
|
## Primary Brand Colors
|
|
Based on the current teal usage, these appear to be the main brand colors:
|
|
|
|
```css
|
|
/* 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:
|
|
|
|
```css
|
|
/* 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:
|
|
|
|
```css
|
|
/* 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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
/* 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
|
|
```css
|
|
/* 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
|
|
```css
|
|
/* 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
|
|
```css
|
|
/* 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
|
|
```css
|
|
/* 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:
|
|
|
|
1. **`app/app.css`** - Update CSS custom properties
|
|
2. **`app/lib/design-tokens.ts`** - Update TypeScript color tokens
|
|
3. **`components.json`** - Update base color if needed
|
|
4. **Component files** - Verify color usage matches design
|
|
|
|
## How to Extract Colors from Figma
|
|
|
|
1. Select any element with the desired color
|
|
2. In the right panel, look at Fill/Stroke properties
|
|
3. Copy the hex value (e.g., #48D1CC)
|
|
4. Note if there are any opacity values
|
|
5. 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
|
|
|
|
1. Provide the actual Figma color values
|
|
2. I'll update all the necessary files
|
|
3. Test the implementation
|
|
4. Verify design consistency
|
|
5. Document any custom color usage |