MAMA Web Style Guide

Primary Colour Palette

#F087B6

Secondary Colour Palette

Light Pink
#fac4c6

Grey
#e5e5e5

Light Grey
#f9f9f9

Typography

Header 1

Archer A”, “Archer B” – font-style: normal – font-weight: 500 – font-size: 48px – line-height: 48px

Header 2

“Archer A”, “Archer B” – font-style: normal – font-weight: 300 – font-size: 20px – letter-spacing: 2px – line-height: 22px

Header 3

Archer A”, “Archer B” – font-style: normal – font-weight: 400 – font-size: 22px – line-height: 48px

Header 4

Archer A”, “Archer B” – font-style: normal – font-weight: 700 – font-size: 20px

Header 5

“Archer A”, “Archer B” – font-style: normal – font-weight: 700 – font-size: 17px – line-height: 21px

Blockquote

To add a blockquote,  select the copy and click this icon

A couple of quote example are in this article https://absolutely-mama.co.uk/oh-mother-art-thou/

Credits

To add the credits, select this icon  into Visual composer and then inside the Title field add name/text, don’t change the other fields. For more info check this article https://absolutely-mama.co.uk/ashlyn-gibson/

Intro and subtitle

Image sizes

HERO

2340 × 1502 px

App Icons

Place this code inside the page/post where you want the icons

<p style=”text-align: center;”><a href=”https://itunes.apple.com/us/app/absolutely-mama-magazine-parenting/id1095374381?mt=8″ target=”_blank” rel=”attachment wp-att-957″><img class=”wp-image-957 alignnone” src=”https://absolutely-mama.co.uk/wp-content/uploads/2016/03/Download_on_the_App_Store-300×89.png” alt=”Download_on_the_App_Store” width=”150″ height=”45″ />            

Patterns / Dividers

Use this code

<div class=”pattern-seperator clearfix”></div>

Download the asset here

Use this code

<div class=”pattern-seperator-grey clearfix”></div>

Download the asset here

Use this code

<div class=”dots clearfix”></div>