Style Guide
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Table of Contents
Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Mission and Key Differentiators . . . . . . . . . . . . . . 5 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 VOICE OVERVIEW Voice and Personality . . . . . . . . . . . . . . . . . . . . . 13 Voice Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 VISUAL OVERVIEW Logo Lockups . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Logo Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . 23 Typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Typeface Guidelines . . . . . . . . . . . . . . . . . . . . . . 27 Color Palettes . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Common Color Pairings . . . . . . . . . . . . . . . . . . . 33 Visual Recommendations . . . . . . . . . . . . . . . . . . 35 Visual Recommendation Samples . . . . . . . . . . . . 37
1
“A long time ago, in a galaxy far, far away...” 2
INTRODUCTION
Take a walk down memory lane. 80sTees.com is the product of an ordinary guy with an extraordinary 80s obsession. When Kevin Stecko started selling shirts on eBay from his parents’ dining room, he never imagined it would become one of the most sought-after stores for pop culture gear. Over the years, he’s brought together some of the most diehard 80s fans he knows to share their epic fandom and build a community. This book is intended to summarize the awesomeness of our company and give us a blueprint for how our brand should look, sound, and feel. Refer to this guide when you’re designing a new shirt, making changes to the website, writing a product description, creating an ad, or even just talking to someone about our business. Behold the 80sTees.com Style Guide. May the force be with you! 3
POSITIONING
Go back in time. 80sTees.com offers 80s t-shirts and memorabilia that help connect people with other members of their pop culture tribe. Unlike our competitors and peers, we have the easiest, most fun shopping experience specifically for children of the 80s. 80sTees.com isn’t pretentious or hipster. We’re just regular guys and gals who created a nostalgic haven for other people just like us.
4
MISSION AND KEY DIFFERENTIATORS
This is about way more than t-shirts. Our mission is to delight and amaze shoppers. We acknowledge that our stellar customer service, while necessary, is not a deciding factor for most consumers on where they shop. We’ll achieve our mission by offering uncommonly fun and unique products via an entertaining and inherently social shopping experience. 80sTees.com is different from other online t-shirt stores because we offer:
Nostalgia
Connection
We take you for a trip down memory lane. You’ll get to relive everything that was awesome from your childhood and take a piece of that nostalgia home with you.
We don’t just sell shirts. We’re dorky, diehard 80s fans who help you connect with other people just like you.
Fun You’ll have a blast! Hanging out on our site will make you forget about real life for a moment and bring out your inner kidult.
Accuracy Your order will be perfect the first time, every time. If there’s ever a problem, we’ll always do the right thing to resolve the issue.
5
“More than meets the eye.” 6
PURPOSE
80sTees.com exists to help people connect with other members of their pop culture tribe. This is why we’re in business. It’s the difference we’re trying to make in the world and what drives us every day.
7
Know thyself. Our values are the attitudes and beliefs at the core of our company. They embody what’s truly important to us and should be reflected in all of our decisions and actions.
8
VALUES
Delight the kidult.
Keep it simple.
80sTees.com values fun.
80sTees.com values simplicity.
Our customers don’t take themselves too seriously, and neither do we. Our apparel is all about having fun, so the buying experience should be effortless and enjoyable too.
Our team makes the shopping experience enjoyable by focusing on a specific audience, keeping the business lean, and making each process as effortless as possible.
Be yourself, and own it.
Get it right the first time, every time.
80sTees.com values individualism. For our team, this means being accountable for our actions and taking ownership of our ideas. For our customers, this means having the freedom to be yourself and do what you think is cool, instead of what others think is cool.
Connect with your tribe. 80sTees.com values community. We’re loyal to our business and our fans, and we love being the link that helps people connect with others like them.
80sTees.com values accuracy. It’s all about the little details. Our customers know they can count on us for a perfect order because we make consistency and quality a priority.
Do the right thing. 80sTees.com values fairness. All of our policies and practices focus on being respectful and reasonable to our customers and our team. We put ourselves in our customer’s shoes and treat them as a person, not a number. 9
It’s all about personality. These traits represent our core characteristics and style of doing business. Use them as inspiration and guidance for branding, site design, marketing, and more.
10
STYLE
Nerdy, not trendy Think cheesy, geeky, and corny.
Playful, not boring Think humorous, innocent, and youthful.
Retro, not vintage Think nostalgic, sentimental, and taking a trip down memory lane.
Silly, not serious Think funny, quirky, and comical.
Tribal, not detached Think connected, familiar, and kindred. 11
“Oh, he’s very popular, Ed. The sportos, the motorheads, geeks, sluts, bloods, wasteoids, dweebies, d*ckheads— they all adore him. They think he’s a righteous dude.” 12
VOICE AND PERSONALITY
The 80sTees.com voice and personality is inspired by Ferris Bueller, Jimmy Kimmel, and Woot.com. Their voice is: • • • • •
Fun, not boring Conversational, not formal Nerdy, not cool Innocent, not sophisticated Lovable, not elitist
• • • • •
Simple, not complex Funny sarcastic, not harsh sarcastic Masculine, not feminine Witty, not dry Community-oriented, not self-promoting 13
Time to show off. 80sTees.com will show off their voice and personality throughout the site, but these four places should receive special attention: • Home page promos • Sub-category landing pages • Individual product descriptions • Microcopy
14
VOICE SAMPLES
Sweep the leg These Karate Kid shirts take no mercy. Grab your gear
Home page promos The home page should feature a quote from one of the most popular categories on the site. This will help grab the reader’s attention, take them back in time, and put them in the right frame of mind for browsing the site. Follow the quote with a catchy subhead that also refers to the movie, show, cartoon, etc., and make the button text creative (see “Microcopy” section).
EXAMPLE Headline: “Sweep the leg” Subhead: These Karate Kid shirts take no mercy. Button text: Grab your gear
15
VOICE SAMPLES
Sub-category landing pages Each of the top 20-30 most popular movies and shows will have its own landing page (perhaps with videos, photos, quotes, and more in the future). Use the name of the section with the standard “Shop for gear” call-to-action headline, like “Shop for gear from The Princess Bride”. Then, include a short trivia fact about your page theme as a subhead. Use trivia related to the show or movie that true fans will be surprised or delighted by. Make it feel personal and friendly (like you’re talking with a buddy). This will show people that we are a community of fans, not just another retail website who could care less.
EXAMPLE Did you know: Chris Sarandon, who played Prince Humperdinck, was also the voice of Jack Skellington in The Nightmare Before Christmas. Guess he’s just an all around creepy guy!
16
VOICE SAMPLES
Microcopy Since diehard fans notice even the smallest details, make all microcopy on the site interesting and in-character. Every button and piece of copy—no matter how small—is an opportunity to showcase the 80sTees.com personality. Microcopy should never have standard or expected language, like “Submit” or “Buy now.” It should have the same creativity that the longer product descriptions have and feel fun to read and click.
EXAMPLE Search box: Instead of “Search,” use “Whatcha lookin’ for, dude?” Navigation header: Instead of “Shop by,” use “Awesome ways to shop.” Out of stock message: Instead of “Pac-Man shirts are out of stock,” use “No worries, look at our other Pac-Man shirts!”
17
VOICE SAMPLES The image below shows an example of a long description.
18
VOICE SAMPLES
Individual product descriptions Take product descriptions beyond just the technical details. Make each one a witty, personality-filled story that transports the reader and makes them “geek out” about that show or movie. Product descriptions can be written in either a long or short format, depending on your available time and the amount of information you’d like to share. Long descriptions should be 4-6 sentences, with an intro, body, and conclusion. Short descriptions should be 2-3 sentences that still tell a story without a full narrative. Regardless of length, each description should: •
Be written from the point of view of an 80sTees.com employee, who is recounting their favorite memories of the topic and telling another fan what they love about this product
•
Use simple and straightforward words that the Average Joe can relate to
•
Contain quotes or reference, nerdy humor and sarcasm, and action-oriented language
•
Incorporate important search keywords but feel like it’s written for humans, not robots
•
Make the reader feel pulled into the 80sTees.com world and compelled to buy the product
LONG DESCRIPTION SAMPLE The championship tournament is on, and it’s time for you to suit up! This All Valley Karate Championship t-shirt will make you feel as badass as Johnny himself. Just slip it on, and get ready to sweep the leg. On dull days around the 80s Tees office, we’ve been known to don our Cobra Kai shirts and work on our moves. No one wants to be on the other end of a swift crane kick, but luckily, we have our own mini Miyagi to heal you up with a spit spit handclap just in case anyone shows no mercy. Pick up this shirt, and you’ll never be the one in a body bag.
SHORT DESCRIPTION SAMPLE This All-Valley Karate Championship t-shirt will make you feel as badass as Johnny himself. Just slip it on, and get ready to sweep the leg. When you have this shirt on and Miyagi by your side, you’ll never be the one in a body bag.
19
“I say. You do. No questions.” 20
LOGO LOCKUPS
Primary logo with .com
Primary logo without .com
Primary logo with tagline and .com
Primary logo with tagline and without .com 21
Follow these golden rules. Whenever you’re using the 80sTees.com logo, make sure you follow these guidelines: • Provide plenty of space around the logo. • Make sure the logo contrasts against its background.
22
LOGO GUIDELINES
Don’t place the logo over a busy pattern. It’s overload—like wearing sparkly jellies over tie-dyed socks.
Don’t place the logo on a low-contrast background color. Make it pop like Pop Rocks.
Don’t rotate the logo. This isn’t spin the bottle.
Don’t squish the logo. The only thing that should be squeezed are your cheeks when Grandma Millie comes to visit.
Don’t change the colors of the logo. Would Pac-Man ever ditch his signature color? I think not.
23
“Nobody puts baby in the corner.” 24
TYPEFACES
The hero Got something big to say? Use this typeface for headlines and hero areas.
The sidekick Want to reinforce the brand’s personality and balance it with a bit of quirkiness? Use this typeface for subheads.
FUTURA BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
BRIX SLAB FAMILY ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
The narrator
Ready to tell your story and connect with your fans? Use this typeface for body copy.
HELVETICA NEUE ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 25
26
TYPEFACE GUIDELINES
Putting it all together
1
Use Futura Bold for the hero area and other strong statements, such a headlines. 1
Use the Brix Slab family in areas that support, such as secondary headlines and subheads. 2
Use Helvetica Neue as a body font to narrate the rest of the scene.
2
3
In order to keep things fun and friendly, leave plenty of white space surrounding the type, and make it a readable size.
3
The force is strong with this one. Celebrate your geekery by rocking your favorite pop culture gear and 80s memorabilia. Fly over to 80sTees.com to get geeked out and decked out.
27
“Looks great! Little full, lots of sap!” 28
COLOR PALETTES
n Primary color n Secondary color
The 80sTees.com color palette is made up of four primary colors and eight secondary colors. Use the primary colors the majority of the time, and infuse the secondary colors in small doses to support a holiday theme or break up an abundance of primary colors. 29
PRIMARY COLORS
HOT PINK C0 M100 Y0 K0 #EC008C PMS 226
YELLOW C0 M5 Y100 K0 #FFE600 PMS 109
30
LIGHT TEAL C80 M0 Y30 K0 #00B6BE PMS 7466
PLUM C45 M100 Y0 K0 #9A258F PMS 253
SECONDARY COLORS
LIGHT PINK
LIGHT PLUM
ROYAL
COBALT
C0 M40 Y0 K0 #F6ADCD PMS 230
C11 M70 Y0 K0 #D96FAB PMS 238
C100 M90 Y10 K0 #25408F PMS 2748
C100 M40 Y0 K0 #007DC5 PMS 300
DEEP TEAL
GRASS GREEN
LIME
TANGERINE
C90 M40 Y45 K0 #00TF8A PMS 322
C75 M0 Y100 K0 #39B54A PMS 361
C40 M0 Y100 K0 #A6CE39 PMS 382
C0 M40 Y100 K0 #FAA61A PMS 1375
Use secondary colors in smaller support roles, such as promos, holiday areas, or online ads.
31
“Would you say I have a plethora?” 32
COMMON COLOR PAIRINGS
33
Consistency is key. Branding is about creating a consistent experience for the customer. Every design doesn’t have to look exactly the same, but it should feel the same.
34
VISUAL RECOMMENDATIONS
Make the product the hero. We’re selling nostalgia through t-shirts and memorabilia. They should take center stage.
Use clipped image styles for major imagery. The clean and modern style of clipped images complement the retroness of the 80s. To make it feel more fluid and flexible, let the clipped image break the image frame in heros, home page rotators, and other areas where it makes sense. (See home page rotator as an example.)
Make everything simple and fun. Repeat after me: Clean, crisp shapes and layouts. Plenty of white space. Stick to the grid.
Don’t be afraid of bold colors and shapes. They show users what’s most important on the page.
For that extra pop, look to the 80s for inspiration. The 80sTees.com visuals should walk the fine line between modern and retro. Think of it as a fresh version of the 80s. When you need that occasional extra punch, look for 80s-inspired shapes, patterns, or themes (such as Polaroid-style image frames).
35
The 80sTees.com grid structure
The 80sTees.com site design is based on a grid that accommodates 1 to 6 columns. 36
VISUAL RECOMMENDATION SAMPLES
Although we have several configuration options, the 4-column layout is used throughout the majority of the site. You can see an example of it on the home page. 37
Although we use the 4-column grid on most pages, we use a three-column layout on the product page, using the third column to house product information. The rest of the product page flows back into the standard 4-column grid. 38
VISUAL RECOMMENDATION SAMPLES
Sweep the leg These Karate Kid shirts take no mercy. Grab your gear
39
THE END
“And now you know... and knowing is half the battle.” 40