Aurora Color Palette Reference

LCARS Digital Product Uploader - Color System

This document provides a visual reference for all colors used in the LCARS Digital Product Uploader component.

Primary Colors (Aurora Tokens)

🌊 Cyan (Primary Accent)

Hex:     #52d1ff
RGB:     82, 209, 255
HSL:     195°, 100%, 66%
Name:    Aurora Primary
Used in: Buttons, progress bar, focus states, glow effects

Visual: Bright cyan like a Star Trek console display

💜 Purple (Secondary Accent)

Hex:     #b782ff
RGB:     183, 130, 255
HSL:     269°, 100%, 76%
Name:    Aurora Secondary
Used in: Secondary buttons, alternative accents

Visual: Deep purple for non-primary actions

🟠 Orange (Tertiary Accent)

Hex:     #ffa500
RGB:     255, 165, 0
HSL:     39°, 100%, 50%
Name:    Aurora Tertiary
Used in: Tertiary buttons, warnings, attention

Visual: Warm orange for supporting actions

Status Colors

✅ Success Green

Hex:     #00d98b
RGB:     0, 217, 139
HSL:     153°, 100%, 42%
Name:    Aurora OK
Used in: Checkmarks, success indicators, "complete" status

Visual: Vibrant green showing completion

⚠️ Warning Amber

Hex:     #ffb020
RGB:     255, 176, 32
HSL:     37°, 100%, 56%
Name:    Aurora Warning
Used in: Warning messages, caution indicators

Visual: Bright amber for user attention

❌ Error Red

Hex:     #ff5470
RGB:     255, 84, 112
HSL:     351°, 100%, 67%
Name:    Aurora Danger
Used in: Error messages, failures, danger states

Visual: Red for critical errors

Background & Surface Colors

Deep Space Black

Hex:     #0a0f14
RGB:     10, 15, 20
HSL:     207°, 33%, 6%
Name:    Aurora BG-0 (Primary Background)
Used in: Page background, main container

Visual: Deep space darkness (almost pure black with blue tint)

Surface Level 0

Hex:     #0f1419
RGB:     15, 20, 25
HSL:     207°, 25%, 8%
Name:    Aurora Surface-0 (Darkest)
Used in: Cards, containers at lowest elevation

Surface Level 1

Hex:     #141a22
RGB:     20, 26, 34
HSL:     210°, 26%, 11%
Name:    Aurora Surface-1 (Elevated)
Used in: Form inputs, interactive areas

Surface Level 2

Hex:     #1a212e
RGB:     26, 33, 46
HSL:     210°, 28%, 14%
Name:    Aurora Surface-2 (Higher Elevation)
Used in: Popovers, tooltips

Surface Level 3

Hex:     #252d3d
RGB:     37, 45, 61
HSL:     213°, 24%, 19%
Name:    Aurora Surface-3 (Modal/Card Level)
Used in: Modals, prominent cards, floating elements

Text Colors

Bright Cyan Text

Hex:     #e6f6ff
RGB:     230, 246, 255
HSL:     197°, 100%, 95%
Name:    Aurora FG-0 (Primary Text)
Used in: All body text, labels, descriptions

Visual: Bright cyan text with high contrast on dark backgrounds

Color Usage in Components

Buttons

Primary Button

Background: #52d1ff (Cyan)
Text: #0a0f14 (Deep Black)
Border: None
Hover: Lighter cyan with glow

Secondary Button

Background: transparent
Text: #b782ff (Purple)
Border: 2px solid #b782ff
Hover: Purple glow effect

Tertiary Button

Background: transparent
Text: #ffa500 (Orange)
Border: 2px solid #ffa500
Hover: Orange glow effect

Form Elements

Input Focus

Border Color: #52d1ff (Cyan)
Glow: 0 0 8px rgba(82, 209, 255, 0.3)
Outline: #52d1ff with alpha 0.4

Input Default

Background: #141a22 (Surface-1)
Text: #e6f6ff (Bright Cyan)
Border: 1px solid rgba(82, 209, 255, 0.2)

Upload Zone

Default State

Border: 2px dashed rgba(82, 209, 255, 0.4) (Cyan, 40% opacity)
Background: transparent
Icon Color: #52d1ff (Cyan)

Hover State

Border: 2px dashed #52d1ff (Solid Cyan)
Glow: 0 0 12px rgba(82, 209, 255, 0.4) (Cyan)

Drag Active State

Border: 2px dashed #52d1ff (Solid Cyan)
Background: rgba(82, 209, 255, 0.05) (Subtle cyan tint)
Glow: 0 0 16px rgba(82, 209, 255, 0.6) (Strong cyan)

Progress Bar

Bar Background

Color: #0f1419 (Surface-0)

Bar Fill

Gradient: linear-gradient(90deg, #52d1ff, #b782ff) (Cyan → Purple)
Glow: 0 0 8px rgba(82, 209, 255, 0.4) (Cyan)

Status Text

Color: #e6f6ff (Bright Cyan)

Success Checklist

Check Icon

Background: #00d98b (Green)
Checkmark: #0a0f14 (Deep Black)

Check Text

Color: #e6f6ff (Bright Cyan)

Check Background

Surface: rgba(0, 217, 139, 0.1) (Green, 10% opacity)

CSS Variables

Reference these in your stylesheets:

:root {
  /* Primary Colors */
  --aurora-primary: #52d1ff;
  --aurora-secondary: #b782ff;
  --aurora-tertiary: #ffa500;

  /* Status Colors */
  --aurora-ok: #00d98b;
  --aurora-warn: #ffb020;
  --aurora-danger: #ff5470;

  /* Background & Text */
  --aurora-bg-0: #0a0f14;
  --aurora-fg-0: #e6f6ff;

  /* Surfaces */
  --aurora-surface-0: #0f1419;
  --aurora-surface-1: #141a22;
  --aurora-surface-2: #1a212e;
  --aurora-surface-3: #252d3d;
}

Accessibility Notes

Contrast Ratios

Combination	Ratio	WCAG Level
Cyan (#52d1ff) on Black (#0a0f14)	9.8:1	AAA
Purple (#b782ff) on Black (#0a0f14)	8.2:1	AAA
Orange (#ffa500) on Black (#0a0f14)	5.4:1	AA
Green (#00d98b) on Black (#0a0f14)	7.1:1	AAA
Text (#e6f6ff) on Black (#0a0f14)	21:1	AAA

All color combinations meet WCAG AA standards minimum.

Color Blindness Considerations

Cyan (#52d1ff) - Visible to protanopia, deuteranopia ✅
Purple (#b782ff) - May be confused with dark blue in protanopia ⚠️
Orange (#ffa500) - Visible to most forms of color blindness ✅
Green (#00d98b) - Difficult for protanopia/deuteranopia ⚠️

Best Practice: Always use icons/text in addition to color to indicate status.

Color Palettes by Use Case

For Upload State

Idle:        Gray border, cyan icon
Uploading:   Cyan border, cyan icon with pulse
Scanning:    Cyan border, purple text
Complete:    Green checkmark, green background
Error:       Red border, red icon

For Buttons

Primary Action:   Cyan (#52d1ff)
Secondary Action: Purple (#b782ff)
Tertiary Action:  Orange (#ffa500)
Disabled:         Gray (40% opacity)

For Status Indicators

Success:     Green (#00d98b) + ✓ icon
Warning:     Orange (#ffa500) + ⚠️ icon
Error:       Red (#ff5470) + ✗ icon
Info:        Cyan (#52d1ff) + ℹ️ icon

Customization

To customize colors globally:

Edit /apps/6d-dashboard/src/theme/aurora-tokens.ts
Update CSS custom properties
All components using var() will update automatically

Example Override

/* In your app's global CSS */
:root {
  --aurora-primary: #00d98b; /* Change from cyan to green */
  --aurora-ok: #52d1ff; /* Change from green to cyan */
}

References

Aurora Design System: /apps/6d-dashboard/src/theme/aurora-tokens.ts
LCARS Component: LcarsDigitalProductUploader.tsx
LCARS Styling: LcarsDigitalProductUploader.css
LCARS Framework: LcarsFrame.tsx

Version: 1.0.0
Last Updated: October 21, 2025
Status: ✅ Complete & Accessible

LCARS Digital Product Uploader - Color System​

Primary Colors (Aurora Tokens)​

🌊 Cyan (Primary Accent)​

💜 Purple (Secondary Accent)​

🟠 Orange (Tertiary Accent)​

Status Colors​

✅ Success Green​

⚠️ Warning Amber​

❌ Error Red​

Background & Surface Colors​

Deep Space Black​

Surface Level 0​

Surface Level 1​

Surface Level 2​

Surface Level 3​

Text Colors​

Bright Cyan Text​

Color Usage in Components​

Buttons​

Form Elements​

Upload Zone​

Progress Bar​

Success Checklist​

CSS Variables​

Accessibility Notes​

Contrast Ratios​

Color Blindness Considerations​

Color Palettes by Use Case​

For Upload State​

For Buttons​

For Status Indicators​

Customization​

Example Override​

References​