—
This document outlines a brand guidelines to ensure that all communications materials are brand aligned.
To ensure our branding is aligned across web, social, email and paper communications.
—
—
—
Normalized text is stored in the registry/backbone, not local prototype storage.
Brand Guideline Document v1.0Prepared by Dot Dot Dash Table Of Contents Brand guideline ContactPage 27 PhotographyPage 23 Design ElementsPage 19 TypographyPage 15 Colour PalettePage 10 LogoPage 3 v1.0Prepared by Dot Dot Dash Subrands Brand Icon Primary Logo 1 v1.0Prepared by Dot Dot Dash The Logo v1.0Prepared by Dot Dot Dash Primary Logo v1.0Prepared by Dot Dot Dash x x x xx Primary Logo Clear Space There should be clear space around any placement of the logo equal to the height of the letter ‘o’ in the logo. v1.0Prepared by Dot Dot Dash Brand Icon The brand icon comes in two states: standard and smile. The smile icon can be used as part of an animation or purposefully in a design that is trying to reflect a more human tone. It should never in professional instances. StandardSmile v1.0Prepared by Dot Dot Dash Brand Icon Clear Space There should be clear space around any placement of the icon equal to the height of the letter ‘o’ in the icon. x x x x x v1.0Prepared by Dot Dot Dash Subrand Logos Sub brands of Madiro have unique logos and colours. CurrentFuture v1.0Prepared by Dot Dot Dash Brand Icon Clear Space There should be clear space around any placement of the logo equal to the height of the letter ‘o’ in the madiro logo. x x xx x Subtend Logo Colour Brand Icon Colour Primary Logo Colour Palette 2 v1.0Prepared by Dot Dot Dash Colour v1.0Prepared by Dot Dot Dash Colour Palette Primary Hex #FAF6EF Off White Hex #070707 Black Hex #BAA898 Beige Hex #EBA95E Yellow Hex #5F6D6A Green Hex #172F4D Dark Blue Hex #224570 Madiro Blue SecondaryNeutral v1.0Prepared by Dot Dot Dash Primary Logo Colours The primary logo should only be used in madiro blue, black, off- white and white colours. v1.0Prepared by Dot Dot Dash Brand Icon Colours The brand icons should only be used in madiro blue, green, yellow, off-white and beige colours. Standard Smile v1.0Prepared by Dot Dot Dash Subrand Logos Colour Each sub brand logo should only be used in it’s unique colour, black, off-white and white. Use Of Type SecondaryTypeface Primary Typeface 3 v1.0Prepared by Dot Dot Dash Typography v1.0Prepared by Dot Dot Dash Primary Typeface: Lora Lora is a well-balanced contemporary serif with roots in calligraphy. It is a text typeface with moderate contrast well suited for body text. Aa 1234567890 abcdefghijklmno pqrstuvwxyz ABCDEFGHIJKLMNOP QRSTUVWXYZ Bold Regular v1.0Prepared by Dot Dot Dash Secondary Typeface: Roboto Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. Aa 1234567890 abcdefghijklmno pqrstuvwxyz ABCDEFGHIJKLMNOP QRSTUVWXYZ Bold Regular Light v1.0Prepared by Dot Dot Dash Use Of Typeface Lora will be used for headings and Roboto for body copy. The pairing of these fonts help create a tone and feel that is approachable and human. h5 - Heading 5 h4 - Heading 4 h3 - Heading 3 h2 - Heading 2 h1 - Heading 1 Paragraph – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. Treatments with photography Treatments with typography Illustration 4 v1.0Prepared by Dot Dot Dash Design Elements v1.0Prepared by Dot Dot Dash Illustration Simple hand drawn illustrative elements can be used throughout the design. These elements should always remain in the brand black colour. They should be used sparingly, making sure to not clutter or complicate any designs. v1.0Prepared by Dot Dot Dash Treatments With Typography Handrawn unlines and circles can be added to text to highlight certain words. The intention of this treatment is to build an approach and human tone and feel. We identify, fund and support initiatives that drive positive health outcomes. v1.0Prepared by Dot Dot Dash Treatments With Photography Handrawn lines, arrows and circles can be added to text to highlight certain parts of images. The intention of this treatment is to build an approach and human tone and feel. Overlay Treatment Tone & Feel 5 v1.0Prepared by Dot Dot Dash Photography v1.0Prepared by Dot Dot Dash Photography Tone & Feel Natural Soft Filmic Warm Candid Should be v1.0Prepared by Dot Dot Dash Photography Tone & Feel Dramatic Sharp Digital Cold Posed Should not be v1.0Prepared by Dot Dot Dash Overlay Treatment In situations where text or logos need to be legible on top of images and overlay treatment can be applied. The overlay treatment should only be used in the following brand colours. Colour: Brand Yellow Blend Mode: Multiply Opacity: 60% Colour: Brand Green Blend Mode: Multiply Opacity: 60% Colour: Brand Beige Blend Mode: Multiply Opacity: 60% 151 Yonge Street, Suite 1000 Toronto, ON Canada M5C 2W7 Address hello@madiro.org Email www.madiro.org Web v1.0Prepared by Dot Dot Dash Contact