DarkThemePalette

Dark Theme Palette

The Dark Theme Palette extends the Classic Palette for digital environments -- particularly the DroidBuilders website, where dark theme is the established visual standard. All values are derived from the Classic Palette to maintain brand consistency across light and dark contexts.

Layer surfaces from darkest (background) to lightest (elevated). Never use background colors as text containers.

Surface Colors

Deep Space Page Background HEX: #060D1A RGB: 6, 13, 26 Outermost background layer	Dark Surface Content Background HEX: #0A1628 RGB: 10, 22, 40 Primary content area	Card Surface Cards and Panels HEX: #0F2040 RGB: 15, 32, 64 Individual content blocks
Elevated Surface Hover and Active Panels HEX: #1A3560 RGB: 26, 53, 96 Hover states, active panels	Border Dividers and Borders HEX: #003468 RGB: 0, 52, 104 Matches Deep Navy

Text Colors

Text Primary HEX: #FFFFFF RGB: 255, 255, 255 All primary body text on dark backgrounds

Text Secondary HEX: #BABCBE RGB: 186, 188, 190 Secondary text, captions (matches Cool Gray)

Text Muted HEX: #7B8A9A RGB: 123, 138, 154 Placeholder text, disabled states

Accent Colors

Accent Gold Primary Action Color HEX: #FFC20E RGB: 255, 194, 14 CTAs, highlights, icon accents (matches Gold)

Accent Blue Interactive Elements HEX: #3BADFF RGB: 59, 173, 255 Links, hover states, informational accents

Accent Gold Hover Hover State HEX: #FFD44A RGB: 255, 212, 74 Hover state for gold elements only

Surface Layering Reference

Layer	Color Name	HEX	Used For
1 -- Deepest	Deep Space	#060D1A	Page and outermost background
2	Dark Surface	#0A1628	Primary content area background
3	Card Surface	#0F2040	Cards, panels, modals
4 -- Highest	Elevated Surface	#1A3560	Hover states, active or focused panels

Usage Rule: Always stack surfaces from Layer 1 (darkest) to Layer 4 (lightest). Never skip layers or place a darker surface on top of a lighter one.