Online Identity Guide
Primary Colors
R223 G74 B72
#df4a48R29 G49 B30
#1d311eR193 G216 B192
#c1d8c0Secondary Colors
R255 G190 B152
#ffbe98R246 G238 B221
#f6eeddR251 G246 B238
251,246,238
#FBF6EETypefaces
Dd
Headings & Callout textSelf Modern
StylesAa
Paragraph & Headings
Canva: HK Grotesk Pro
Neue Has
StylesFont use:
There are a few ways you can use font and color to make your text and headlines stand out and convey an important message, or just show the beginning of different sections of text.
Some general directions are:
- use sentence case or all caps with headlines, never use all lowercase;
- main titles should be the biggest, and should be either coral red or seaweed green;
- secondary titles should be smaller and can be any relevant color;
- text can be mixed only in the case of testimonials wherein the main takeaway is Self Modern font.
Logos
Logos & Submarks
Your Milk Story wordmark and submark are the primary expressions of our brand. They can be used interchangeably, but should never be combined together. Whether you’re using the complete logo or just the submark, make sure it’s properly visible. You can achieve this by placing a solid color logo on another solid color background.
- The logo should never take up more than 50% of the width of the page (web, social or print design).
- The submark should never take up more than 25% of the width of the page (web, social or print design).
- The logotype should always be used on images that are being posted across the internet/social media sites and it should be in a safe zone (not cut off but visible and large enough to be able to read the name).
- Always retain logo orientation, and ensure plenty of space to breathe.
- The logo can be placed on solid color backgrounds or on photographs.
- When placing the logo on photographs, make sure that the logo is easily visible - meaning it isn’t placed in the busiest area of the picture but rather an area that is emptier/calmer. If no such area exists, the logo can be placed above a solid color background.
Buttons
Icons & Graphics
Social feed
In order to achieve a light and airy feel, make sure that there’s plenty of blank space on each square post or reel. Bold fonts should be used sparingly and only used to emphasize and bring attention to an important part of the copy (e.g. a quote, an important date, etc.).
Use the darker, more saturated colors for title backgrounds while reserving the more muted and pastel colors for copy backgrounds.
To keep the IG feed looking consistent, follow these guidelines when posting:
- use a combination of real life color photo full squares, and graphic/text based squares;
- don’t use the logo on every square but rather just on every few posts, especially informational posts that might be more likely shared/reposted;
- make sure there’s plenty of white or solid color space around text and illustrations;
use one photo or one illustration per square.
