StyleGuide: Difference between revisions

From Droid Reference Library
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 101: Line 101:


== Color Principles==
== 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 our brand and foster recognition.
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===
===Color===
Line 107: Line 107:


====Classic Palette====
====Classic Palette====
{| class="wikitable"
This is the standard classic palette and can be applied to all materials. 
! style="background-color:#ffffff;" | White
 
  0 / 0 / 0 / 100
 
  255 / 255 / 255
{| class="wikitable" style="margin: left;
  #FFFFFF
|+Classic Palette
! style="background-color:#babcbe; color:#ffffff;" | Cool Gray 6
! style="background-color:#ffffff; text-align: left" | White
  0 / 0 / 0 / 31
  CMYK (0%, 0%,0%,0%)
  186 / 188 / 255
  RGB (255, 255, 255)
  #BABCBE
  HEX #FFFFFF
! style="background-color:#333333; color:#ffffff;" | Process Black
HSL (0, 0%,100%)
  0 / 0 / 0 / 100
! style="background-color:#babcbe; color:#ffffff; text-align: left" | Cool Gray 6
  0 / 0/ 0
  CMYK (2%,1%,0%,25%)
  #000000
  RGB (186, 188, 190)
! style="background-color:#ffc20e;" | Pantone 7408
  HEX #BABCBE
  0 / 25 / 100 / 0
HSL (210, 3%, 74%)
  255 / 194 / 14
! style="background-color:#333333; color:#ffffff; text-align: left" | Process Black
  #FFC20E
  CMYK (0%,0%,0%,100%)
! style="background-color:#005ba8; color:#ffffff;" | Panton 7685
  RGB (0, 0, 0)
  100 / 68 / 0 / 2
  HEX #000000
  0 / 91 / 168
HSL (0, 0%, 0%)
  #005BA8
! style="background-color:#ffc20e; text-align: left" | Pantone 7408
! style="background-color:#003468; color:#ffffff;" | Pantone 648
  CMYK (0%, 24%, 95%, 0%)
  100 / 62 / 0 / 52
  RGB (255, 194, 14)
  0 / 52 / 104
  HEX #FFC20E
  #003468
HSL (45, 100%, 53%)
! style="background-color:#005ba8; color:#ffffff; text-align: left" | Pantone 7685
  CMYK (100%,46%,0%,34%)
  RGB (0, 91, 168)
  HEX #005BA8
HSL (207, 100%, 33%)
! style="background-color:#003468; color:#ffffff; text-align: left" | 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.
 
{| class="wikitable" style="margin: left;
|+Preferred Palette
! style="background-color:#f29600; text-align: left; color:#ffffff;" | Pantone 124
CMYK (5%,41%,100%,0%)
RGB (242, 150, 0)
HEX: #F29600
HSL (37, 100%, 47%)
! style="background-color:#f26300; text-align: left; color:#ffffff;" | Pantone 716C
CMYK (5%,61%,99%,0%)
RGB: (242, 99, 0)
HEX: #F26300
HSL (24, 98%, 48%)
! style="background-color:#3badff; text-align: left; color:#ffffff;" | 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.
 
{| class="wikitable" style="margin: lef;
|+Supplemental Palette
! style="background-color:#519e2f; color:#ffffff; text-align: left" | Pantone 362
CMYK (49%, 0%,70%,38%)
RGB (81, 158, 47)
HEX #519E2F
HSL (102, 54%,40%)
! style="background-color:#b5bd00; color:#ffffff; text-align: left" | Pantone 390
CMYK (4%,0%,100%,26%)
RGB (186, 188, 190)
HEX #B5BD00
HSL (210, 3%, 74%)
! style="background-color:#C04C36; color:#ffffff; text-align: left" | Pantone 7619
CMYK (0%,60%,72%,25%)
RGB (192, 76, 54)
HEX #C04C36
HSL (10, 56%, 48%)
! style="background-color:#890C58; color:#ffffff; text-align: left" | Pantone 228
CMYK (0%, 91%, 36%, 46%)
RGB (137, 12, 88)
HEX #890C58
HSL (324, 84%, 29%)
! style="background-color:#653279; color:#ffffff; text-align: left" | Pantone 7664
CMYK (17%,59%,0%,53%)
RGB (101, 50, 121)
HEX #653279
HSL (207, 100%, 33%)
! style="background-color:#0087AE; color:#ffffff; text-align: left" | Pantone 2203
CMYK (100%,22%,0%,32%)
RGB (0, 135, 174)
HEX #0087AE
HSL (193, 100%, 34%)
|}
|}

Revision as of 18:54, 3 August 2018

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 Principles

The DroidBuilder's logo is a symbol for our club that is highly regarded all over the world. It plays a crucial role in communicating and reinforcing our authenticity and heritage.

All great brands have one thing in common: consistency. Use the tools to make sure you're expressing the DroidBuilder's brand in just the right way.

The primary DroidBuilder's logo should appear on most DroidBuilder's communications.

DroidBuildersLogo

<NEED>

Reversed

<NEED>

Clear Space

<NEED graphic showing space>

Give it space. To preserve the integrity and visual impact of the logo, always maintain adequate space around it. The clear space around the logo is an integral part of the design. It ensures the logo can be seen quickly and is undiluted by other logos, symbols or text.

Space should be equal to half the height of the logo as it is being used.

Minimum Size

The logo should not be used at less than .25" with no less than 15-point logo type.


Logo Don'ts

Unauthorized logo modification comprimise the Droidbuilders brand. Please do not attempt to recreate or alter the logo yourself. Only use provided DroidBuilders logos.

  • Do not rotate the logo
  • Do not alter the name orientation
  • Do not change the approved typeface
  • Do not recolor the logo
  • Do not insert images or graphics into the logo
  • Do not crop logo
  • Do not place logo atop imagery

Sector, Regions, and Zone Logos

Branded locations are the local area clubs where the outreach with the public most occurs. Logos will be added as they are approved.

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

Usage Matrix

Type Location Specific

Marketing

Advertising National

Marketing

Corporate

Marketing

DroidBuildersLogo X X X
Sector/Region/Zone Logo X
Medallion X X X X

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%)