Symbol Library specifications

Follow these guidelines when creating a new symbol; current as of January 2016.

Each symbol will have 16 variants, grouped as follows:

• Standalone: 9 total; three colors (Black, White, and Slate) for each of these three sizes
  • 32px
  • 24px
  • 16px
• Builder: 6 total; two colors (Black and White) for each of these three sizes
  • 24px
  • 18px
  • 12px
• Mobile: 1 (white, 20px)

###Standalone Symbols ####32px

• a artboard dimensions: 32px x 32px
• b maximum symbol area: 30px x 30px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
  • slate symbol fill: #e6e6e6
• c first shadow: offset 1,1 from symbol; fill: #000000
  • opacity for black symbol: 20%
  • opacity for white, slate symbol: 75%
• d second shadow: offset 2,2 from symbol; fill: #000000
  • opacity for black symbol: 10%
  • opacity for white, slate symbol: 50%

####24px

• a artboard dimensions: 24px x 24px
• b maximum symbol area: 22px x 22px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
  • slate symbol fill: #e6e6e6
• c first shadow: offset 1,1 from symbol; fill: #000000
  • opacity for black symbol: 20%
  • opacity for white, slate symbol: 75%
• d second shadow: offset 2,2 from symbol; fill: #000000
  • opacity for black symbol: 10%
  • opacity for white, slate symbol: 50%

####16px

• a artboard dimensions: 16px x 16px
• b maximum symbol area: 14px x 14px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
  • slate symbol fill: #e6e6e6
• c first shadow: offset 1,1 from symbol; fill: #000000
  • opacity for black symbol: 20%
  • opacity for white, slate symbol: 75%
• d second shadow: offset 2,2 from symbol; fill: #000000
  • opacity for black symbol: 10%
  • opacity for white, slate symbol: 50%

###Builder Symbols ####24px

* **a** artboard dimensions: 24px x 24px * **b** maximum symbol area: 17px x 17px * black symbol fill: #000000 * white symbol fill: #ffffff * **c** top left position (square symbols): 4,3 * **d** centroid x,y: 12.5,11.5

####18px

• a artboard dimensions: 18px x 18px
• b maximum symbol area: 13px x 13px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
• c top left position (square symbols): 3,2
• d centroid x,y: 9.5,8.5

####12px

• a artboard dimensions: 12px x 12px
• b maximum symbol area: 9px x 9px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
• c top left position (square symbols): 2,1
• d centroid x,y: 6.5,5.5

###Mobile Symbol ####20px

• a artboard dimensions: 20px x 20px
• b maximum symbol area: 20px x 20px
• symbol fill: #ffffff
• c top left position (square symbols): 0,0
• d centroid x,y: 10,10