Monthly Parenting Magazine

Style Guide

MAMA Web Style Guide

Version 1 – Created by Fabio Bernardi for Absolutely-MAMA – WIP

Primary Colour Palette



Secondary Colour Palette


Light Pink




Light Grey


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


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

Screen Shot 2016-04-25 at 10.58.55

A couple of quote example are in this article


To add the credits, select this icon Screen Shot 2016-04-25 at 11.11.10 into Visual composer and then inside the Title field add name/text, don’t change the other fields. For more info check this article

Intro and subtitle

Image sizes


2340 × 1502 px


App Icons

Download_on_the_App_Store    amazon-app-450x450    google-play-badge    Sainsbury_channel-icon

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

<p style=”text-align: center;”><a href=”″ target=”_blank” rel=”attachment wp-att-957″><img class=”wp-image-957 alignnone” src=”×89.png” alt=”Download_on_the_App_Store” width=”150″ height=”45″ />    amazon-app-450x450    google-play-badge    Sainsbury_channel-icon


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>