StyleGuide
| |
| Droid Builder's Style Guide | |
|---|---|
| Category: | Branding |
| Creators: | |
| Contributors: | |
| Date: | Aug 03, 2018 |
| Updated: | 2025 |
| Notes: | Brand Standards v2.0 |
About this Guide
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.
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
| Audience | 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.
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
Bringing imagination to life for our communities through the art of droid building.
Brand Values
| Value | 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
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.
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.
Logo Standards
The DroidBuilders logo is the single most recognizable asset in our brand system. Consistent, correct use builds recognition and protects brand equity across every touchpoint -- from social media profiles to convention banners.
Never recreate, redraw, or modify the logo. Always use approved source files. Contact the Board of Directors if you need a format not available in the asset library.
Primary Logo (Standalone)
The full DroidBuilders logo is the default organizational mark. Use it wherever the full organization name should be communicated clearly.
| Attribute | Detail |
|---|---|
| Source File | All_Droid_Builders_Logo.svg
|
| Preferred Formats | SVG (all digital use), EPS (print production) |
| When to Use | Corporate communications, advertising, national marketing, website headers,
partnership materials |
| Approved Color Versions | Full color on white or light backgrounds; reversed (white logo) on dark or
photographic backgrounds; single-color black for embroidery and single-color print |
Circular Logo
The circular logo is the secondary mark. Designed for compact applications and for use alongside logos from other clubs and organizations.
| Attribute | Detail |
|---|---|
| Source File | DroidBuilders_Circle_Logo_v2_paths.svg
|
| When to Use | Social media profile icons, alongside partner organization logos,
merchandise, small-format signage |
Medallion
The DroidBuilders medallion is used across all tiers of the organization. Appropriate for both sector-level and national-level applications. Preferred for embroidery and screen printing on merchandise.
Sector, Region & Zone Logos
Sector logos are approved marks for local area clubs where direct community outreach most often occurs. Sector logos are always used alongside -- never as a replacement for -- the national DroidBuilders logo on any material representing the broader organization.
Approved Sector Logos (add links as logos are approved):
- BlackSun Sector
- Los Angeles Sector
- MidAtlantic Sector
- NorthEast Sector
- San Diego Sector
Logo Usage Matrix
| Logo Mark | Local / Sector Events | Regional Advertising | National Marketing | Corporate / Organizational |
|---|---|---|---|---|
| Primary (Standalone) | Yes | Yes | Yes | |
| Circular Logo | Yes | Yes | Yes | Yes |
| Sector / Region / Zone Logo | Yes | |||
| Medallion | Yes | Yes | Yes | Yes |
Clear Space
Clear space is the protected zone around the logo that must remain free of all text, logos, imagery, and graphic elements.
Rule: The minimum clear space on all four sides equals half the height of the logo as rendered.
Example: if the logo is displayed at 100px tall, maintain at least 50px of clear space on all four sides.
<- 1/2H -> <---- Logo Width ----> <- 1/2H ->
^
1/2H
v
[ DROIDBUILDERS LOGO ]
^
1/2H
v
Minimum Size
| Format | Minimum Logo Width | Minimum Type Size |
|---|---|---|
| 0.75 in | 8 pt | |
| Digital (web, screen) | 120 px | 12 px |
| Embroidery / Physical production | 1.0 in | N/A -- use provided vector art |
Logo Do's and Don'ts
| Do | Do Not |
|---|---|
|
|
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) HEX: |
Brand Blue HEX: |
Gold HEX: |
|
White HEX: |
Cool Gray HEX: |
Process Black HEX: |
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 HEX: |
Dark Surface HEX: |
Card Surface HEX: |
|
Elevated Surface HEX: |
Border HEX: |
Text Colors
|
Text Primary HEX: |
Text Secondary HEX: |
Text Muted HEX: |
Accent Colors
|
Accent Gold HEX: |
Accent Blue HEX: |
Accent Gold Hover HEX: |
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 HEX: |
Orange HEX: |
Sky Blue HEX: |
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 HEX: |
Yellow Green HEX: |
Brick Red HEX: |
|
Magenta HEX: |
Purple HEX: |
Teal HEX: |
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 |
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.
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.
Primary Typefaces
Display and Headlines: Exo 2
| Attribute | 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
| Attribute | 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
| Attribute | 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.
| Level | Typeface | Weight | Desktop Size | Mobile Size | 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
| Property | 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:
/* 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;
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:
| Word | 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
| Context | Tone | 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
| Avoid | 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.
| Avoid | 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.
| Avoid | 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
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.
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
| Avoid | 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
| Use This | Not This | 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)
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
| Principle | 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
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.
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
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 -- avoid dense or cluttered layouts
- Each page should follow this visual flow: hero > key message > supporting content > call to action
Component Standards
| Component | Color | Notes |
|---|---|---|
| Page background | Deep Space #060D1A
|
Outermost layer only |
| Content background | Dark Surface #0A1628
|
Primary content area |
| Cards and panels | Card Surface #0F2040
|
Individual content blocks |
| Primary CTA button | Gold #FFC20E with Deep Navy text
|
Main action on any page |
| Secondary button | Transparent with Gold border | Supporting actions |
| Links (inline) | Sky Blue #3BADFF
|
Hover state: Gold |
| Dividers | Border #003468
|
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 (
#FFC20E) with Deep Navy text - All copy must conform to fundraising language rules in VoiceTone
Social Media
Platform Image Specifications
| Platform | Profile Image | Cover / Banner | Post Image Size |
|---|---|---|---|
| Circular Logo, 400x400px | 1640x924px | 1200x630px | |
| 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
| Element | Specification |
|---|---|
| Header | Full-width dark background; Primary Logo (white version), centered |
| Body background | Dark Surface #0A1628 preferred; white for light-theme emails
|
| Typography | Source Sans 3 for body; Exo 2 for headlines (web-safe fallbacks apply) |
| CTA buttons | Gold #FFC20E 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 |
Print and Event Standards
Event Signage
| Format | Primary Typeface | Min. Font Size | 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
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.
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.
| Ratio | Standard | 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)
| Text Color | Background Color | Contrast Ratio | Level |
|---|---|---|---|
| White #FFFFFF | Deep Space #060D1A | 19.5:1 | AAA |
| White #FFFFFF | Dark Surface #0A1628 | 16.3:1 | AAA |
| White #FFFFFF | Card Surface #0F2040 | 12.4:1 | AAA |
| Gold #FFC20E | Dark Surface #0A1628 | 9.1:1 | AAA |
| Gold #FFC20E | Deep Space #060D1A | 10.7:1 | AAA |
| Deep Navy #003468 | White #FFFFFF | 12.0:1 | AAA |
| Deep Navy #003468 | Gold #FFC20E | 4.8:1 | AA |
| Cool Gray #BABCBE | Dark Surface #0A1628 | 7.9:1 | AAA |
Check additional combinations using the WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Image Alt Text
Every image published online must include descriptive alt text.
Formula: [Subject] [action or state] [context or setting]
| Avoid | 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 alt="" -- 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
| Element | 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 |
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
| Color Name | Swatch | HEX | Primary Use |
|---|---|---|---|
| Deep Navy (Primary) | #003468
|
Primary brand color; print headers | |
| Brand Blue | #005BA8
|
Secondary identity; supporting elements | |
| Gold | #FFC20E
|
CTAs, accents, highlights | |
| White | #FFFFFF
|
Text on dark backgrounds; light backgrounds | |
| Cool Gray | #BABCBE
|
Secondary text, dividers | |
| Deep Space | #060D1A
|
Web page background (outermost) | |
| Dark Surface | #0A1628
|
Web content background | |
| Card Surface | #0F2040
|
Web content cards and panels | |
| Sky Blue | #3BADFF
|
Web links, interactive elements |
Typography Quick Reference
| Role | Typeface | Weight | 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
| Situation | 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
| Always Focus On | 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
- Brand Foundation -- Mission, values, personality
- Logo Standards -- Usage, clear space, do's and don'ts
- Color System -- Full palette documentation
- Typography -- Typeface system and hierarchy
- Voice and Tone -- Writing principles and fundraising rules
- Imagery Standards -- Photography guidelines
- Digital Standards -- Web, social, email
- Print and Event Standards -- Signage and merchandise
- Accessibility Standards -- Contrast, alt text, interactive elements