ColorSystem

Color System

We use color to get noticed and to give our community personality. The DroidBuilders palette is bold, technical, and approachable -- rooted in deep navy and gold, with a sky blue accent and a range of extended colors for specialized use.

Color Palette Structure

The DroidBuilders color system is organized into four tiers:

Tier	Name	Purpose	When to Use
1	Classic Palette	Core brand identity -- 6 colors	All materials, all contexts
2	Dark Theme Palette	Digital-first surface and text system	Website, screen applications, digital-only materials
3	Preferred Palette	Extended accents -- 3 colors	Marketing variety, event materials, sector content
4	Supplemental Palette	Specialized use -- 6 colors	Sector identity, data visualization, event theming

Color Usage Rules

• Always lead with Classic Palette colors on national and corporate materials
• Use the Dark Theme Palette for all website and screen-first applications
• Preferred and Supplemental colors always appear with Classic anchoring colors -- never alone
• Do not use more than three palette tiers in a single design
• Do not create new colors or gradients outside the established palette without board approval
• Always verify color contrast meets accessibility requirements (see AccessibilityStandards)

Classic Palette

The Classic Palette is the anchor of the DroidBuilders brand. These six colors define our visual identity and must appear consistently across all materials.

Primary Brand Color: Deep Navy (#003468). When one color must represent DroidBuilders alone, use Deep Navy.

Deep Navy (Primary Brand Color) Pantone 648 HEX: #003468 RGB: 0, 52, 104 CMYK: 100%, 50%, 0%, 59% HSL: 210, 100%, 20%	Brand Blue Pantone 7685 HEX: #005BA8 RGB: 0, 91, 168 CMYK: 100%, 46%, 0%, 34% HSL: 207, 100%, 33%	Gold Pantone 7408 HEX: #FFC20E RGB: 255, 194, 14 CMYK: 0%, 24%, 95%, 0% HSL: 45, 100%, 53%
White HEX: #FFFFFF RGB: 255, 255, 255 CMYK: 0%, 0%, 0%, 0% HSL: 0, 0%, 100%	Cool Gray HEX: #BABCBE RGB: 186, 188, 190 CMYK: 2%, 1%, 0%, 25% HSL: 210, 3%, 74%	Process Black HEX: #000000 RGB: 0, 0, 0 CMYK: 0%, 0%, 0%, 100% HSL: 0, 0%, 0%

Color Roles

Color	Primary Role	Common Uses
Deep Navy	Primary brand identity	Headers, dominant print backgrounds, primary brand applications
Brand Blue	Secondary identity	Supporting headers, callout boxes, links in print
Gold	Accent and highlight	CTAs, icon accents, emphasis, key navigation elements
White	Base and contrast	Primary text on dark; clean background in print
Cool Gray	Supporting neutral	Secondary text, dividers, supporting UI elements
Process Black	Maximum contrast	Body text in print; high-contrast applications

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.

Preferred Palette

Preferred colors add energy and variety to marketing materials. They complement the Classic Palette without replacing it. Do not use Preferred colors as primary brand colors on national or corporate materials.

Amber Pantone 124 HEX: #F29600 RGB: 242, 150, 0 CMYK: 5%, 41%, 100%, 0% HSL: 37, 100%, 47%

Orange Pantone 716C HEX: #F26300 RGB: 242, 99, 0 CMYK: 5%, 61%, 99%, 0% HSL: 24, 98%, 48%

Sky Blue Pantone 2925 HEX: #3BADFF RGB: 59, 173, 255 CMYK: 77%, 32%, 0%, 0% HSL: 205, 100%, 61%

Preferred Palette Usage

Appropriate Uses	Not Appropriate
Event-specific marketing and promotional materials	National or corporate identity materials
Social media posts and campaign graphics	As a substitute for Classic Palette colors
Sector-level collateral with Classic Palette support	As a dominant color without Classic Palette anchoring
Data visualization with more than two data sets	More than one Preferred color as dominant per design

Supplemental Palette

Supplemental colors are available for specialized use -- event-specific theming, sector identity, informational coding, and data visualization. Use sparingly. Never use Supplemental colors in place of Classic colors on organizational materials.

Correction (v2.0): The v1.0 Style Guide listed Pantone 390 with an incorrect RGB value of (186, 188, 190) -- that is the value for Cool Gray. The correct value for Pantone 390 is RGB (181, 189, 0). HEX #B5BD00 was correct in the original guide.

Forest Green Pantone 362 HEX: #519E2F RGB: 81, 158, 47 CMYK: 49%, 0%, 70%, 38% HSL: 102, 54%, 40%	Yellow Green Pantone 390 HEX: #B5BD00 RGB: 181, 189, 0 CMYK: 4%, 0%, 100%, 26% HSL: 63, 100%, 37%	Brick Red Pantone 7619 HEX: #C04C36 RGB: 192, 76, 54 CMYK: 0%, 60%, 72%, 25% HSL: 10, 56%, 48%
Magenta Pantone 228 HEX: #890C58 RGB: 137, 12, 88 CMYK: 0%, 91%, 36%, 46% HSL: 324, 84%, 29%	Purple Pantone 7664 HEX: #653279 RGB: 101, 50, 121 CMYK: 17%, 59%, 0%, 53% HSL: 285, 41%, 34%	Teal Pantone 2203 HEX: #0087AE RGB: 0, 135, 174 CMYK: 100%, 22%, 0%, 32% HSL: 193, 100%, 34%

Supplemental Palette Usage

Appropriate Uses	Not Appropriate
Event-specific theming where differentiation is needed	In place of Classic colors on national or corporate materials
Sector identity (with board approval)	As dominant color on any multi-audience piece
Data visualization with 4 or more data categories	More than two Supplemental colors in a single design
Informational color-coding systems (maps, diagrams)	Without Classic Palette anchoring colors present