StyleGuide

From Droid Reference Library
Revision as of 02:24, 4 August 2018 by Drl-admin (talk | contribs)
Jump to navigation Jump to search
DroidBuildersLogo
Droid Builder's Style Guide
Category: Template:Category Branding
Creators:
Contributors:
Created: Aug 03, 2018
Updated: Aug 03, 2018
Notes: Graphics standards and logo usag


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.

Our Purpose

Promote, the charitable works of its members in providing resources, opportunities, and events to work with community and charity groups through the creation, display, and operation of replica droids

Our Vision

We strive to promote a sense of camaraderie amongst our members and to continue to improve the quality of Star Wars droids for all its members to that of movie grade providing high quality reference standards, and to promote goodwill worldwide through charitable works and volunteerism.

Our Values

DroidBuilders values each member regardless of sex, race, religion, creed, nationality, sexual orientation, age, or physical handicap. We value the passion and attention to detail builders put into their droids and we value the charitable goals set down by Lucasfilm Ltd. by giving what we can back to the community.


Our Brand

Simpler. Faster. Easier. The words we choose. The type we use. The colors, graphics and imagery we communicate with. These are the key building blocks that help tell the DroidBuilder's story and shape people's perception.

Overview

The DroidBuilders 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

Overview

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 profiles to event banners to grant cover pages.

Never recreate, redraw, or modify the logo. Always use approved source files. Contact the Brand Steward if you need a format not available in the asset library.

Primary Logo (Standalone)

The full horizontal DroidBuilders logo is the default mark for the organization.

  • File: All_Droid_Builders_Logo.svg
  • Preferred formats: SVG (all digital), EPS (print)
  • When to use: Corporate communications, advertising, national marketing, website headers, partnership and grant materials


Approved color versions:

  • Full color on white or light backgrounds
  • Reversed (white logo) on dark or photographic backgrounds
  • Single-color (black) for embroidery, engraving, or single-color print

The circular logo is the secondary mark, designed for use alongside other organizations' logos and for compact applications.

  • File: DroidBuilders_Circle_Logo_v2_paths.svg
  • When to use: Social media profile icons, alongside partner 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.

Sector, Region and Zone Logos

Sector logos are approved marks for the 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 as approved)

  • BlackSun Sector
  • Los Angeles Sector
  • MidAtlantic Sector
  • NorthEast Sector
  • San Diego Sector

Logo Usage Matrix

Logo Mark Local / Sector Regional National Corporate
Primary (Standalone) ✓ ✓ ✓
Circular Logo ✓ ✓ ✓ ✓
Sector / Region / Zone Logo ✓
Medallion ✓ ✓ ✓ ✓

Clear Space

Clear space is the protected zone around the logo that must remain free of text, other logos, imagery, and graphic elements.

Rule: The minimum clear space on all sides equals half the height of the logo as rendered. If the logo is 100px tall, keep at least 50px of clear space on all four sides.

Minimum Size

Format Minimum Logo Width Minimum Logo Type
Print 0.75 in 8 pt
Digital (web, screen) 120 px 12 px
Embroidery / Physical 1.0 in N/A (vector art provided)

Favicon and App Icon

For browser tabs, bookmarks, and app icons, use the circular logo (the standalone wordmark is illegible at favicon sizes). Provide a square master at 512x512px and let the platform scale it. Keep the mark centered with a small margin so it isn't cropped by rounded-corner masks.

Co-Branding and Partner Lockups

When the DroidBuilders logo appears alongside a partner's (a hospital, school, convention, or STEM organization):

  • Use the circular logo or the standalone logo, never a sector logo, to represent DroidBuilders
  • Give each logo equal visual weight and equal clear space
  • Separate the logos with a thin divider rule or generous space -- never overlap them
  • Co-branded materials require Brand Steward approval before publication

Logo Do's and Don'ts

Do:

  • 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

Do Not:

  • Rotate, flip, stretch, compress, or distort the logo
  • Change the approved typeface or letterforms
  • Recolor any element without explicit Board approval
  • Place the logo on busy backgrounds without a clear contrast buffer
  • Crop, overlay, or obstruct any part of the logo
  • Apply drop shadows, glows, bevels, or other effects
  • Insert images or graphic elements inside the logo boundary
  • Use a photographed or screenshotted version in production materials
  • Recreate the logo from memory or a non-approved asset

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

This is the standard classic palette and can be applied to all materials.


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

Preferred Palette

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
Pantone 124 
CMYK (5%,41%,100%,0%)
RGB (242, 150, 0)
HEX: #F29600
HSL (37, 100%, 47%)
Pantone 716C 
CMYK (5%,61%,99%,0%)
RGB: (242, 99, 0)
HEX: #F26300
HSL (24, 98%, 48%)
Pantone 2925 
CMYK (77%,32%,0%,0%)
RGB (59, 173, 255)
HEX: #3BADFF
HSL (205,100%, 61%)

Supplemental Palette

Supplemental palette 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.

Supplemental Palette
Pantone 362 
CMYK (49%, 0%,70%,38%)
RGB (81, 158, 47)
HEX #519E2F
HSL (102, 54%,40%)
Pantone 390 
CMYK (4%,0%,100%,26%)
RGB (186, 188, 190)
HEX #B5BD00
HSL (210, 3%, 74%)
Pantone 7619 
CMYK (0%,60%,72%,25%)
RGB (192, 76, 54)
HEX #C04C36
HSL (10, 56%, 48%)
Pantone 228 
CMYK (0%, 91%, 36%, 46%)
RGB (137, 12, 88)
HEX #890C58
HSL (324, 84%, 29%)
Pantone 7664 
CMYK (17%,59%,0%,53%)
RGB (101, 50, 121)
HEX #653279
HSL (207, 100%, 33%)
Pantone 2203 
CMYK (100%,22%,0%,32%)
RGB (0, 135, 174)
HEX #0087AE
HSL (193, 100%, 34%)
Retrieved from "https://drl.droidbuilders.net/index.php?title=StyleGuide&oldid=330"