INTERFACE MEDIA GROUP STANDARDS & STYLE GUIDE 2015
The Interface Media Group (IMG) Style Guide provides general guidance to staff, individuals and vendors using graphic elements in marketing and promotional efforts. Its’ primary purpose is to promote consistency and conformity in the usage of the IMG brand. Just like a brand, the evolution of branding is somewhat fluid in nature thereby the style guide may be viewed as a living document allowing updates and/or modifications as warranted. Please direct any specific questions concerning the information contained in this document to the IMG Marketing Communications Department.
table of contents 1. main information 1.1 1.2
the brand the purpose
2. logo
2.1 2.2 2.3 2.4 2.5 2.6 2.7
logo typeface logo with typeface symbol bug examples of logo useage examples of incorrect useage
3. typefaces 3.1 primary/display font 4. color palette 4.1 cmyk/rgb/pms/hex 5. icons 5.1 about IMG 5.2 stories 6. print 6.1 stationary 7. web/mobile 7.1 web site 7.2 headers and body text 7.3 mobile 8. film/video 8.1 title and bug usage 9. merchandise 9.1 apparel and accessories 10. social engagement strategy 10.1 social media playbook
the brand
1.1
Brand is a feeling that lies in the mind of the consumer. Brands are the mental and emotional snapshot of people’s gut feeling. Branding is about building long-term value by setting and exceeding customer expectations. The modern view of brands is that they emerge from the interactions of customers, employees, and media not growing from the top down, but from the bottom up in a distributed social network. An effective brand leaves an imprint of not just recognition but also credibility and confidence.
1.2
Interface Media Group (IMG) is a digital agency to our clients and potential clients, an expansion from our full production service brand. Our plan is to design all print, web and video assets; ultimately aiming to tell the distinguished story of IMG and capture the curious minds of our audience who may be looking for a fresh and forward-thinking production company.
the logo
2.1
Our logo reflects our image as a distinct, industry leader. Our shared values are an essential element to our brand unified by our name and corporate symbol. IMG is centered in the outline circle to symbolize leadership. The circles echo our creative force for engaging storytelling that empowers a common commitment of ourselves to our audiences. Our emblem will be a stamp of our vision to serve and nurture enduring value for all future creation.
section 2.2 - logo with logo typeface typeface
2.2
logo with typeface
343.5 pixels 2.3
26 pixels
442 pixels
symbol
2.4
Our symbol is a mark of our corporate culture. It incorporates meaning of equality and diversity of our organization. The circles represent people and the outline circle stands for leader. Stand-alone, our symbol signifies a creative force for effective communication, symbolizing teamwork and dedication to our individual crafts. The ultimate goal of our symbol is to engage a fun and friendly environment as a culture that engages people to feel empowered.
bug
2.5
Our bug helps represent the identity of our brand as a simple insignia. The purpose is to be used to translate on billboards, ads, signage, media and video clearly as a visual aid.
examples acceptable logo useage
2.6
examples of incorrect logo useage
horizontal squashing
vertical squashing
partial uniform cropping
NO dropshadow
2.7
fonts
There are two primary typefaces that will be used for IMG. They are Neutraface and DIN. Neutraface is to be used for all headlines, titles, and display. DIN is to be used for all body copy.
Typeface primary/display font section 4.2 secondary typeface Neutraface Text Bold
NEUTRAFACE ABCDEFGHIJKLMNOPQRSTUVWXYZ a b cd efg h i j k l m n opqrst u v wxy z
Neutraface is a strong modern sans serif font with elegant details. The sharp lines and angles of the type envokes futurism, modernity, and the cutting edge.
typeface primary font DIN Bold
DIN
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
DIN is also a san serif font, but its rounded forms make it easier to read and less jarring for small body copy. The rounded letter forms lead the readers eye across the page and through the content
3.1
color
PMS384
PMS285
CMYK
CMYK
C= M = Y = K=
24% 5% 98% 35%
RGB
R= G = B =
159% 166% 23%
C= M = Y = K=
90% 48% 0% 0%
BLACK
CMYK
RGB
R= G = B =
0% 119% 190%
HEX
HEX
#8E941E
#0077BE
WHITE
C= M = Y = K=
0% 0% 0% 100%
CMYK
RGB
R= G = B =
159% 166% 23%
#231F20
0% 0% 0% 0%
RGB
HEX
C= M = Y = K=
R= G = B =
255% 255% 255%
HEX
#FFFFFF
4.1
icons
There are two primary icons that will be used for IMG. They are ‘about IMG’ and ‘story’. The ‘about IMG’ icons are to be used for all company culture. ‘story’ icons are to be used for projects.
G
about IMG TEAM
AWARDS
PARTNERS
PROJECTS
IMPACT
5.1
Team Building
Award Winning
Strategic Partnerships
Project Management
News
stories
MEDICAL MEDICAL MEDICAL MEDICAL MEDICAL
STREAMING STREAMING STREAMING STREAMING STREAMING
POLITICAL MEDIA POLITICAL POLITICAL POLITICAL POLITICAL
MOBILE MOBILE MOBILE MOBILE MOBILE
INNOV INN
5.2
Example: Children’s National Medical Example: ILS - Providing full script to Example: Political Media - Delivering Example: Online - implementingExample: the latest Example: Example: Example: Example: ExamE Example: Example: Example: Example: Example: Example: Example: Example: Example: Example: Example: Example: Example: Center - Children’s developing innovative tools production with distribution of over 25,000 pieces ofpieces political media to of online and interactive mobile technology Children’s National Medical Centerdeveloping ILS Providing full script to screen production withPolitical Political Media - Delivering over 25,000 pieces of Online - the implementing theand latest online and interacBooze Children’s National National Medical Medical CenterCenterdeveloping developing ILS developing -screen Providing ILS - Providing full-script full toscript screen to production screen production with Political Media - Media Delivering - Delivering over 25,000 25,000 of pieces of Online -Online implementing - implementing the online latest online interacand interacBooze Booze Hamilto AllenB Children’s National Medical CenterILS - Providing full script to with screen production with Political Media -over Delivering over 25,000 pieces Online -latest implementing the latest online and Allen interacinnovative tools and techniques to diagnose, treat launches live and media to TVtostations around the country tive mobile technology help a way innovative tools and tools techniques and techniques totreat diagnose, toand diagnose, treat distribution distribution ofdistribution launches oflive launches viaoflive streaming vialaunches livevia streaming and and political media to media TV stations to TV stations around the around country the around country tivetechnology mobile technology to help technology businesses to helptobusinesses grow. grow. agrow. waygrow. toaimmerse way to imm tha and innovative techniques to diagnose, launches viadistribution streaming and satellite TVpolitical stations around the country during themobile to help businesses grow.. innovative tools and techniques totreat diagnose, treat of viastreaming live streaming andpolitical political media TV stations thetive country tive mobile to businesses help businesses and eliminate in children. satellite broadcast. during thepolitical 2012 political How diddo they and and eliminate and eliminate in children. pain inpain children. satellite satellite broadcast. broadcast. during the during 2012 the political 2012 seasonseasonHow did How they did do they it?they it? do and developing and develop thedab and eliminate pain in children. satellite broadcast. during theseason 2012 political seasonHow did they eliminate pain inpain children. broadcast. 2012 political -seasonHow did do it?it?do it?
E
INNOVATION INNOVATION INNOVATION
ELECTION BROADCAST BROADCAST
INTERACTIVE INTERACTIVE INTERACTIVE
SOCIAL MEDIA MEDIA SOCIAL SOCIAL MEDIA SOCIAL MEDIA
Example: Booze Allen Hamilton Example: Election Coverage - Tackling Example: New interactive functionality Example: Social Media Engagement Example: Example: Example: Example: Example: Example: Example: Example: Example: Newfunctionality interactive functionality that is Successfully finding a way new challenges broadcasting ofnew election is immersive engaging d Hamilton - S.Hamilton T.E.M. Successfully finding Election Coverage - Tackling new- Tackling challenges every Newthat interactive that is to the that is estinteraconline S.T.E.M. andBooze interac-Allen Booze Allen - S.T.E.M. Successfully finding Election Coverage challenges every Newfunctionality interactive functionality thataudience. is New interactive Newfunctionality interactive that is immersive engaging to the audience. aimmerse way to immerse inthemselves the atinhand dayIMG supported separate networks’ broadimmersive engaging to the audience. to the audience. to grow. thetopic topic coverage programming that was seen by broadpgrow. businesses athemselves waythemselves to immersein theattopic at hand dayIMGfour supported four separate networks’ immersive engaging to the audience. immersive engaging immersive engaging to the audience. and and developing best creative approach. of election coverage that was andthe developing the best best creative approach. casting casting of election coverage programming that was hand developing the creative millions of people inprogramming multiple countries seen by millions people in multiple seenofby millions of peoplecountries in multiple countries approach. around the world. around the world (and various languages). around theinworld (and in various languages).
Letterhead - Letter Size (8.5” x 11”)
ADAM HURST ADAM HURSTvice president vice president direct - 202-457-5831 direct - 202-457-5831 mobile - 301-346-0871 mobile - ahurst@interfacemedia.com 301-346-0871 ahurst@interfacemedia.com
1233 20th street nw, washington dc 20036 | t 202.861.0500 | f 202.296.4492 | www.interfacemedia.com
1233 20th Street 1233 Washington, 20th Street DC 20036 Washington, DC 20036 T-202-861-0500 T-202-861-0500 F-202-785-5372 F-202-785-5372 www.interfacemedia.com www.interfacemedia.com
FRONT #10 Envelope (4.125” x 9.5”)
PMS 384C
BACK
PMS 285 C 100% Black
6.1
1233 20th street nw, washington dc 20036
WINDOW ENVELOPE
LETTERHEAD FIRST PAGE
web
Deference. The UI helps users understand and interact with the content, but never competes with it. 7.1
Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Depth. Visual layers and natural motion heighten users’ delight and understanding.
ABOUT US
TE L L IN G YOUR STO RY
Copyright 2013 InterfaceMediaGroup
PORTFOLIO
CONTACT
headers
WHO WE ARE X X
X
storytellers
Individual page headers are to be set in NEUTRAFACE TEXT BOLD, 50PT, #FFF. Between the header and subheader (if present) a space the height of 5 pixels is to be left. 7.2
Finally the completing element on a header is an elegant and delicate white line. If a subheader is present two white lines are placed The lines are placed at the same height as the crossbar of a lower case e. The lines are to be placed 5 pixels from each end of the subhead. If no subhead is present a single line is placed centered below the main head at a distance of 5 pixels.
Body text is to be set in DIN 1451 STD Mittelschrift. All body text should be placed on a transparent white frame set to 20% opacity. The frame will also generate a parralax effect that further blurs the background behind it creating a sense of transparent frosted glass, as if the user is looking through a window into our office. Body text is to be set in DIN 1451 STD Mittelschrift.
mobile
7.2
7.3
video
8.1
16 x 9 HD
bug 16 x 9 HD
bug center cut Standard Definition
merchandise
section 9.1 merchandise
pen
thumb drive
9.1
umbrella polo
digital engagement strategy
The goal of social media in regards to business is to turn happy bystanders into instigators and advocates for the IMG Brand. Our posts aim to depict IMG as an actively engaged thought leader for our industry. Whether you choose to participate in engaging with IMG and our community on social networks or not, our social media team will be actively and continually seeking out individuals at our company for input on topics to post about. If you are interested in learning more about how to become an active social media user, contact social media@interfacemedia.com for further training or information gathering.
social media
IMGinDC 10.1
footer sample
IMGinDC