Team_Goon/Goondex
Team_Goon/Goondex
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
16fb407a3c
Goondex/docs/COLOR_SCHEME.md
Stu Leak 16fb407a3c v0.1.0-dev4: Add web frontend with UI component library 
- Implement full web interface with Go html/template server
- Add GX component library (buttons, dialogs, tables, forms, etc.)
- Create scene/performer/studio/movie detail and listing pages
- Add Adult Empire scraper for additional metadata sources
- Implement movie support with database schema
- Add import and sync services for data management
- Include comprehensive API and frontend documentation
- Add custom color scheme and responsive layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 10:47:30 -05:00

7.4 KiB
Raw Blame History

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:

: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

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

Tags & Badges

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

Progress Bars

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

background: linear-gradient(135deg, #FF4FA3 0%, #FF66C4 100%);

Used for: Buttons, progress bars, active states

Header Gradient

background: linear-gradient(135deg, #FF4FA3 0%, #D78BE0 100%);

Used for: Page headers, feature highlights

Effects

Glow Effects

Pink glow for emphasis:

box-shadow: 0 0 10px rgba(255, 79, 163, 0.5);

Hover Effects

Subtle brightness increase:

filter: brightness(1.1);

Focus States

Pink outline for keyboard navigation:

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