StyleGuide

Droid Builder's Style Guide
Category:	Branding
Creators:
Contributors:
Date:	Aug 03, 2018
Updated:	Aug 03, 2018
Notes:	Graphics standards

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.

<insert graphic of matrix (logo, color, typography, medallion, treatments, graphic, imagery, icons>

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
Print	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

Use approved source files from the asset library Maintain the required clear space at all times Use the correct color version for the background Scale the logo proportionally Use the reversed (white) version on dark backgrounds

Rotate or flip the logo in any direction Change the approved typeface or letterforms Recolor any element without explicit board approval Stretch, compress, or distort the logo Place the logo on busy backgrounds without a contrast buffer Crop, overlay, or obstruct any part of the logo Apply drop shadows, glows, bevels, or other effects Insert images or graphics inside the logo boundary Use a photographed or screenshotted logo in production Recreate the logo from memory or a non-approved source

Color Principles

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.

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.

Classic Palette

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

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

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

Color Roles

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

Preferred Palette

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

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

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

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

Preferred Palette Usage

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

Supplemental Palette

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

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

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

Supplemental Palette Usage

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