ColorSystem
Color System
Overview
Color is one of the fastest ways to communicate brand identity. 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.
The palette is organized into four tiers:
- Classic Palette -- Core brand identity colors; use across all materials
- Dark Theme Palette -- Digital-first colors for the web presence and screen applications
- Preferred Palette -- Extended accent colors for marketing variety
- Supplemental Palette -- Specialized use; event-specific, sector materials, data visualization
Classic Palette
The Classic Palette is the anchor of the DroidBuilders brand. These six colors define who we are visually and must appear consistently across all materials.
| Color Name | Pantone | HEX | RGB | CMYK | |
|---|---|---|---|---|---|
| White | -- | #FFFFFF
|
255, 255, 255 | 0%, 0%, 0%, 0% | |
| Cool Gray | -- | #BABCBE
|
186, 188, 190 | 2%, 1%, 0%, 25% | |
| Process Black | -- | #000000
|
0, 0, 0 | 0%, 0%, 0%, 100% | |
| Gold | Pantone 7408 | #FFC20E
|
255, 194, 14 | 0%, 24%, 95%, 0% | |
| Brand Blue | Pantone 7685 | #005BA8
|
0, 91, 168 | 100%, 46%, 0%, 34% | |
| Deep Navy ⭐ | Pantone 648 | #003468
|
0, 52, 104 | 100%, 50%, 0%, 59% |
⭐ Primary Brand Color: When one color must represent DroidBuilders, use Deep Navy (
#003468).
Classic Palette Color Roles:
- Deep Navy -- Primary brand identity; headers, dominant backgrounds in print
- Brand Blue -- Secondary identity; supporting headers, callouts, links
- Gold -- Accent and highlight; CTAs, icons, emphasis elements
- White -- Primary text on dark backgrounds; clean background for print
- Cool Gray -- Secondary text, dividers, supporting UI elements
- Process Black -- Body text in print; maximum contrast where required
Dark Theme Palette
The dark theme palette extends the Classic Palette for digital environments, particularly the DroidBuilders website, where the dark aesthetic is the established standard.
| Color Name | HEX | RGB | Usage | |
|---|---|---|---|---|
| Deep Space | #060D1A
|
6, 13, 26 | Page background, outermost surface | |
| Dark Surface | #0A1628
|
10, 22, 40 | Primary content backgrounds | |
| Card Surface | #0F2040
|
15, 32, 64 | Cards, panels, modals | |
| Elevated Surface | #1A3560
|
26, 53, 96 | Hover states, secondary panels | |
| Border | #003468
|
0, 52, 104 | Dividers, borders (matches Deep Navy) | |
| Text Primary | #FFFFFF
|
255, 255, 255 | Primary body text on dark backgrounds | |
| Text Secondary | #BABCBE
|
186, 188, 190 | Secondary text, captions (matches Cool Gray) | |
| Text Muted | #7B8A9A
|
123, 138, 154 | Placeholder text, disabled states | |
| Accent Gold | #FFC20E
|
255, 194, 14 | CTAs, highlights, icon accents (matches Gold) | |
| Sky Blue | #3BADFF
|
59, 173, 255 | Links, interactive elements (matches Pantone 2925) | |
| Accent Hover Gold | #FFD44A
|
255, 212, 74 | Hover state for gold accent elements |
Naming note: the interactive accent
#3BADFFis called Sky Blue throughout this guide (earlier drafts also called it "Accent Blue" -- same color). Use "Sky Blue."
Dark Theme Usage Principles:
- Deep Space and Dark Surface are for layout backgrounds, never for text containers
- Card Surface is the default background for content blocks
- Always layer surfaces from darkest (background) to lightest (elevated)
- Gold is the primary action color; use it for buttons, CTAs, and key navigation
- Sky Blue is for links, interactive states, and informational accents
Preferred Palette
Use these colors to add energy and variety in marketing materials. They complement the Classic Palette without replacing it. Do not use Preferred colors as primary brand colors on national or corporate materials.
| Color Name | Pantone | HEX | RGB | |
|---|---|---|---|---|
| Amber | Pantone 124 | #F29600
|
242, 150, 0 | |
| Orange | Pantone 716C | #F26300
|
242, 99, 0 | |
| Sky Blue | Pantone 2925 | #3BADFF
|
59, 173, 255 |
Supplemental Palette
Available for specialized use -- event theming, sector identity, informational coding, and data visualization. Use sparingly. Never use Supplemental colors in place of Classic colors on organizational materials.
| Color Name | Pantone | HEX | RGB | |
|---|---|---|---|---|
| Forest Green | Pantone 362 | #519E2F
|
81, 158, 47 | |
| Yellow Green | Pantone 390 | #B5BD00
|
181, 189, 0 | |
| Brick Red | Pantone 7619 | #C04C36
|
192, 76, 54 | |
| Magenta | Pantone 228 | #890C58
|
137, 12, 88 | |
| Purple | Pantone 7664 | #653279
|
101, 50, 121 | |
| Teal | Pantone 2203 | #0087AE
|
0, 135, 174 |
Color Do's and Don'ts
Do:
- Lead with Deep Navy, Brand Blue, and Gold in all national and corporate materials
- Use the dark theme palette for all website and screen-first applications
- Ensure sufficient contrast between text and background (see Accessibility Standards)
Do Not:
- Substitute Preferred or Supplemental colors for Classic colors in primary contexts
- Apply the Classic Palette on top of complex photography without contrast treatment
- Use more than three palette tiers in a single design
- Create new colors or gradients outside the established palette without Board approval