Hey, good lookin'
Material is a sharp and vibrant brand built to empower today's most innovative and passion-fueled entrepreneurs. Below are our brand guidelines, designed to ensure maximum effectiveness and consistency.DOWNLOAD ALL ASSETS
- loyalty Logos
- font_download Fonts
- format_paint Colors
- face IconographyIcons
- image Imagery
- mic Voice, Tone & ContentVoice
- business Our Story
- chat Press
- translate Vocabulary GuideVocabulary
- edit Grammar GuideGrammar
Below are the guidelines and parameters for the Material logo and symbol. In keeping with our brand personality, our logo is simple and sharp. These guidelines are put in place to ensure consistent legibility and recognition.
The Material symbol should only be used when you’re unable to use the main logo.
When using the Material logo, please abide by these spacing rules to ensure proper legibility.
For our logo to show its full potential, leave at least one symbol worth of space around it.
It's best to have at least a 25% scaled symbol worth of space on all sides of the symbol.
Preserving legibility in both print and digital formats is crucial.
Logo Best Practices
Here are a few examples of what we should absolutely avoid when using the logo.
The primary brand font for Material is Lato from Google Fonts.
Headlines, Subheads & more
Here are the headlines, subheads and paragraphs in their proper hierarchy.
Create your free online store.
Lato Light 60px is the size and weight of our headlines or <h1>'s.
You've got the goods. We've got the tech.
Lato Light 40px is the size and weight of our section headers or <h2>'s.
Material is a simple and intuitive commerce platform that lets you get your online store started without paying a dime. Whether you're selling handmade goods or physical products of any kind, we've got your back.
Lato Regular | Font Size:18px | Line-Height:28px is the size and weight of our body paragraphs or <p>'s.
Here are the primary brand colors of Material.
The buttons used on the site create both hierarchy and an action library.
- Standard buttons are 45px tall and rounded
- Button text is all caps 15px with 20pt letter-spacing
- 30px right and left button padding
- 15px top and bottom button padding
- Button text should never be two lines
- Button should be completely pill-shaped as it scales
Blue buttons are used to express "more info"
Green buttons indicate a downloadable file or making a purchase
Grey buttons are secondary "more information" buttons.
Pink outlined buttons are used as tags, primarily in the blog.
The icons used an Material are chosen to create clear symbolic communication. Below are a sampling of the icons used in the product and a link to the entire collection.
To ensure our images represent our brand personality, only use images that capture vibrant and authentic moments.
Do show authentic, real-life interactions between people.
Do not use cliché images of personal interactions.
Do show natural expressions and depth of field.
Do not show subjects falsely knocked out of their background.
Do include a diversity of people (ethnicities, gender, etc.).
Do not show people in unrealistic environments.
Do use refracted light and filters in moderation.
Do not use overly-filtered/gratuitously enhanced imagery.
Do show natural, candid experiences of customers interacting with a device.
Do not show imagery using outdated technology, overly-manicured subjects or staged shots.
Do get a little weird.
Do not use overly sexualized or violent imagery.
Do capture real objects and textures while showing the product in a positive light.
Do not show people interacting with the product in a negative way.
Do maintain legibility with text over images.
Do not crowd too much text into one image and create legibility problems when adding text.
Do use animals, geography and objects as visual metaphors.
Do not show clichéd or poorly-concepted visual metaphors.
Material has three primary goals for every piece of content we publish:
- Be informative. Material aims to be a go-to resource for budding entrepreneurs everywhere.
- Be intriguing. It’s not all about us. We want to create content that interests and motivates others.
- Be innovative. We aren’t the status quo, and we don’t want to sound like the status quo.
Material’s content is crafted based on AP Style guidelines, but this document details more rules that are specific to us and the content on the site. The importance of sticking to the same style boosts a brand’s integrity. Consistency is key!
Voice, Tone and Content
Voice: What Should We Write?
Material is an easily accessible brand. There’s no need for formal language; we’re aiming for a more conversational tone. This means that slang, clever quips and other less conventional writing tactics are encouraged in brand content. We’re a lifestyle brand, not a corporate business.
Here are some additional ways we want our voice to sound:
- Fun but not goofy
- Bright but not showy
- Informal but not sloppy
- Quirky but not disingenuous
- Clever but not deprecating
- Youthful but not trying too hard
Tone: How Should We Sound?
Material usually has an informal tone, but it’s important to be clear and concise before being entertaining. Here are some things to keep in mind when trying to decide the tone for content.
Here are some additional ways we want our voice to sound:
- We want to be playful-yet-informative with our language, and we want authors to be humorous when it comes naturally. But it’s important to take into consideration the context of the content.
- Never force humor or wit. We’re a lighthearted brand, but we don’t want to come across as insincere or trying too hard. Not everything has to be funny!
- We’re looking to create customer engagement by writing content people want to read. Audience interest comes first, personal promotion comes second (if at all).
Content Best Practices
Content should be as concise as possible. Some pieces call for lengthy content, but for most posts it’s best to keep things short.
Here are some additional tips to keep in mind when writing:
- Use contractions whenever possible. This keeps the brand voice informal.
- Focus on the who, what, when and where, and be sure to have a clear CTA.
- Break up bulky paragraphs with bullet points. (Like these!)
- Avoid "orphan" text: single words that sit alone on a line when published. Keep orphan text out of both headlines and body content.
- Look for graphics opportunities: places where you can include buttons, slideshows, videos, banners and more to help make content more digestible.
- Link to other relevant pages on Material.
- When referring to customer website design, use the term "design" or "theme" rather than "template."
Here's a short rundown on Material. If you have specific questions or content requests, feel free to contact Lauren Hill at email@example.com.Copy to Clipboard
Material is an ecommerce platform for anyone looking for a fast and easy way to sell online. We want to give aspiring entrepreneurs, small business owners and everyone in between the opportunity to sell their goods, without the upfront cost. In true startup fashion, our founder Kevin Sproles created his first software company in 1999 at the age of 16. Material is a continuation of his mission to build an ecommerce platform with the most modern technology stack that is focused on the needs of budding entrepreneurs.DOWNLOAD .RTF ABOUT US
We have a lot to say here at Material! Check out a few sound bites from our crew below. For a direct quote, you can reach out at firstname.lastname@example.org.
"The core tenets of Material focus on a fresh, simple and intuitive ecommerce product that grows with the needs of its customers. Material sellers can create and develop their own brand, via vibrant storefronts, simple design and seamless checkout experiences."
Kevin Sproles, Founder & CEO
"Material's leading feature is its ecommerce strength, whereas most free site builders currently have it as an option, or add-on product. It has a more powerful infrastructure because its all cloud-based, which means it's faster and more reliable."
Ken Jackson, VP of Product Development
"Material epitomizes the future of commerce. It is a free, content-inspired experience, by and for engaging consumers that is simply and truly fun. When Material customers are successful, Material is successful."
Lauren Hill, Brand Manager
Below are headshots and descriptions of key members of the Material fam.
Kevin Sproles, Founder & CEO
In true startup fashion, Kevin Sproles founded his first software company in 1999 at the age of 16 (at a desk underneath a Corvette poster, to boot). Material is a continuation of his mission to build an ecommerce platform with the most modern technology stack that is focused on the needs of budding entrepreneurs. When not forging new paths in the world of ecommerce, Kevin remains the car enthusiast that he was in 1999, and can now be caught cruising around ATX in a hot rod — with his future tech-savvy 2-year-old daughter riding shotgun.
Ken Jackson, VP of Product Development
Ken is an entrepreneur at heart, with a history of expertise in information technology, software development, Internet marketing and management. He has a passion for bringing new ideas to life, making user experiences seamless and building high performance teams via a thriving culture. He loves working with outstanding people who are equally passionate about making leading products. Ken holds a BS in Electronics Engineering Technology from Texas A&M University.
September 20, 2016
Fashion and design entrepreneurs rely on Austin-based e-commerce site Material to launch their dreams.
June 17, 2016
This Austin based fashion tech startup has created a free online commerce platform that helps fashion brands and retailers create online stores. We asked Lauren Hill, MATERIAL’s brand manager, to tell us more.
June 13, 2016
I’m pretty sure that to be a legit millennial, you’re not supposed to work in the field you got a degree in. Half the coders I know were English majors, and I’ve met surprisingly few business managers with actual business degrees. Or maybe I just have a strong case of bias effect: I graduated with a degree in journalism, but wound up becoming the brand manager for Material, one of Austin’s newest ecommerce startups.
April 4, 2016
Material is an ecommerce platform started by Kevin Sproles where entrepreneurs can sell things without pesky transaction fees. Users are given the option to customize free websites, allowing consumers to engage with unique online stores and make purchases with ease...
March 22, 2016
Material is a truly free Ecommerce platform coming out to the market, no transaction costs, monthly hosting fees. or plans. Out of the box, all themes comes fully responsive and has a market place for additional add-ons. This Ecommerce platform is built to provide you a great way to quickly build your website with a real-time editor...
March 17, 2016
When high school student Kevin Sproles set out to create an e-commerce platform to help businesses sell goods online, anything was possible. He didn’t yet have a brand, clients or expectations; he just had a goal. Unencumbered, Kevin proceeded to launch Volusion in 1999, an e-commerce platform that today powers over 40,000 stores and employs more than 450 people...
- A/B test
- business-to-business (or use B2B)
- checkin (n.), check-in (adj.), check in (v.)
- clickthrough (n.), click through (v.)
- crowdsource, crowdsourcing
Abbreviation meaning "for example.” Note the periods. Don't include a space after the first period. This is OK to use when space is a consideration; otherwise, use "for example," "for instance" or "such as." If used, always include a comma after the last period. See also “i.e." as each of these has different meanings and are not interchangeable.
- everyday/every day
These two are commonly mixed up. Everyday is an adjective used to describe things that (1) occur every day, or (2) are ordinary or commonplace. In the two-word phrase every day, the adjective every modifies the noun day, and the phrase usually functions adverbially. For example, every day you eat breakfast. You brush your teeth every day. Maybe you go for a walk every day. These are everyday activities.
- Facebook Profile o Capitalize
(Exception: lowercase when saying "profiles on Facebook.”)
- Facebook Group o Capitalize
(Exception: lowercase when saying “groups on Facebook.”)
- handheld (n.), hand-held (adj.)
Abbreviation meaning "that is." Note the periods. Don't include a space after the first period. This is OK to use when space is a consideration; otherwise use "that is," "in other words" or some equivalent. If used, include a comma after the last period. (Note that "i.e.” and "e.g.” do not have the same meaning.)
- Inbound marketing
Abbreviation for "information technology."
- mashup (n., adj.), mash up (v.)
- news feed
- news release
- page view/pageviews
- pay-per-click (or PPC)
- percent (not %; ex. 100 percent)
- plugin (n., adj.), plug in (v.)
- salesperson, salespeople
- screen capture
- screen name
- setup (n., adj.), set up (v.)
- sign-in (n., adj.), sign in, sign in to (v.)
- sign-out (n., adj.), sign out, sign out of (v.)
- sign-up (n., adj.), sign up, sign up to (v.)
- site map
- startup (n., adj.), start up (v.)
- toward (not towards)
Use sparingly; try to break content up into separate sentences as often as possible. Use the AP Style comma — no comma between the second-to-last item and the and/or before the last item.
- Correct: They sell gummy bears, cookies and Sriracha.
- Incorrect: They sell gummy bears cookies and Sriracha.
Never put "st" "nd" or "th" following a numerical value.
- Month + day = December 29
- Month + year = December 2009
- Month + day + year = Dec. 29 2009
- Jan. Feb. March April May June July Aug. Sept. Oct. Nov. Dec.
Never put a space following only three periods.
- Correct: "Kale is so…whatever."
- Incorrect: "Kale is so..whatever." "Kale is so... whatever."
Always use the title case. Keep titles simple: getting too creative can lose the meaning.
- Correct: 15 Ways to Sell More
- Incorrect: 15 Ways To Sell More, 15 ways to sell more
Applicable for book titles, album titles, movie titles, TV show names, series titles, blog names, publication titles.
Use only single quote marks around either a quote or movie/TV show/book/etc. titles. When ending a sentence with a quotation, include the punctuation inside the quotation marks.
- Correct: Here are 5 sales lessons managers can learn from 'The Office.'
- Incorrect: Here are 5 sales lessons managers can learn from "The Office". Double quotations go around song titles and article headlines.
- Correct: The song "Achy Breaky Heart" was set to auto play on his homepage.
- Correct: Jessica's article "Sell Everything Ever" snagged record-high pageviews.
Follow each bullet or number with your bolded point and follow each point with a colon. Don't add a period to the end of a point unless it is a complete sentence.
- Correct: • Site design: Don't assault people's eyes with an ugly storefront.
- Correct: 1. Site design: Keep your site design simple and clean.
- Incorrect: 1. Site design Simple and clean.
Use an em dash (—) with a space on either side of the couple. You can type this dash by hitting option + shift + - on your keyboard.
- Correct: We sold a lot of coal last holiday season — about two times more than the year before — and we almost didn't have the resources to keep up with demand.
- Incorrect: I always - and I mean always -- forget to use em dashes.
Keep punctuation inside only if it’s a complete sentence or an outlandish aside.
- Correct: It's the easiest (and most important) way to connect with customers.
- Correct: She listed the item. (It took her an hour because she got distracted by BuzzFeed, but that's besides the point.)
- Correct: She felt so successful that she decided (of course!) to run for president.
Don't do two in a row in between sentences. There needs to be only one. You actually never ever need to do double spaces for anything ever. No indentations, nothing.
If it refers to when a show airs, a contest ends, etc. distinguish if it is Eastern Time (ET) Central Time (CT) Mountain Time (MT) or Pacific Time (PT).
- Correct: 3 PM, 3 AM
- Correct: noon (12 PM) midnight (12 AM)
- Incorrect: 3 p.m. 12 p.m.
If you have any questions about the styleguide, or need something you don’t see here, please email our design email@example.com