Front-End Brand Guidelines

Overview

The MEDA website is a dynamic, modern, responsive online resource, powered the WordPress content management system (CMS) and resides on a powerful, scalable, secure cloud VPS at Site Ground.

Elementor is used for front end styling of the site to allow quick and easy edits to site content.

Table of Contents

Colors

MEDA has created a palette of vibrant colours that are both dynamic and accessible to highlight the global programs and initiatives.

Hex: #007A33
RGB: 0/122/51
CMYK: 91/4/100/25
PMS: Pantone 356 C

Hex: #00587C
RGB: 0/88/124
CMYK: 100/18/8/50
PMS: Pantone 308 C

Hex: #D19000
RGB: 209/144/0
CMYK: 20/35/95/0
PMS: Pantone 7550 C

Hex: #CB6015
RGB: 203/96/21
CMYK: 0/53/90/20
PMS: Pantone 159 C

Hex: #653165
RGB: 101/49/101
CMYK: 5/100/5/40
PMS: Pantone 2622 C

Hex: #3A3A3A
RGB: 58/58/58
CMYK: 69/62/51/52
“Dark Grey”

Hex: #939598
RGB: 147/149/152
CMYK: 0/0/0/50
“50% Grey”

Hex: #F3F5F6
RGB: 243/245/246
CMYK: 1/0/0/4
“Light Grey”

Headings

H1

Font-family: Roboto
Font-size: 45px
Font-weight: 300
Line-height: 1.3em

H2

Font-family: Roboto
Font-size:
33px
Font-weight: 300
Line-height: 1.3em

H3

Font-family: Roboto
Font-size:
26px
Font-weight: 300
Line-height: 1.2em

H4

Font-family: Roboto
Font-size:
20px
Font-weight: 500
Line-height: 1.2em

Typography

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Omnia contraria, quos etiam insanos esse vultis. Nam quid possumus facere melius? Duo Reges: constructio interrete.

Font-family: Roboto
Font-size: 18px
Line-height: 27px
Color: #3a3a3a

Strong Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de Platone aut de Democrito loquar? Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L.

Font-family: Roboto
Font-size: 18px
Font-weight: 700
Line-height: 27.2px
Color: #3a3a3a

Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua igitur re ab deo vincitur, si aeternitate non vincitur? Ut scias me intellegere, primum idem esse dico.

Font-family: Roboto
Font-size: 18px
Line-height: 27.2px
Color: #007A33

Heroes

Static Hero Images

For most pages, headers are full-screen hero images with a black gradient in the bottom third to allow for white page titles to be easily legible.

Front-End Brand Guidelines

Home Page Slider

The MEDA homepage features our latest news, campaigns, and events on a full-screen slider. We use diagonal overlays on the left half of the image to allow the white title and subtitle to be clearly legible.

Boxes

Grey Boxed Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Solum praeterea formosum, solum liberum, solum civem, stultost.

Green Boxed Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Solum praeterea formosum, solum liberum, solum civem, stultost.

Green Outline Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Solum praeterea formosum, solum liberum, solum civem, stultost.

Blue Outline Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Solum praeterea formosum, solum liberum, solum civem, stultost.

Full-Width Sections

Standard Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Dici enim nihil potest verius. Occultum facinus esse potuerit, gaudebit;

Wide Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Dici enim nihil potest verius. Occultum facinus esse potuerit, gaudebit;

Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Proclivi currit oratio. Si longus, levis dictata sunt. Duo Reges: constructio interrete. Sed ego in hoc resisto; Itaque contra est, ac dicitis;

Facile pateremur, qui etiam nunc agendi aliquid discendique causa prope contra naturam vígillas suscipere soleamus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Expectoque quid ad id, quod quaerebam, respondeas. Occultum facinus esse potuerit, gaudebit; Rationis enim perfectio est virtus;

Non modo carum sibi quemque, verum etiam vehementer carum esse? Videamus animi partes, quarum est conspectus illustrior; Non dolere, inquam, istud quam vim habeat postea videro; Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae.

Grid

We make use of elementors flexible, responsive column grid for presenting content in a variety of layouts on any number of screen sizes.

50% Width

25% Width

33% Width with margins

Buttons

Our eye-catching and colourful button framework entice users to answer our calls to action. A flexible methodology allows for easy button creation, maintenance, and quick implementation.

Images

In order to present content in a user-friendly, easy-to-read way we suggest considering the following proposed column structures for your page designs.

Naming Conventions

Filenames are a nominal factor in SEO. Filenames should be:

  1. Descriptive of the image (within reason)
  2. Use dashes/hyphens instead of spaces or underscores

Naming Conventions

Images should be kept to well under 500KB. With a few exceptions:

  1. Hero images
  2. Slider images
  3. Images that require user interaction, such as a click to view in a new tab

 

JPEGs should be compressed to 85%.

The image compression plugin on the site is setup to optimize images for the website in most cases. Please double check that images are not slowing down page load times.

Hero Image Resolution

Hero images should be at least 1300x550px in order to display well on screens of all sizes. The safe area illustrated below (in orange) is approximately 800x315px.
Sample Hero Image

Hero Image Resolution

PNG is a lossless image file format that supports transparency.

When to use a PNG

  •  It’s logo, vector, illustration, or infographic
  •  Transparency is needed
  •  Requires fidelity of vector images
MEDA CEO Dorothy Nyambi
PNG Example Image ~ 703KB

JPG/JPEG is a lossy image file format that is suitable for photos and exported designs.

When to use a JPEG

  •  It’s a photo
  •  A cover image of a designed document
MEDA CEO Dorothy Nyambi
JPEG Example Image ~ 74KB