Droid Reference Library - Recent changes [en]

BrandFoundation

Drl-admin — Mon, 01 Jun 2026 15:16:44 GMT

Brand Personality

← Older revision		Revision as of 15:16, 1 June 2026
(One intermediate revision by the same user not shown)
Line 26:		Line 26:
	If DroidBuilders were a person, they would be:		If DroidBuilders were a person, they would be:

	A skilled craftsperson who makes things look effortless		* A skilled craftsperson who makes things look effortless
	The kind of volunteer who shows up early and stays late		* The kind of volunteer who shows up early and stays late
	Someone who lights up a room — or a children's ward — without needing to announce it		* Someone who lights up a room — or a children's ward — without needing to announce it
	Technically precise but never cold or unapproachable		* Technically precise but never cold or unapproachable
	Proud of the craft, but more proud of the impact		* Proud of the craft, but more proud of the impact

	<blockquote>'''In one sentence:''' ''DroidBuilders is the friend who built an R2 unit from scratch and brought it to a kid's birthday party for free.''</blockquote>		<blockquote>'''In one sentence:''' ''DroidBuilders is the friend who built an R2 unit from scratch and brought it to a kid's birthday party for free.''</blockquote>

	===Brand Positioning===		===Brand Positioning===
	DroidBuilders occupies a unique space at the intersection of three areas:		DroidBuilders occupies a unique space at the intersection of three areas:

	'''Fandom & Community''' — rooted in Star Wars culture but defined by volunteer service		*'''Fandom & Community''' — rooted in Star Wars culture but defined by volunteer service
	'''Technical Excellence & Accessibility''' — serious builders who welcome everyone
	'''Imagination & Impact''' — entertainment that creates genuine emotional moments		*'''Technical Excellence & Accessibility''' — serious builders who welcome everyone

			*'''Imagination & Impact''' — entertainment that creates genuine emotional moments

	This positioning should inform how we present ourselves across every media format.		This positioning should inform how we present ourselves across every media format.
	[[Category:Branding]]		[[Category:Branding]]

ColorSystem

Drl-admin — Sun, 31 May 2026 23:02:31 GMT

Color Usage Rules

← Older revision		Revision as of 23:02, 31 May 2026
(One intermediate revision by the same user not shown)
Line 39:		Line 39:
	===Color Usage Rules===		===Color Usage Rules===

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

	{{:ClassicPalette}}		{{:ClassicPalette}}

StyleGuide

Drl-admin — Sun, 31 May 2026 21:17:45 GMT

← Older revision		Revision as of 21:17, 31 May 2026
(One intermediate revision by the same user not shown)
Line 3:		Line 3:
	fgcolor = #FFF\|		fgcolor = #FFF\|
	name = Droid Builder's Style Guide\|		name = Droid Builder's Style Guide\|
	image = [[File:~~All%20Droid%20Builders%20Logo~~.svg\|200px\|DroidBuildersLogo]] \|		image = [[File:All_Droid_Builders_Logo.svg\|200px\|DroidBuildersLogo]] \|
	category = Branding\|		category = Branding\|
	creators = \|		creators = Steele Smith\|
	contributors = \|		contributors = Board of Directors\|
	date = Aug 03, 2018\|		date = Aug 03, 2018\|
	updated = ~~Aug 03, 2018~~\|		updated = 2025\|
	note = ~~Graphics standards~~\|		note = Brand Standards v2.0\|
	}}		}}

			__TOC__

	==About this Guide==		==About this Guide==

	This guide is to ~~make sure that~~ the ~~brand captures new audiences while keeping a consistent~~ look~~. As~~ the brand ~~continues to evolve~~, ~~this should be used as a guide for implementing that brand identity both inside~~ and ~~outside the club~~. ~~Adhering to these specification protects~~ the ~~DroidBuilders brand by providing consistency~~ in ~~how it's presented and further differentiates~~ the ~~club. The Brand Toolkit provides guidelines for communicating our~~ brand ~~identity in a unified visual~~ system. ~~Comprised of core elements~~, ~~including logos~~, ~~colors~~, ~~type~~ and ~~icons~~, ~~this range of tools is designed to be flexible~~ and ~~expandable. To effectively define the DroidBuilder~~'~~s brand experience~~, ~~these core elements must be aligned across every touchpoint.~~		This guide exists for one reason: consistency. Every time a volunteer posts on social media, prints a banner, or builds a webpage, they are representing DroidBuilders to the world. When those touchpoints look and sound the same, the brand becomes recognizable, trustworthy, and memorable.

	~~<insert graphic of matrix (logo~~, color, typography, ~~medallion~~, ~~treatments~~, ~~graphic~~, ~~imagery~~, ~~icons>~~		This document provides the rules, tools, and rationale behind every visual and verbal decision in the DroidBuilders brand system. It is designed for everyone who creates DroidBuilders content -- board members, sector leads, volunteers, web administrators, and external partners.

			===Who This Guide Is For===

			{\| class="wikitable" style="width:100%"
			! style="background-color:#003468; color:#FFFFFF;" \| Audience
			! style="background-color:#003468; color:#FFFFFF;" \| Use This Guide For
			\|-
			\| '''Board Members'''
			\| Approving new assets; evaluating external partner materials
			\|-
			\| '''Sector and Zone Leads'''
			\| Local event collateral, social media posts, sector-specific communications
			\|-
			\| '''Volunteers and Builders'''
			\| Event signage, personal social media when representing DroidBuilders
			\|-
			\| '''Web Administrators'''
			\| Website layout, color, typography, and component decisions
			\|-
			\| '''External Partners'''
			\| Events, co-branded materials, press and media kits
			\|}

			===How to Use This Guide===

			Each section follows the same format: the rule, the rationale, and examples of correct vs. incorrect application. When in doubt, the primary brand colors and primary logo are always safe defaults.

			Asset requests and approvals should be routed to the Board of Directors or the designated Brand Steward.

			{{:BrandFoundation}}

	{{:LogoPrinciples}}		{{:LogoPrinciples}}

	~~== Color Principles==~~		{{:ColorSystem}}
	~~We use color to get noticed and to give us personality.~~ ~~The DroidBuilder's palette is bold, simple, and approachable.~~ ~~Additional complementary colors reinforce the brand and foster recognition.~~
			{{:Typography}}
	~~===Color===~~
	~~DroidBuilder's Classic colors represent a distinct color signature that works universally across all of DroidBuilder's.~~ These colors anchor and balance color expression when used with extended preferred and supplemental palettes. When it is important to signal the DroidBuilder's brand equity alone, Pantone 648, should be used in conjunction with the complimentary palettes.		{{:VoiceTone}}

	~~====Classic Palette====~~		{{:ImageryStandards}}
	{{:~~ClassicPalette~~}}
			{{:DigitalStandards}}
	~~====Preferred Palette====~~
	{{:~~PreferredPalette~~}}		{{:PrintEventStandards}}

	~~====Supplemental Palette====~~		{{:AccessibilityStandards}}
	{{:~~SupplementalPalette~~}}
			{{:StyleGuideQuickReference}}

	[[Category:Branding]]		[[Category:Branding]]

StyleGuideQuickReference

Drl-admin — Sun, 31 May 2026 21:14:03 GMT

Created page with "==Style Guide Quick Reference== This page provides a condensed reference for the most commonly needed brand standards. Follow the links to each section for full specifications. ===Color Quick Reference=== {| class="wikitable" style="width:100%" ! style="background-color:#003468; color:#FFFFFF;" | Color Name ! style="background-color:#003468; color:#FFFFFF;" | Swatch ! style="background-color:#003468; color:#FFFFFF;" | HEX ! style="background-color:#003468; color:#F..."

New page

==Style Guide Quick Reference==

This page provides a condensed reference for the most commonly needed brand
standards. Follow the links to each section for full specifications.

===Color Quick Reference===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Color Name
! style="background-color:#003468; color:#FFFFFF;" | Swatch
! style="background-color:#003468; color:#FFFFFF;" | HEX
! style="background-color:#003468; color:#FFFFFF;" | Primary Use
|-
| '''Deep Navy''' (Primary)
| style="background-color:#003468; width:60px;" |  
| <code>#003468</code>
| Primary brand color; print headers
|-
| '''Brand Blue'''
| style="background-color:#005BA8; width:60px;" |  
| <code>#005BA8</code>
| Secondary identity; supporting elements
|-
| '''Gold'''
| style="background-color:#FFC20E; width:60px;" |  
| <code>#FFC20E</code>
| CTAs, accents, highlights
|-
| '''White'''
| style="background-color:#FFFFFF; border:1px solid #CCCCCC; width:60px;" |  
| <code>#FFFFFF</code>
| Text on dark backgrounds; light backgrounds
|-
| '''Cool Gray'''
| style="background-color:#BABCBE; width:60px;" |  
| <code>#BABCBE</code>
| Secondary text, dividers
|-
| '''Deep Space'''
| style="background-color:#060D1A; width:60px;" |  
| <code>#060D1A</code>
| Web page background (outermost)
|-
| '''Dark Surface'''
| style="background-color:#0A1628; width:60px;" |  
| <code>#0A1628</code>
| Web content background
|-
| '''Card Surface'''
| style="background-color:#0F2040; width:60px;" |  
| <code>#0F2040</code>
| Web content cards and panels
|-
| '''Sky Blue'''
| style="background-color:#3BADFF; width:60px;" |  
| <code>#3BADFF</code>
| Web links, interactive elements
|}

===Typography Quick Reference===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Role
! style="background-color:#003468; color:#FFFFFF;" | Typeface
! style="background-color:#003468; color:#FFFFFF;" | Weight
! style="background-color:#003468; color:#FFFFFF;" | Notes
|-
| Hero / Major Headlines
| Exo 2
| ExtraBold 800
| Event banners, homepage hero
|-
| Section Headers (H2)
| Exo 2
| Bold 700
| Page section titles
|-
| Subheadings (H3/H4)
| Exo 2
| SemiBold 600
| Subsections, callouts
|-
| Body Copy
| Source Sans 3
| Regular 400
| All paragraph text
|-
| Emphasis / UI Labels
| Source Sans 3
| SemiBold 600
| Buttons, inline emphasis
|-
| Badges / Technical Labels
| Rajdhani
| SemiBold 600
| Tags, event codes, navigation
|}

===Logo Quick Reference===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Situation
! style="background-color:#003468; color:#FFFFFF;" | Logo to Use
|-
| National or corporate materials
| Primary (Standalone)
|-
| Alongside partner organization logos
| Circular
|-
| Sector or local events
| Sector logo
|-
| Social media profile image
| Circular
|-
| Merchandise (embroidery, screen printing)
| Circular or Medallion
|-
| Dark background
| White / reversed version
|-
| Single-color applications (engraving, embroidery)
| Single-color black version
|}

===Fundraising Language Quick Reference===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF; width:50%;" | Always Focus On
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Never Reference
|-
| Mission impact and community outreach
| Droid builds or individual build projects
|-
| Volunteer service and appearances
| Personal equipment or builder subsidies
|-
| Operational costs that enable outreach
| Funding for specific builds or parts
|-
| Community infrastructure (website, wiki)
| Any implication of personal benefit to builders
|}

===Section Links===

* [[BrandFoundation|Brand Foundation]] -- Mission, values, personality
* [[LogoPrinciples|Logo Standards]] -- Usage, clear space, do's and don'ts
* [[ColorSystem|Color System]] -- Full palette documentation
* [[Typography|Typography]] -- Typeface system and hierarchy
* [[VoiceTone|Voice and Tone]] -- Writing principles and fundraising rules
* [[ImageryStandards|Imagery Standards]] -- Photography guidelines
* [[DigitalStandards|Digital Standards]] -- Web, social, email
* [[PrintEventStandards|Print and Event Standards]] -- Signage and merchandise
* [[AccessibilityStandards|Accessibility Standards]] -- Contrast, alt text, interactive elements

[[Category:Branding]]

AccessibilityStandards

Drl-admin — Sun, 31 May 2026 21:13:00 GMT

Created page with "==Accessibility Standards== DroidBuilders serves diverse communities -- including children's hospitals, schools, and events that attract visitors of all ages and abilities. Our digital and physical communications should be readable and usable by as wide an audience as possible. ===Color Contrast=== All text must meet '''WCAG 2.1 AA''' minimum contrast ratios. For key communications (hospital materials, school handouts, public-facing web), target AAA compliance. {..."

New page

==Accessibility Standards==

DroidBuilders serves diverse communities -- including children's hospitals, schools, and events that attract visitors of all ages and abilities. Our digital and physical communications should be readable and usable by as wide an audience as possible.

===Color Contrast===

All text must meet '''WCAG 2.1 AA''' minimum contrast ratios. For key communications (hospital materials, school handouts, public-facing web), target AAA compliance.

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Ratio
! style="background-color:#003468; color:#FFFFFF;" | Standard
! style="background-color:#003468; color:#FFFFFF;" | Where to Apply
|-
| 4.5:1
| AA -- Normal text
| Minimum for all body text
|-
| 3:1
| AA -- Large text
| Minimum for text 18pt+ or bold 14pt+
|-
| 7:1
| AAA -- Normal text
| Target for high-impact and critical content
|}

====Pre-Verified Combinations (Dark Theme)====

{| class="wikitable" style="width:100%; text-align:center;"
! style="background-color:#003468; color:#FFFFFF;" | Text Color
! style="background-color:#003468; color:#FFFFFF;" | Background Color
! style="background-color:#003468; color:#FFFFFF;" | Contrast Ratio
! style="background-color:#003468; color:#FFFFFF;" | Level
|-
| style="background-color:#060D1A; color:#FFFFFF; padding:8px;" | White #FFFFFF
| style="background-color:#060D1A; color:#FFFFFF;" | Deep Space #060D1A
| 19.5:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#0A1628; color:#FFFFFF; padding:8px;" | White #FFFFFF
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| 16.3:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#0F2040; color:#FFFFFF; padding:8px;" | White #FFFFFF
| style="background-color:#0F2040; color:#FFFFFF;" | Card Surface #0F2040
| 12.4:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#0A1628; color:#FFC20E; padding:8px;" | Gold #FFC20E
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| 9.1:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#060D1A; color:#FFC20E; padding:8px;" | Gold #FFC20E
| style="background-color:#060D1A; color:#FFFFFF;" | Deep Space #060D1A
| 10.7:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#FFFFFF; color:#003468; padding:8px;" | Deep Navy #003468
| style="background-color:#FFFFFF; color:#003468;" | White #FFFFFF
| 12.0:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#FFC20E; color:#003468; padding:8px;" | Deep Navy #003468
| style="background-color:#FFC20E; color:#003468;" | Gold #FFC20E
| 4.8:1
| style="background-color:#FFFFAA; color:#003468;" | AA
|-
| style="background-color:#0A1628; color:#BABCBE; padding:8px;" | Cool Gray #BABCBE
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| 7.9:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|}

<div style="background-color:#0A1628; border:1px solid #003468; color:#BABCBE; padding:12px 16px; margin:12px 0;">
Check additional combinations using the WebAIM Contrast Checker:
https://webaim.org/resources/contrastchecker/
</div>

===Image Alt Text===

Every image published online must include descriptive alt text.

'''Formula:''' [Subject] [action or state] [context or setting]

{| class="wikitable" style="width:100%"
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Avoid
! style="background-color:#004400; color:#FFFFFF; width:50%;" | Preferred
|-
| alt="droid.jpg"
| alt="An R2-D2 replica interacting with a child in a hospital corridor
during a DroidBuilders volunteer visit"
|-
| alt="event photo"
| alt="DroidBuilders volunteers posing with BB-8 and R2-D2 at a school
visit in Phoenix"
|}

For '''decorative images''' (backgrounds, dividers, purely aesthetic
elements): use <code>alt=""</code> -- an empty alt attribute tells screen
readers to skip the image entirely.

===Typography Accessibility===

* Minimum body text size: '''16px''' on all digital surfaces
* Do not rely on color alone to communicate meaning -- pair color with text labels, icons, or patterns
* Minimum line spacing: 1.5 times the font size for body text
* Avoid justified text alignment -- it creates irregular spacing that reduces readability for users with dyslexia

===Interactive Element Requirements===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Element
! style="background-color:#003468; color:#FFFFFF;" | Requirement
|-
| Buttons, links, navigation
| Minimum touch target of 44x44 pixels on mobile
|-
| Focus states (keyboard navigation)
| Must be visible -- do not use outline:none without a custom focus style
|-
| Form inputs
| Must have associated text labels -- placeholder text alone is not
sufficient
|-
| Images
| Descriptive alt text required (see above)
|-
| Color-coded information
| Must also use text labels or patterns -- do not rely on color alone
|}

[[Category:Branding]]

PrintEventStandards

Drl-admin — Sun, 31 May 2026 21:11:11 GMT

Created page with "==Print and Event Standards== ===Event Signage=== {| class="wikitable" style="width:100%" ! style="background-color:#003468; color:#FFFFFF;" | Format ! style="background-color:#003468; color:#FFFFFF;" | Primary Typeface ! style="background-color:#003468; color:#FFFFFF;" | Min. Font Size ! style="background-color:#003468; color:#FFFFFF;" | Color Guidance |- | Large banner (3 ft or larger) | Exo 2 Bold | 2 in at full print size | Dark background; White and Gold text |-..."

New page

==Print and Event Standards==

===Event Signage===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Format
! style="background-color:#003468; color:#FFFFFF;" | Primary Typeface
! style="background-color:#003468; color:#FFFFFF;" | Min. Font Size
! style="background-color:#003468; color:#FFFFFF;" | Color Guidance
|-
| Large banner (3 ft or larger)
| Exo 2 Bold
| 2 in at full print size
| Dark background; White and Gold text
|-
| Pop-up / retractable banner
| Exo 2 Bold + Source Sans 3 body
| 0.5 in headline
| Classic Palette on white or dark theme
|-
| Table sign / tent card
| Exo 2 or Source Sans 3
| 12 pt
| Match event theme; ensure 4.5:1 contrast minimum
|-
| Name badge / lanyard
| Rajdhani SemiBold
| 10 pt
| Dark Surface background with Gold or White text
|-
| Handbill / flyer
| Exo 2 headlines + Source Sans 3 body
| 8 pt body minimum
| Classic Palette preferred
|}

===Print-Specific Guidance===

* All print production uses '''CMYK''' color values from the Classic Palette
* For embroidery, engraving, or single-color reproduction, use the '''single-color (black) logo version'''
* Request Pantone spot color values from the asset library for high-precision commercial print applications
* '''Bleed:''' Add 0.125 in on all edges for any piece that bleeds to the edge of the paper
* '''Minimum body text size:''' 8 pt in print
* Submit all print files in CMYK color mode, not RGB

===Merchandise===

Branded merchandise should:

* Feature the '''Circular Logo or Medallion''' as the primary mark (most practical for embroidery and screen printing)
* Use Deep Navy, Black, or White as the garment base color whenever possible
* Avoid using Preferred or Supplemental palette colors as dominant garment colors
* Never use unlicensed or unapproved artwork alongside the DroidBuilders brand

<div style="background-color:#0A1628; border-left:4px solid #FFC20E; padding:12px 16px; margin:12px 0; color:#FFFFFF;">

'''Important:''' Merchandise featuring droid imagery must not replicate
officially licensed Star Wars products in a way that implies authorization
from Lucasfilm or Disney. When in doubt, consult the Board of Directors before
production.
</div>

[[Category:Branding]]

DigitalStandards

Drl-admin — Sun, 31 May 2026 21:10:02 GMT

Created page with "==Digital Standards== ===Website (droidbuilders.info)=== The primary DroidBuilders website uses a '''dark theme''' as the established visual standard. All page design decisions align with the Dark Theme Palette and Typography system. ====Layout Principles==== * Maximum content width: 1200px (boxed layout) * The Coruscant cityscape side background is an intentional design element -- do not remove or replace * Whitespace is a design feature..."

New page

==Digital Standards==

===Website (droidbuilders.info)===

The primary DroidBuilders website uses a '''dark theme''' as the established visual standard. All page design decisions align with the
[[DarkThemePalette|Dark Theme Palette]] and [[Typography]] system.

====Layout Principles====

* Maximum content width: 1200px (boxed layout)
* The Coruscant cityscape side background is an intentional design element -- do not remove or replace
* Whitespace is a design feature -- avoid dense or cluttered layouts
* Each page should follow this visual flow: hero > key message > supporting content > call to action

====Component Standards====

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Component
! style="background-color:#003468; color:#FFFFFF;" | Color
! style="background-color:#003468; color:#FFFFFF;" | Notes
|-
| Page background
| Deep Space <code>#060D1A</code>
| Outermost layer only
|-
| Content background
| Dark Surface <code>#0A1628</code>
| Primary content area
|-
| Cards and panels
| Card Surface <code>#0F2040</code>
| Individual content blocks
|-
| Primary CTA button
| Gold <code>#FFC20E</code> with Deep Navy text
| Main action on any page
|-
| Secondary button
| Transparent with Gold border
| Supporting actions
|-
| Links (inline)
| Sky Blue <code>#3BADFF</code>
| Hover state: Gold
|-
| Dividers
| Border <code>#003468</code>
| Section separators
|-
| Navigation text
| White, uppercase
| Exo 2 SemiBold; active state: Gold underline or text
|}

====Minimum Touch Targets====

All interactive elements must have a minimum touch target of 44x44 pixels
on mobile. See [[AccessibilityStandards]] for full requirements.

===Donation Page===

The donation page is one of the highest-impact pages on the site.

* Lead with mission impact before donation mechanics
* Four-tier payment structure is the approved system:
** Community -- $1/month
** Mission -- $55/year
** Champion -- $75/year
** One-Time -- any amount
* Tier names and amounts may only be changed by board approval
* CTA buttons must use Gold (<code>#FFC20E</code>) with Deep Navy text
* All copy must conform to fundraising language rules in [[VoiceTone]]

===Social Media===

====Platform Image Specifications====

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Platform
! style="background-color:#003468; color:#FFFFFF;" | Profile Image
! style="background-color:#003468; color:#FFFFFF;" | Cover / Banner
! style="background-color:#003468; color:#FFFFFF;" | Post Image Size
|-
| Facebook
| Circular Logo, 400x400px
| 1640x924px
| 1200x630px
|-
| Instagram
| Circular Logo, 400x400px
| N/A
| 1080x1080px square; 1080x1350px portrait
|-
| X (Twitter)
| Circular Logo, 400x400px
| 1500x500px
| 1200x675px
|-
| YouTube
| Circular Logo, 800x800px
| 2560x1440px
| Thumbnail: 1280x720px
|}

====Social Media Voice====

* Use the voice principles from [[VoiceTone]] -- warm, precise, joyful
* Primary hashtag: #DroidBuilders -- add event-specific or sector tags as secondary
* Only post on behalf of the organization with board or designated social media lead authorization
* Refer to droids as "droids" -- not "robots" or "costumes"
* Tag partner organizations when sharing event content, with their permission

====Sector Social Media Accounts====

Sector accounts must:

* Use the sector/zone logo (not the primary standalone logo) as the profile image
* Include "DroidBuilders -- [Sector Name]" in the account display name
* Follow all national voice, tone, and content standards
* Not post organizational policy statements or announcements -- those originate from the board only

===Email Communications===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Element
! style="background-color:#003468; color:#FFFFFF;" | Specification
|-
| Header
| Full-width dark background; Primary Logo (white version), centered
|-
| Body background
| Dark Surface <code>#0A1628</code> preferred; white for light-theme emails
|-
| Typography
| Source Sans 3 for body; Exo 2 for headlines (web-safe fallbacks apply)
|-
| CTA buttons
| Gold <code>#FFC20E</code> with Deep Navy text; minimum 44px tall;
full-width on mobile
|-
| Footer
| Unsubscribe link, mailing address, and 501(c)(3) designation required
|-
| Subject lines
| Lead with action or impact; avoid spam-trigger phrases
|}

[[Category:Branding]]

ImageryStandards

Drl-admin — Sun, 31 May 2026 21:08:03 GMT

Created page with "==Imagery and Photography== Authentic imagery is one of the most powerful tools in the DroidBuilders brand toolkit. A single great photo of a droid in a hospital hallway communicates everything our brand stands for. ===Photography Style=== '''Authentic over staged.''' Real moments at real events -- children's reactions, builders at work, droids in environment -- are always preferred over posed or studio-style shots. '''People-forward.''' The best DroidBuilders im..."

New page

==Imagery and Photography==

Authentic imagery is one of the most powerful tools in the DroidBuilders brand
toolkit. A single great photo of a droid in a hospital hallway communicates
everything our brand stands for.

===Photography Style===

'''Authentic over staged.''' Real moments at real events -- children's
reactions, builders at work, droids in environment -- are always preferred
over posed or studio-style shots.

'''People-forward.''' The best DroidBuilders images feature the human element:
the reaction, the interaction, the volunteer's pride, the child's wonder.
Droids alone are interesting; droids with people are powerful.

'''Environment matters.''' Hospital corridors, school hallways, convention
floors, and community spaces all reinforce the mission. Establish the setting
so viewers understand the context.

===Photography Guidelines===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Principle
! style="background-color:#003468; color:#FFFFFF;" | Detail
|-
| '''Preferred Subjects'''
| Droid and person interactions; volunteer builders at work; event environments; community member reactions
|-
| '''Lighting'''
| Natural or warm ambient light preferred; avoid harsh flash that flattens images
|-
| '''Composition'''
| Rule of thirds; leave room for text overlay when intended for marketing use
|-
| '''Color Tone'''
| Warm-neutral; avoid heavy filters or oversaturated processing
|-
| '''Quality -- Web'''
| Minimum 1500px on the short edge
|-
| '''Quality -- Print'''
| Minimum 300 DPI at the final print size
|}

===Image Permissions===

<div style="background-color:#0A1628; border-left:4px solid #FFC20E; padding:16px; margin:12px 0; color:#FFFFFF;">
'''Always obtain explicit permission before publishing images of minors.'''
This is a legal requirement and an ethical obligation, particularly given the
frequency of school and hospital visits.
</div>

'''For events:'''

* Confirm the venue's media policy before photographing
* Use event consent forms where required
* When in doubt, do not publish identifiable images of children

'''For builders and volunteers:'''

* Verbal consent is sufficient for most publication contexts
* Tag volunteers in social media only with their explicit approval

===Text Overlays on Imagery===

When placing text on photography:

* Apply a Dark Space overlay (#060D1A at 40-60% opacity) behind text to ensure legibility
* Use White or Gold text only on photographic backgrounds -- never Process Black
* Maintain logo clear space rules even when placing the logo on photography

===What to Avoid===

* Stock photography depicting droids from the actual Star Wars films -- we build replicas inspired by those designs
* Imagery implying official affiliation with Lucasfilm, Disney, or the Star Wars brand
* Low-resolution, blurry, or poorly lit images in any published context
* Heavy filters, Instagram-style presets, or unnatural color grading
* Images where intellectual property from other organizations is prominently featured without permission

[[Category:Branding]]

VoiceTone

Drl-admin — Sun, 31 May 2026 21:05:49 GMT

Created page with "==Voice and Tone== The DroidBuilders voice is the consistent personality behind all written communications. It never changes -- it is always warm, grounded, and genuine. '''Tone''' adjusts based on context: more celebratory at an event, more direct in a press release, more informative in technical documentation. ===The DroidBuilders Voice=== Three words define how we always sound: {| class="wikitable" style="width:100%" ! style="background-color:#003468; color:#F..."

New page

==Voice and Tone==

The DroidBuilders voice is the consistent personality behind all written
communications. It never changes -- it is always warm, grounded, and genuine.
'''Tone''' adjusts based on context: more celebratory at an event, more direct
in a press release, more informative in technical documentation.

===The DroidBuilders Voice===

Three words define how we always sound:

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF; width:15%;" | Word
! style="background-color:#003468; color:#FFFFFF;" | What It Means
|-
| '''Warm'''
| We are a community of volunteers who care about the people we serve. Our writing reflects that care -- never corporate, never cold.
|-
| '''Precise'''
| We are builders. We get the details right. Our writing is clear, specific, and accurate -- no vague platitudes.
|-
| '''Joyful'''
| We exist to create moments of delight. That spirit shows in our words -- playful when appropriate, never self-serious.
|}

===Tone by Context===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Context
! style="background-color:#003468; color:#FFFFFF;" | Tone
! style="background-color:#003468; color:#FFFFFF;" | Notes
|-
| Social media (event day)
| Enthusiastic, celebratory
| Share the energy of the moment; photos first
|-
| Social media (general)
| Warm, conversational
| Invite people in; celebrate the community
|-
| Website homepage
| Inviting, confident, mission-focused
| Clear value statement without jargon
|-
| Website wiki / how-to
| Direct, informative, accessible
| Step-by-step; no assumed knowledge
|-
| Donation / fundraising
| Heartfelt, specific, impact-focused
| Concrete stories; never guilt-driven
|-
| Press / media
| Factual, professional, accessible
| Jargon-free; lead with the mission
|-
| Event signage
| Brief, joyful, bold
| One clear idea per piece
|-
| Crisis / serious communications
| Calm, direct, empathetic
| Facts first; no speculation
|}

===Writing Principles===

====Lead with impact, not process====

{| class="wikitable" style="width:100%"
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Avoid
! style="background-color:#004400; color:#FFFFFF; width:50%;" | Preferred
|-
| DroidBuilders, Inc. is a 501(c)(3) nonprofit organization that organizes
volunteer events...
| We bring full-scale droids to children's hospitals, schools, and community
events -- all volunteer, all heart.
|}

====Be specific. Specificity builds trust.====

{| class="wikitable" style="width:100%"
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Avoid
! style="background-color:#004400; color:#FFFFFF; width:50%;" | Preferred
|-
| We've helped a lot of people.
| In 2024, DroidBuilders volunteers made appearances at over 60 events
across the country.
|}

====Speak to the person, not the crowd.====

{| class="wikitable" style="width:100%"
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Avoid
! style="background-color:#004400; color:#FFFFFF; width:50%;" | Preferred
|-
| Attendees are encouraged to interact with the droids.
| Come say hello -- the droids are friendly.
|}

====Earn the exclamation mark====

Enthusiasm is good. Overuse of ! dilutes the impact of genuine excitement.
Reserve it for moments that truly call for it -- not every sentence.

===Fundraising Language -- Required Rules===

<div style="background-color:#0A1628; border-left:4px solid #FFC20E; padding:16px; margin:12px 0; color:#FFFFFF;">
'''Critical:''' DroidBuilders is community-funded through donations that
support our '''mission and community presence''' -- not individual build
projects. All fundraising language must reflect this distinction. It matters
deeply to our community and must be respected in every communication.
</div>

'''Never reference "droid builds" as a funding purpose.''' This implies the
organization subsidizes personal projects and has caused real controversy in
the builder community.

'''Approved fundraising frames:'''

* Mission and community impact (school visits, hospital appearances, events)
* Operational costs that enable outreach (logistics, supplies, insurance, transportation)
* Community infrastructure (website, wiki, builder resources)
* Organizational sustainability

{| class="wikitable" style="width:100%"
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Avoid
! style="background-color:#004400; color:#FFFFFF; width:50%;" | Preferred
|-
| Help us fund new droid builds and keep our builders equipped.
| Your support keeps our droids on the road and our volunteers in the
community.
|-
| Donations help builders complete their projects.
| Every dollar goes toward the events and infrastructure that make our
outreach possible.
|}

===Words We Use and Avoid===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Use This
! style="background-color:#003468; color:#FFFFFF;" | Not This
! style="background-color:#003468; color:#FFFFFF;" | Why
|-
| Volunteers
| Members, employees
| Reflects who we actually are
|-
| Community
| Fanbase, fans
| We serve broadly, not just fans
|-
| Builders
| Makers, creators
| Industry-specific, respected term in our community
|-
| Outreach, appearances
| Shows, performances
| Reflects service orientation, not entertainment
|-
| Replica droids
| Costumes
| Droids are props and robots, not worn costumes
|-
| Mission
| Operations
| Keeps focus on purpose over process
|-
| Support the mission
| Donate to DroidBuilders
| Action-oriented and impact-focused
|}

===Writing for Accessibility===

* Aim for a reading level of grade 7-9 for public-facing content
* Spell out abbreviations and acronyms on first use
* Use active voice; avoid passive constructions
* Break long passages into short paragraphs with descriptive subheadings
* Write descriptive alt text for all images (see [[AccessibilityStandards]])

[[Category:Branding]]

Typography

Drl-admin — Sun, 31 May 2026 21:03:06 GMT

Created page with "==Typography== Typography communicates personality before a single word is read. The DroidBuilders type system balances technical precision with warmth -- structured enough to signal craft and expertise, but readable for every audience from children to convention crowds. All typefaces are available from Google Fonts at no cost and are compatible with WordPress, Avada, and standard design software. <div style="background-color:#0A1628; border:1px solid #003468; colo..."

New page

==Typography==

Typography communicates personality before a single word is read. The
DroidBuilders type system balances technical precision with warmth -- structured
enough to signal craft and expertise, but readable for every audience from
children to convention crowds.

All typefaces are available from Google Fonts at no cost and are compatible
with WordPress, Avada, and standard design software.

<div style="background-color:#0A1628; border:1px solid #003468; color:#BABCBE; padding:12px 16px; margin:12px 0;">
'''Wiki Note:''' MediaWiki does not load Google Fonts by default. The
specifications below define the brand standard. Fonts render correctly on
droidbuilders.info and in print. For wiki documentation purposes, this page
displays in standard system fonts.
</div>

===Primary Typefaces===

====Display and Headlines: Exo 2====

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Attribute
! style="background-color:#003468; color:#FFFFFF;" | Detail
|-
| '''Character'''
| Technical, forward-looking, structured. Signals the DroidBuilders spirit
in hero statements and major headlines.
|-
| '''Weights in Use'''
| ExtraBold (800) -- Hero headlines, page titles; Bold (700) -- Section
headers, event titles; SemiBold (600) -- Subheadings, callouts
|-
| '''Google Fonts'''
| https://fonts.google.com/specimen/Exo+2
|-
| '''Primary Use'''
| Homepage hero text, event banners, large-format print, page section headers
|}

====Body and Primary Text: Source Sans 3====

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Attribute
! style="background-color:#003468; color:#FFFFFF;" | Detail
|-
| '''Character'''
| Clean, neutral, highly legible at any size. Designed for screen and print.
Reads naturally across age groups.
|-
| '''Weights in Use'''
| Regular (400) -- Body copy, descriptions; SemiBold (600) -- Emphasis,
UI labels, button text; Light (300) -- Supporting captions in spacious
layouts
|-
| '''Google Fonts'''
| https://fonts.google.com/specimen/Source+Sans+3
|-
| '''Primary Use'''
| All paragraph text, UI elements, form labels, captions, emails, wiki content
|}

====Accent and Labels: Rajdhani====

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Attribute
! style="background-color:#003468; color:#FFFFFF;" | Detail
|-
| '''Character'''
| Condensed, geometric, slightly futuristic. Ideal for labels and technical
callouts. Draws the eye without competing with body text.
|-
| '''Weights in Use'''
| SemiBold (600) -- Primary labels and callouts; Bold (700) -- Badges,
event codes, sector identifiers
|-
| '''Google Fonts'''
| https://fonts.google.com/specimen/Rajdhani
|-
| '''Primary Use'''
| Event type labels, badge text, navigation items, data labels, tags,
technical markers
|}

===Type Hierarchy===

The following scale applies to digital (web) applications. Print scaling
should be adjusted proportionally.

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Level
! style="background-color:#003468; color:#FFFFFF;" | Typeface
! style="background-color:#003468; color:#FFFFFF;" | Weight
! style="background-color:#003468; color:#FFFFFF;" | Desktop Size
! style="background-color:#003468; color:#FFFFFF;" | Mobile Size
! style="background-color:#003468; color:#FFFFFF;" | Color (Dark Theme)
|-
| Hero Headline
| Exo 2
| ExtraBold 800
| 56-72px
| 36-48px
| White #FFFFFF
|-
| H1 Page Title
| Exo 2
| Bold 700
| 40-48px
| 28-36px
| White #FFFFFF
|-
| H2 Section Header
| Exo 2
| Bold 700
| 28-32px
| 22-26px
| White #FFFFFF
|-
| H3 Subsection
| Exo 2
| SemiBold 600
| 20-24px
| 18-20px
| White or Cool Gray
|-
| H4 Component Title
| Source Sans 3
| SemiBold 600
| 18px
| 16px
| White or Cool Gray
|-
| Body Standard
| Source Sans 3
| Regular 400
| 16px
| 15px
| Cool Gray #BABCBE
|-
| Body Large
| Source Sans 3
| Regular 400
| 18px
| 16px
| Cool Gray #BABCBE
|-
| Caption
| Source Sans 3
| Light 300
| 13px
| 12px
| Muted #7B8A9A
|-
| Label / Badge
| Rajdhani
| SemiBold 600
| 12-14px
| 12px
| Gold #FFC20E
|-
| Button / CTA
| Source Sans 3
| SemiBold 600
| 15-16px
| 14-15px
| Deep Navy on Gold background
|}

===Typography Rules===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Property
! style="background-color:#003468; color:#FFFFFF;" | Rule
|-
| Line height (body text)
| 1.5 to 1.6 times the font size
|-
| Line height (headlines)
| 1.1 to 1.2 times the font size
|-
| Maximum line length
| 65-75 characters (improves readability)
|-
| Alignment
| Left-aligned by default; centered only for short display text
|-
| Letter spacing (labels)
| +0.05 to +0.1em for Rajdhani and all-caps text
|-
| Italic use
| Reserved for citations and special emphasis only -- not body paragraphs
|-
| All-caps use
| Appropriate for labels, short callouts, navigation -- never body paragraphs
|}

===Web Fallback Stack===

If Google Fonts are unavailable or fail to load, use the following:

<pre>
/* Display / Headings */
font-family: 'Exo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;

/* Body */
font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;

/* Labels / Technical */
font-family: 'Rajdhani', 'Tahoma', 'Geneva', sans-serif;
</pre>

[[Category:Branding]]

ColorSystem

Drl-admin — Sun, 31 May 2026 21:01:56 GMT

Created page with "==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: {| class="wikitable" style="width:100%" ! style="background-color:#003468; color:#FFFFFF;" | Tier ! style="background-col..."

New page

==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:

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Tier
! style="background-color:#003468; color:#FFFFFF;" | Name
! style="background-color:#003468; color:#FFFFFF;" | Purpose
! style="background-color:#003468; color:#FFFFFF;" | When to Use
|-
| '''1'''
| [[ClassicPalette|Classic Palette]]
| Core brand identity -- 6 colors
| All materials, all contexts
|-
| '''2'''
| [[DarkThemePalette|Dark Theme Palette]]
| Digital-first surface and text system
| Website, screen applications, digital-only materials
|-
| '''3'''
| [[PreferredPalette|Preferred Palette]]
| Extended accents -- 3 colors
| Marketing variety, event materials, sector content
|-
| '''4'''
| [[SupplementalPalette|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]])

{{:ClassicPalette}}

{{:DarkThemePalette}}

{{:PreferredPalette}}

{{:SupplementalPalette}}

[[Category:Branding]]

SupplementalPalette

Drl-admin — Sun, 31 May 2026 21:01:00 GMT

Show changes

PreferredPalette

Drl-admin — Sun, 31 May 2026 21:00:18 GMT

← Older revision		Revision as of 21:00, 31 May 2026
Line 1:		Line 1:
	Preferred ~~base~~ colors ~~span~~ the ~~spectrum~~. ~~These~~ colors ~~have been selected~~ as ~~a foundation to build and evolve additional palettes from while retaining the overall feel~~.		==Preferred Palette==

	{\| ~~class~~="~~wikitable~~"		Preferred colors add energy and variety to marketing materials. They complement
	\|~~+Preferred Palette~~		the Classic Palette without replacing it. '''Do not use Preferred colors as
			primary brand colors on national or corporate materials.'''
	\| style="background-color:#~~f29600~~; text-align: center; ~~color~~:~~#ffffff; padding:50px~~;" \| '''Pantone 124''' <br>
	~~CMYK (5%, 41%, 100%, 0%)~~ <br>		{\| style="width:100%; border-collapse:separate; border-spacing:6px;"
	RGB (242, 150, 0) <br>		\|-
	~~HEX~~: ~~#F29600~~ <br>		\| style="background-color:#F29600; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" \|
	HSL (37, 100%, 47%)		'''Amber'''<br/>
			''Pantone 124''<br/>
	\| style="background-color:#~~f26300~~; text-align: center; ~~color~~:~~#ffffff; padding:50px~~;" \| '''Pantone 716C''' <br>		<hr style="border-color:#FFFFFF44;"/>
	~~CMYK (5%, 61%, 99%, 0%)~~ <br>		HEX: <code>#F29600</code><br/>
	RGB: (242, 99, 0) <br>		RGB: 242, 150, 0<br/>
	~~HEX~~: ~~#F26300~~ <br>		CMYK: 5%, 41%, 100%, 0%<br/>
	HSL (24, 98%, 48%)		HSL: 37, 100%, 47%
			\| style="background-color:#F26300; color:#FFFFFF; padding:24px 16px; text-align:center; width:33%;" \|
	\| style="background-color:#~~3badff~~; text-align: center; ~~color~~:~~#ffffff; padding:50px~~;" \| '''Pantone 2925''' <br>		'''Orange'''<br/>
	~~CMYK (77%, 32%, 0%, 0%)~~ <br>		''Pantone 716C''<br/>
	RGB (59, 173, 255) <br>		<hr style="border-color:#FFFFFF44;"/>
	~~HEX~~: ~~#3BADFF~~ <br>		HEX: <code>#F26300</code><br/>
	HSL (205, 100%, 61%)		RGB: 242, 99, 0<br/>
			CMYK: 5%, 61%, 99%, 0%<br/>
			HSL: 24, 98%, 48%
			\| style="background-color:#3BADFF; color:#003468; padding:24px 16px; text-align:center; width:34%;" \|
			'''Sky Blue'''<br/>
			''Pantone 2925''<br/>
			<hr style="border-color:#00346844;"/>
			HEX: <code>#3BADFF</code><br/>
			RGB: 59, 173, 255<br/>
			CMYK: 77%, 32%, 0%, 0%<br/>
			HSL: 205, 100%, 61%
	\|}		\|}

			===Preferred Palette Usage===

			{\| class="wikitable" style="width:100%"
			! style="background-color:#003468; color:#FFFFFF;" \| Appropriate Uses
			! style="background-color:#6B0000; color:#FFFFFF;" \| 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
			\|}

	[[Category:Branding]]		[[Category:Branding]]

DarkThemePalette

Drl-admin — Sun, 31 May 2026 20:59:46 GMT

Created page with "==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%;..."

New page

==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]]

ClassicPalette

Drl-admin — Sun, 31 May 2026 20:58:56 GMT

Show changes

LogoPrinciples

Drl-admin — Sun, 31 May 2026 20:58:04 GMT

Show changes

BrandFoundation

Drl-admin — Sun, 31 May 2026 20:39:34 GMT

Created page with "==Brand Foundation== The visual identity only works when it connects to what DroidBuilders actually is. These foundational statements should inform every creative decision — from a social post to a convention banner. ===Who We Are=== DroidBuilders, Inc. is a 501(c)(3) nonprofit organization of volunteer builders who construct full-scale replica droids — including R2-D2, BB-8, MSE mouse droids, and others — and bring them to schools, children's hospitals, convention..."

New page

==Brand Foundation==
The visual identity only works when it connects to what DroidBuilders actually is. These foundational statements should inform every creative decision — from a social post to a convention banner.
===Who We Are===
DroidBuilders, Inc. is a 501(c)(3) nonprofit organization of volunteer builders who construct full-scale replica droids — including R2-D2, BB-8, MSE mouse droids, and others — and bring them to schools, children's hospitals, conventions, and community events. We exist to spread joy, inspire curiosity, and give back to the communities around us.
We are not a business. We are not a studio. We are a community of passionate people united by craft, creativity, and generosity.
===Mission Statement===
<blockquote>'''Bringing imagination to life for our communities through the art of droid building.'''</blockquote>

===Brand Values===
{| class="wikitable" style="width:100%"
! style="width:20%; background-color:#003468; color:#FFFFFF;" | Value
! style="background-color:#003468; color:#FFFFFF;" | What It Means for the Brand
|-
|'''Community''' || We lead with connection. Our voice is warm, inclusive, and welcoming to newcomers and veterans alike.
|-
|'''Craftsmanship'''|| We take quality seriously. Our materials, messaging, and visuals should reflect care and attention to detail.
|-
|'''Joy''' || We show up to make people smile. Playfulness and wonder are features, not bugs.
|-
|'''Integrity''' || As a nonprofit, we are stewards of trust. Our communications are honest, transparent, and mission-focused.
|-
|'''Curiosity''' || We celebrate builders, makers, and dreamers. We encourage exploration and learning at every level.
|}

===Brand Personality===
If DroidBuilders were a person, they would be:

A skilled craftsperson who makes things look effortless
The kind of volunteer who shows up early and stays late
Someone who lights up a room — or a children's ward — without needing to announce it
Technically precise but never cold or unapproachable
Proud of the craft, but more proud of the impact

<blockquote>'''In one sentence:''' ''DroidBuilders is the friend who built an R2 unit from scratch and brought it to a kid's birthday party for free.''</blockquote>
===Brand Positioning===
DroidBuilders occupies a unique space at the intersection of three areas:

'''Fandom & Community''' — rooted in Star Wars culture but defined by volunteer service
'''Technical Excellence & Accessibility''' — serious builders who welcome everyone
'''Imagination & Impact''' — entertainment that creates genuine emotional moments

This positioning should inform how we present ourselves across every media format.
[[Category:Branding]]

Template:Multiple image/styles.css

Drl-admin — Mon, 25 May 2026 23:37:54 GMT

Drl-admin changed the content model of the page Template:Multiple image/styles.css from "wikitext" to "Sanitized CSS"