# Goondex Color Scheme

## Overview

Goondex uses a carefully curated dark mode color palette centered around **Flamingo Pulse Pink** (#FF4FA3) as the primary brand color. This bold, vibrant aesthetic creates a modern, energetic interface while maintaining excellent readability and visual hierarchy.

## Color Palette

### Primary Colors

| Color Name | Hex Code | RGB Values | Usage |
|------------|----------|------------|-------|
| **Flamingo Pulse Pink** | `#FF4FA3` | `rgb(255, 79, 163)` | Primary brand color, buttons, accents, links |
| **Hot Pink** | `#FF66C4` | `rgb(255, 102, 196)` | Data keypoints, hover states, highlights |
| **Lilac Tint** | `#D78BE0` | `rgb(215, 139, 224)` | Section headers, secondary accents |

### Text Colors

| Color Name | Hex Code | RGB Values | Usage |
|------------|----------|------------|-------|
| **Soft White** | `#F8F8F8` | `rgb(248, 248, 248)` | Primary text, headings |
| **Muted Grey** | `#9BA0A8` | `rgb(155, 160, 168)` | Secondary text, descriptions, labels |

### Background Colors

| Color Name | Hex Code | RGB Values | Usage |
|------------|----------|------------|-------|
| **Deep Black** | `#09090b` | `rgb(9, 9, 11)` | Main background |
| **Card Dark** | `#18181b` | `rgb(24, 24, 27)` | Card backgrounds, navbar |
| **Elevated Dark** | `#27272a` | `rgb(39, 39, 42)` | Elevated elements, inputs, hover states |
| **Border Grey** | `#3f3f46` | `rgb(63, 63, 70)` | Borders, dividers |

### Status & Utility Colors

| Color Name | Hex Code | RGB Values | Usage |
|------------|----------|------------|-------|
| **Cool Cyan** | `#7EE7E7` | `rgb(126, 231, 231)` | Info badges, dates, metadata |
| **Peach Warning** | `#FFAA88` | `rgb(255, 170, 136)` | Warnings, alerts, errors |

## Complete Color Reference

### All Colors with Full Details

```
BRAND COLORS
============
Flamingo Pulse Pink
  Hex:  #FF4FA3
  RGB:  rgb(255, 79, 163)
  RGBA: rgba(255, 79, 163, 1.0)
  HSL:  hsl(331, 100%, 65%)

Hot Pink
  Hex:  #FF66C4
  RGB:  rgb(255, 102, 196)
  RGBA: rgba(255, 102, 196, 1.0)
  HSL:  hsl(323, 100%, 70%)

Lilac Tint
  Hex:  #D78BE0
  RGB:  rgb(215, 139, 224)
  RGBA: rgba(215, 139, 224, 1.0)
  HSL:  hsl(294, 57%, 71%)

TEXT COLORS
===========
Soft White
  Hex:  #F8F8F8
  RGB:  rgb(248, 248, 248)
  RGBA: rgba(248, 248, 248, 1.0)
  HSL:  hsl(0, 0%, 97%)

Muted Grey
  Hex:  #9BA0A8
  RGB:  rgb(155, 160, 168)
  RGBA: rgba(155, 160, 168, 1.0)
  HSL:  hsl(217, 7%, 63%)

BACKGROUND COLORS
=================
Deep Black
  Hex:  #09090b
  RGB:  rgb(9, 9, 11)
  RGBA: rgba(9, 9, 11, 1.0)
  HSL:  hsl(240, 10%, 4%)

Card Dark
  Hex:  #18181b
  RGB:  rgb(24, 24, 27)
  RGBA: rgba(24, 24, 27, 1.0)
  HSL:  hsl(240, 6%, 10%)

Elevated Dark
  Hex:  #27272a
  RGB:  rgb(39, 39, 42)
  RGBA: rgba(39, 39, 42, 1.0)
  HSL:  hsl(240, 4%, 16%)

Border Grey
  Hex:  #3f3f46
  RGB:  rgb(63, 63, 70)
  RGBA: rgba(63, 63, 70, 1.0)
  HSL:  hsl(240, 5%, 26%)

STATUS COLORS
=============
Cool Cyan
  Hex:  #7EE7E7
  RGB:  rgb(126, 231, 231)
  RGBA: rgba(126, 231, 231, 1.0)
  HSL:  hsl(180, 70%, 70%)

Peach Warning
  Hex:  #FFAA88
  RGB:  rgb(255, 170, 136)
  RGBA: rgba(255, 170, 136, 1.0)
  HSL:  hsl(17, 100%, 77%)
```

## CSS Variables

The color scheme is implemented using CSS custom properties for easy theming and consistency:

```css
:root {
    /* Brand Colors */
    --color-brand: #FF4FA3;           /* rgb(255, 79, 163) */
    --color-brand-hover: #FF66C4;     /* rgb(255, 102, 196) */
    --color-keypoint: #FF66C4;        /* rgb(255, 102, 196) */
    --color-header: #D78BE0;          /* rgb(215, 139, 224) */

    /* Text Colors */
    --color-text-primary: #F8F8F8;    /* rgb(248, 248, 248) */
    --color-text-secondary: #9BA0A8;  /* rgb(155, 160, 168) */

    /* Background Colors */
    --color-bg-dark: #09090b;         /* rgb(9, 9, 11) */
    --color-bg-card: #18181b;         /* rgb(24, 24, 27) */
    --color-bg-elevated: #27272a;     /* rgb(39, 39, 42) */
    --color-border: #3f3f46;          /* rgb(63, 63, 70) */

    /* Status Colors */
    --color-info: #7EE7E7;            /* rgb(126, 231, 231) */
    --color-warning: #FFAA88;         /* rgb(255, 170, 136) */
}
```

## Usage Guidelines

### Buttons & Interactive Elements

**Primary Action Buttons:**
- Background: Linear gradient from `#FF4FA3` to `#FF66C4`
- Glow effect: `box-shadow: 0 2px 8px rgba(255, 79, 163, 0.3)`
- Hover: Brightness increase and stronger glow

**Secondary Buttons:**
- Border: `2px solid #FF4FA3`
- Background: Transparent
- Hover: Background `rgba(255, 79, 163, 0.1)`

### Text Hierarchy

1. **Page Headings (h1, h2):** `#F8F8F8` (Soft White)
2. **Section Headers (h3):** `#D78BE0` (Lilac Tint)
3. **Body Text:** `#F8F8F8` (Soft White)
4. **Labels & Descriptions:** `#9BA0A8` (Muted Grey)
5. **Links:** `#FF4FA3` (Flamingo Pulse Pink) → `#FF66C4` (Hot Pink) on hover

### Cards & Containers

```css
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: 0 2px 8px rgba(255, 79, 163, 0.1);
```

### Tags & Badges

```css
background: rgba(255, 79, 163, 0.15);
color: var(--color-brand);
border: 1px solid rgba(255, 79, 163, 0.3);
```

### Progress Bars

```css
background: linear-gradient(135deg, #FF4FA3 0%, #FF66C4 100%);
box-shadow: 0 0 10px rgba(255, 79, 163, 0.5);
```

## Accessibility Considerations

### Contrast Ratios

All text colors have been chosen to meet WCAG AA standards for contrast against their backgrounds:

- **White text (#F8F8F8) on Dark background (#09090b):** 17.8:1 ✓
- **Pink links (#FF4FA3) on Dark background (#09090b):** 6.2:1 ✓
- **Grey text (#9BA0A8) on Dark background (#09090b):** 7.5:1 ✓

### Color Blindness

The pink/purple palette maintains good visibility for most forms of color blindness:
- **Protanopia (red-blind):** Pink appears more muted but still distinct
- **Deuteranopia (green-blind):** Minimal impact, colors remain vibrant
- **Tritanopia (blue-blind):** Pink shifts slightly warmer but remains distinct

## Gradients

Goondex uses gradients sparingly for emphasis on interactive elements:

### Primary Gradient
```css
background: linear-gradient(135deg, #FF4FA3 0%, #FF66C4 100%);
```
**Used for:** Buttons, progress bars, active states

### Header Gradient
```css
background: linear-gradient(135deg, #FF4FA3 0%, #D78BE0 100%);
```
**Used for:** Page headers, feature highlights

## Effects

### Glow Effects

Pink glow for emphasis:
```css
box-shadow: 0 0 10px rgba(255, 79, 163, 0.5);
```

### Hover Effects

Subtle brightness increase:
```css
filter: brightness(1.1);
```

### Focus States

Pink outline for keyboard navigation:
```css
outline: 2px solid var(--color-brand);
outline-offset: 2px;
```

## Dark Mode

Goondex is **dark mode by default**. The deep black background (#09090b) provides:
- Reduced eye strain in low-light conditions
- Better OLED screen efficiency
- Enhanced focus on content
- Modern, sleek aesthetic

The pink accent creates strong visual contrast against the dark background, making interactive elements immediately identifiable.

## Brand Identity

The Flamingo Pulse Pink color scheme reflects:
- **Energy & Vibrancy:** Bold pink conveys excitement and engagement
- **Modernity:** Dark mode with neon accents is contemporary and tech-forward
- **Sophistication:** Lilac and muted greys add refinement
- **Approachability:** Pink is warm and inviting despite the dark theme

## Version History

- **v0.3.5-r1:** Original color scheme established
- **v0.1.0-dev1:** Initial implementation
- **v0.1.0-dev2:** Full TPDB integration maintaining brand colors
- **v0.1.0-dev3:** Enhanced with progress bars and glow effects

---

**Last Updated:** 2025-11-15