Motivf looks like…
If it’s a business card, a landing page, a t-shirt, or a promotion, Motivf things need to look and feel like Motivf things. This guideline includes logos, colors, assets, and instructions necessary for putting together your very own Motivf-branded materials.
This is primarily for people at Motivf working on Motivf. If you are looking to write about Motivf, email firstname.lastname@example.org.
Logo and Assets
Logo Guidelines (see examples below of acceptable options with reference to the number they refer to)
Don’t add additional shadows, pixelate, change colors, add lighting effects, or change the orientation.
You can use the mark alone, but don’t use the logo type without the mark.
When using a solid color background, always use the white logo type.
When using a background that is white or Light Gray 100 (#EDEFF0), always use the quad-color mark with Very Dark Cobalt Blue (#152030) logo type.
Never blend any background color with any of the four logo colors.
In digital, logos should be left justified at the top of the page or view.
In print, logos should be left justified at the top of the page.
Logo in slack. To match the slack theme, a special brown-background logo was made. Only use this logo in slack.
The image assets can be downloaded here. To access the images, click File > Download as > Web page (.html, zipped). Once downloaded, unzip the folder and you’ll see all of the image assets in the images folder.
Need a color for your UI element, illustration, or t-shirt? Choose from our plentiful color palette!
The main brand colors used in the Motivf logo and branding materials.
Applying Main Brand Colors
There are ten different weights for each hue, 90% white being the lightest and 60% black being the darkest. Generally, you should start with the middle weight, main brand color, and go up or down from there.
There should be enough shades in the palette to use for anything you would want to make for Motivf, from marketing materials to interface chrome, to illustrations, to labels, to backgrounds, to icons, to stickers and hats. Of course, there will be cases where you need to work outside the palette, which is okay. But when you are making a multi-color graphic or image, the kiwi (blue-green), lemon (yellow), lime (green), and orange should be the distinct Motivf brand colors. Here’s a great resource for colors from Per Bang in Denmark.
Very Dark Cobalt Blue (#152030) is the color of the text and guiding lines on Motivf products instead of black.
There are often cases where we have white elements on the page, like comment bubbles, buttons, and form inputs. With a white background, there isn’t enough contrast to distinguish them. In those cases, Light Gray 100 (#EDEFF0) or Very Dark Cobalt Blue (#152030) are used as background colors to help those elements stand out.
Motivf uses Noto for all marketing purposes. Noto Sans and Noto Serif together provide great variations that work great for headlines, body font, and as a display font. Noto also has Chinese (traditional and simplified), Japanese, and Korean font packages. Download or link to Noto via Google Fonts.
Stick to Noto for any brand materials.
Always use white text, #FFFFFF, on a colored background. Preferably use Very Dark Cobalt Blue (#152030) on a white or Light Grey background.
Use proper quotes, accents, ellipsis, and dashes for all copy. Here’s a great guide to smart quotes from Jason Santa Maria. Here’s another on quotes, accents, and dashes from Jessica Hische. Typographically, it’s the right thing to do, plus you’ll look cool and impress all your friends.
Here are some general rules for graphics, particularly surrounding digital campaigns, pitches, and storytelling…
Focus on a single, simple illustration at the center of the image. Don’t illustrate a whole scene and don’t put important things in the background or edges, where they are likely to get cut off or ignored.
You’ll probably end up cutting different images for different purposes in a campaign, pitch, etc… For example, you might have a simplified image for the social post and a more detailed image for the landing page. They should still have the same background and central image in the foreground and generally use the same colors. Ask yourself if it leaves the same visual imprint. Are all aspects of the website, in-person experience, etc.. the same?
Whenever possible, avoid text in images. Let the text of the tweet, blog headline, etc., do the talking and have the image support it. This means we don’t have to translate it, modify it for narrowcasting, and/or quadruple our output. It also allows copy to change. In digital, use floating headlines over images instead of embedding headlines in the image.
Social posts and blog feature images should be kept at a 2:1 landscape aspect ratio. Most social media platforms will cap at that ratio meaning the edges can get cut off. It will save us some vertical space elsewhere. Make sure to carefully place the centroid on images in blog posts and digital sites so that the focus of the image or illustration shows when the graphic is trimmed for the 2:1 ratio.
Graphics in Campaigns, Pitch, or Sites
When initially running a campaign, pitch, or site, we should be visually consistent throughout; including as much as possible consistency with the physical experience of a bricks-and-mortar business or location. Blog graphics should match the social graphics which should match the landing page graphics and email graphics and so on. Later social posts and emails in a campaign might use different graphics—gifs, quotes, or what have you—to highlight certain features. Here are some places we use graphics in campaigns.
Blog Feature Images (2:1 aspect ratio)
Social Media Post Images (2:1 aspect ratio)
Emails (2:1 aspect ratio)
Landing Pages (responsive)
PR Requests or Campaigns (2:! aspect ratio or specific targeted images)
Campaigns, pitches, and sites aren’t the only place we have graphics, of course. Some graphics are only used in a single place at one time and don’t need to adhere to the general rules so strictly. You should still generally draw from the color and design palette for these and all the other branding guidelines. Some examples of one-off graphics…
Social Media Backgrounds
Third-Party Landing Pages (like a webinar or event page)
Guerrilla marketing campaigns
Profile Photos or Icons
Profiles photos and icons help you remember people or groups. They are shown in chat spaces, user profiles, the website, and accounts. Profile Photos are separated with whitespace. Use the primary, 500-weight colors from the palette for colors for any Motivf-derivative icon or duotone of a photo.