Our Materials

Logos

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.

Symbol

The Material symbol should only be used when you’re unable to use the main logo.

Spacing Rules

When using the Material logo, please abide by these spacing rules to ensure proper legibility.

Material Logo Spacing

For our logo to show its full potential, leave at least one symbol worth of space around it.

Material Symbol Spacing

It's best to have at least a 25% scaled symbol worth of space on all sides of the symbol.

Minimum Size

Preserving legibility in both print and digital formats is crucial.

Material Digital Spacing
Material Print Spacing

Logo Best Practices

Here are a few examples of what we should absolutely avoid when using the logo.

Material Logo Dropshadow

Do not add drop-shadows.

Material Wordmark alone

Do not use the wordmark alone.

Material Logo Stretch

Do not stretch or squeeze the logo.

Material Logo Rotate

Do not rotate the logo.

Material Logo Gradient

Do not add gradient to the logo.

Material Logo Low Contrast

Do not use against low contrast.

Material Logo Stack

Do not stack the logo.

Material Logo Busy Background

Do not use the logo on a busy background.

Material Logo Add To

Do not add to the logo.

Fonts

The primary brand font for Material is Lato from Google Fonts.

Lato Light

Lato Light

Lato Regular

Lato Regular

Lato Bold

Lato Bold

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.

Colors

Here are the primary brand colors of Material.

Material Light Purple
Material Dark Purple
Material Color Palette
Material Color Palette

Buttons

The buttons used on the site create both hierarchy and an action library.

Material Button Diagram
  • 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
GET EARLY ACCESS CHECK IT OUT

Yellow buttons are used to "sign up"

SEE THEMES

Blue buttons are used to express "more info"

DOWNLOAD .ACO PALETTE

Green buttons indicate a downloadable file or making a purchase

LOAD MORE POSTS

Grey buttons are secondary "more information" buttons.

TREP LIFE

Pink outlined buttons are used as tags, primarily in the blog.

Icongraphy

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.

Google Icons
Google Icons

Imagery

To ensure our images represent our brand personality, only use images that capture vibrant and authentic moments.

Imagery Dos and Don'ts

Do show authentic, real-life interactions between people.

Imagery Dos and Don'ts

Do not use cliché images of personal interactions.

Imagery Dos and Don'ts

Do show natural expressions and depth of field.

Imagery Dos and Don'ts

Do not show subjects falsely knocked out of their background.

Imagery Dos and Don'ts

Do include a diversity of people (ethnicities, gender, etc.).

Imagery Dos and Don'ts

Do not show people in unrealistic environments.

Imagery Dos and Don'ts

Do use refracted light and filters in moderation.

Imagery Dos and Don'ts

Do not use overly-filtered/gratuitously enhanced imagery.

Imagery Dos and Don'ts

Do show natural, candid experiences of customers interacting with a device.

Imagery Dos and Don'ts

Do not show imagery using outdated technology, overly-manicured subjects or staged shots.

Imagery Dos and Don'ts

Do get a little weird.

Imagery Dos and Don'ts

Do not use overly sexualized or violent imagery.

Imagery Dos and Don'ts

Do capture real objects and textures while showing the product in a positive light.

Imagery Dos and Don'ts

Do not show people interacting with the product in a negative way.

Imagery Dos and Don'ts

Do maintain legibility with text over images.

Imagery Dos and Don'ts

Do not crowd too much text into one image and create legibility problems when adding text.

Imagery Dos and Don'ts

Do use animals, geography and objects as visual metaphors.

Imagery Dos and Don'ts

Do not show clichéd or poorly-concepted visual metaphors.

Content Introduction

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."

Our Story

Here's a short rundown on Material. If you have specific questions or content requests, feel free to contact Lauren Hill at laurenhill@material.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

Quotes

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 social@material.com.

"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

Headshots

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.

kevinsproles@material.com

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.

kenjackson@material.com

Lauren Hill, Material Brand Manager

Lauren Hill is the leading voice for content and branding at Material. Her experience in film, social media and marketing made her a natural fit to help take charge. She also has a penchant for jellybeans and being a #girlboss — core strengths to being a vibrant innovator for young women everywhere. She is currently pursuing her MBA at The University of Texas at Austin. She holds a BA in Journalism and Public Relations from The University of North Texas.

laurenhill@material.com

Press

We’re blowing up! Check out our latest mentions in the media. For press inquiries, feel free to contact Lauren Hill at laurenhill@material.com.

2016
Austin Way Logo

How Material Is Encouraging Young Entrepreneurs to Get Their Start

September 20, 2016

Fashion and design entrepreneurs rely on Austin-based e-commerce site Material to launch their dreams.

Third Wave Fashion Logo

Fashion Tech Startup: Meet Material

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.

Austin Startups Logo

5 Tips for Building a #BossBabe Brand

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.

Culture Map

The 11 most exciting startups in Austin right now

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...

Estore Coaching

The eCommerce Podcast | Ken Jackson & Lauren Hill from Material.com

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...

Huffington Post

Meet Material: The New Commerce Platform For Millennial Entrepreneurs

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...

Vocabulary Guide

  • A/B test
  • ASAP
  • best-seller/best-selling
  • beta
  • business-to-business (or use B2B)
  • checkin (n.), check-in (adj.), check in (v.)
  • clickthrough (n.), click through (v.)
  • crowdsource, crowdsourcing
  • Dos/dont's
  • Dropshipping
  • e.g.

    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.

  • ebay
  • ebook
  • ecommerce
  • email
  • estore
  • 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
  • Facebook Profile o Capitalize

    (Exception: lowercase when saying "profiles on Facebook.”)

  • Facebook Group o Capitalize

    (Exception: lowercase when saying “groups on Facebook.”)

  • Google
  • handheld (n.), hand-held (adj.)
  • hashtag
  • homepage
  • how-to
  • i.e.

    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
  • internet
  • IT

    Abbreviation for "information technology."

  • mashup (n., adj.), mash up (v.)
  • metadata
  • news feed
  • news release
  • non-essential
  • not-for-profit/nonprofit
  • OK
  • page view/pageviews
  • pay-per-click (or PPC)
  • percent (not %; ex. 100 percent)
  • plugin (n., adj.), plug in (v.)
  • podcast
  • Q&A
  • retweet
  • RSS
  • salesperson, salespeople
  • screen capture
  • screen name
  • screenshot
  • SEO
  • setup (n., adj.), set up (v.)
  • sidebar
  • 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
  • slideshow
  • smartphone
  • startup (n., adj.), start up (v.)
  • touchscreen
  • toward (not towards)
  • Twitter/tweet
  • up-and-coming
  • URL
  • U.S.
  • USA
  • username
  • voicemail
  • webinar
  • website
  • whitepaper
  • word-of-mouth
  • YouTube

Grammar Guide

Commas

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.

Dates

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.

Ellipsis

Never put a space following only three periods.

  • Correct: "Kale is so…whatever."
  • Incorrect: "Kale is so..whatever." "Kale is so... whatever."

Post Titles

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

Italics

Applicable for book titles, album titles, movie titles, TV show names, series titles, blog names, publication titles.

Quotations

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.

Lists

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.

Dashes

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.

Parenthesis

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.

Spaces

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.

Time

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.

Contact

For press inquiries or other questions, please contact Lauren Hill at laurenhill@material.com.

Questions?

If you have any questions about the styleguide, or need something you don’t see here, please email our design department.

social@material.com

Let's do this thing.

GET GOING