View source for 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===
 
{| style="width:100%; border-collapse:separate; border-spacing:6px;"
|-
| style="background-color:#060D1A; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" |
'''Deep Space'''<br/>
''Page Background''<br/>
<hr style="border-color:#FFFFFF33;"/>
HEX: <code>#060D1A</code><br/>
RGB: 6, 13, 26<br/>
''Outermost background layer''
| style="background-color:#0A1628; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" |
'''Dark Surface'''<br/>
''Content Background''<br/>
<hr style="border-color:#FFFFFF33;"/>
HEX: <code>#0A1628</code><br/>
RGB: 10, 22, 40<br/>
''Primary content area''
| style="background-color:#0F2040; color:#FFFFFF; padding:24px 16px; text-align:center; width:34%;" |
'''Card Surface'''<br/>
''Cards and Panels''<br/>
<hr style="border-color:#FFFFFF33;"/>
HEX: <code>#0F2040</code><br/>
RGB: 15, 32, 64<br/>
''Individual content blocks''
|-
| style="background-color:#1A3560; color:#FFFFFF; padding:24px 16px; text-align:center;" |
'''Elevated Surface'''<br/>
''Hover and Active Panels''<br/>
<hr style="border-color:#FFFFFF33;"/>
HEX: <code>#1A3560</code><br/>
RGB: 26, 53, 96<br/>
''Hover states, active panels''
| style="background-color:#003468; color:#FFFFFF; padding:24px 16px; text-align:center;" |
'''Border'''<br/>
''Dividers and Borders''<br/>
<hr style="border-color:#FFFFFF33;"/>
HEX: <code>#003468</code><br/>
RGB: 0, 52, 104<br/>
''Matches Deep Navy''
|
|}
 
===Text Colors===
 
{| style="width:100%; border-collapse:separate; border-spacing:6px;"
|-
| style="background-color:#0A1628; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%; border:1px solid #1A3560;" |
'''Text Primary'''<br/>
<hr style="border-color:#FFFFFF33;"/>
HEX: <code>#FFFFFF</code><br/>
RGB: 255, 255, 255<br/>
''All primary body text on dark backgrounds''
| style="background-color:#0A1628; color:#BABCBE; padding:24px 16px; text-align:center; width:33%; border:1px solid #1A3560;" |
'''Text Secondary'''<br/>
<hr style="border-color:#BABCBE33;"/>
HEX: <code>#BABCBE</code><br/>
RGB: 186, 188, 190<br/>
''Secondary text, captions (matches Cool Gray)''
| style="background-color:#0A1628; color:#7B8A9A; padding:24px 16px; text-align:center; width:34%; border:1px solid #1A3560;" |
'''Text Muted'''<br/>
<hr style="border-color:#7B8A9A33;"/>
HEX: <code>#7B8A9A</code><br/>
RGB: 123, 138, 154<br/>
''Placeholder text, disabled states''
|}
 
===Accent Colors===
 
{| style="width:100%; border-collapse:separate; border-spacing:6px;"
|-
| style="background-color:#FFC20E; color:#003468; padding:24px 16px; text-align:center; width:33%;" |
'''Accent Gold'''<br/>
''Primary Action Color''<br/>
<hr style="border-color:#00346844;"/>
HEX: <code>#FFC20E</code><br/>
RGB: 255, 194, 14<br/>
''CTAs, highlights, icon accents (matches Gold)''
| style="background-color:#3BADFF; color:#003468; padding:24px 16px; text-align:center; width:33%;" |
'''Accent Blue'''<br/>
''Interactive Elements''<br/>
<hr style="border-color:#00346844;"/>
HEX: <code>#3BADFF</code><br/>
RGB: 59, 173, 255<br/>
''Links, hover states, informational accents''
| style="background-color:#FFD44A; color:#003468; padding:24px 16px; text-align:center; width:34%;" |
'''Accent Gold Hover'''<br/>
''Hover State''<br/>
<hr style="border-color:#00346844;"/>
HEX: <code>#FFD44A</code><br/>
RGB: 255, 212, 74<br/>
''Hover state for gold elements only''
|}
 
===Surface Layering Reference===
 
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Layer
! style="background-color:#003468; color:#FFFFFF;" | Color Name
! style="background-color:#003468; color:#FFFFFF;" | HEX
! style="background-color:#003468; color:#FFFFFF;" | Used For
|-
| 1 -- Deepest
| Deep Space
| <code>#060D1A</code>
| Page and outermost background
|-
| 2
| Dark Surface
| <code>#0A1628</code>
| Primary content area background
|-
| 3
| Card Surface
| <code>#0F2040</code>
| Cards, panels, modals
|-
| 4 -- Highest
| Elevated Surface
| <code>#1A3560</code>
| Hover states, active or focused panels
|}
 
<div style="background-color:#0A1628; border:1px solid #003468; color:#BABCBE; padding:12px 16px; margin:12px 0;">
'''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.
</div>
 
[[Category:Branding]]