Prepare Style Guide

[xmatthewx]

Plan for the upcoming heartbeat is set. @sabrinang will provide creative. @kristinashu will drive the structure with an eye toward communicating essentials for contractors.

This draft will include basics (i.e. type, wordmark, issues treatment, background text, background patterns). It will also include a demonstration of application to fest guide cover, stage backdrop.

Driver @edrushka
Accountable @xmatthewx (on PTO)
Responsible @kristinashu @sabrinang
Informed @hannahkane

[kristinashu]

Sabrina has already done a lot of the work here https://docs.google.com/presentation/d/1Wr2XK-ogr-72XnMqdmLU2Rf64S-5ctC23OimMwnsquY/edit#slide=id.g12989256b1_0_726

Still need to:

• Find Pantone equivalents for the colors so printers know what to aim for. @lovegushwa do you have a Pantone book?
• Explore icon style directions (will need the space icons asap)
• update with Matthew's feedback (simplify)
• Make a pdf of everything
• Make high res texture
• Update body copy to Fira

[kristinashu]

Style Guide will include:

• 2016 logo
• 'one web' lockup (2 standard + 2 more unique of motion)
• example of 5 issues in the lockup
• 3-4 patterns
• colors (2-3 core + 2 highlight + few shades of grey) with CMYK/RGB/PANTONE values
• texture art
• typography (display type + body copy type + localized type)
• 1 icon to show style
• example mockups: stage, poster, guide, name card

[kristinashu]

Feedback on tne Web tag with Mark & Chris #123

[sabrinang]

.ai file: https://drive.google.com/file/d/0B4Q8pzCpDS_eemJXWHFBclFwc00/view
This contains tileable patterns, shapes, grid system, colour value documentation

• Mozilla Festival 2016 Logo & One Web Lockups (with 5 strategic area lockups): https://drive.google.com/drive/u/1/folders/0B4Q8pzCpDS_eT09zaVNjMFpveTA
• Colour Swatch (.ase file): https://drive.google.com/drive/u/1/folders/0B4Q8pzCpDS_eRmVUZmlfVUYzT2M
• Fonts: https://drive.google.com/drive/u/1/folders/0B4Q8pzCpDS_eaDNCQjJLcjhxLTg

I will file a separate issue for the art and work in the issue for space icons #88

[sabrinang]

high res art issue: #132

[kristinashu]

@sabrinang can you also add the example mockup for the stage, poster, guide, and name card?

[sabrinang]

example of mockups are in slide deck: https://docs.google.com/presentation/d/1Wr2XK-ogr-72XnMqdmLU2Rf64S-5ctC23OimMwnsquY/edit#slide=id.g16564ebac6_0_119

[kristinashu]

Will need to updated colors based on #139 (comment)

[sabrinang]

https://drive.google.com/file/d/0B4Q8pzCpDS_eemJXWHFBclFwc00/view

• updated pantone/cmyk colour notation from ticket Test and Finalize One Web Theme Colours #139
• updated localized language examples (note: arabic is "one inclusive web" all the other languages are "one web") from ticket Localize 'one web' #124
• updated art with pixel sort examples from ticket One Web Visual Direction - Pixel Sorting Art & Textures #132
• updated with space icons from ticket Design Space Icons #88

[edrushka]

Just want to give a huge shout out to @sabrinang and the design team for completing this awesome, comprehensive, high-quality style guide. Having this in place will help us raise the bar -- yet again -- for MozFest design.

THANK YOU!!!