Style Guide

Table of Contents

Colors Origin

Pantones:

Colors Theme

Main colors:

We can use main color for both on light and dark background.

Call to action Red

#CD001A
This new red color will be on the brighter shade. It's good to use as a quick command for attention. You will see it in the most important action we want the user to do.

Secondary Blue

#007AC8
Red will be too hard most of the time. So, we use the blue as our main action items like button and section background.

Knowledge Green

#00B2A9
We will use this color in a theme of friendly knowledge items. Inviting and useful.

Call to action Red

#CD001A
This new red color will be on the brighter shade. It's good to use as a quick command for attention. You will see it in the most important action we want the user to do.

Secondary Blue

#007AC8
Red will be too hard most of the time. So, we use the blue as our main action items like button and section background.

Knowledge Green

#00B2A9
We will use this color in a theme of friendly knowledge items. Inviting and useful.

Secondary colors:

Secondary colors will work better in dark background except for PANTONE 19-4045 TCX  which will standout on the lighter background

PANTONE 14-4620 TCX

#95DEE4

PANTONE 13-1404

#EFD1C6

PANTONE 14-406 Ether

#A1B8BD

PANTONE 19-4045 TCX

#014A8F

PANTONE 13-0755

#F3CF55

PANTONE 14-4620 TCX

#95DEE4

PANTONE 13-1404

#EFD1C6

PANTONE 14-406 Ether

#A1B8BD

PANTONE 19-4045 TCX

#014A8F

PANTONE 13-0755

#F3CF55

Page Heading with Background color:

It will be used in the half column style 

Equitable Education Hub

On red:

We use it mostly to give the sense of urgency and statistic items.

0%

Budget for OOSCY
(out-of-school children and youth)

On Blue:

It’s the same color style as a primary button. So, it will be proper to highlight important messages.

White Heading in BOLD
White paragraph text on Normal weight and default size at 16px

Half Column with Multi colors:

Important part

Link  text to explain the information  Link

FAQ:

Answer: Please feel free to send articles, news and events and its URL on the contact us page.

Answer: Unfortunately, we only accept organizations; ministries, agencies and NGO’s as an alliance.

Important Number and Stat:

0 Suffix

 Important Number

0 Suffix

 Important Number

Fonts

Font name: Myriad Pro
The default font usage for the readability and hierarchy.   

Heading:

All heading will be in BOLD or 700 weight

Heading 1: 64px

Heading 2: 32px

Heading 3: 21px

Heading 4: 16px

Paragraph: 16px

Paragraph text will be focusing on the simplicity and readability of the text.

We keep the text in Normal weight and default size at 16px

Example text:
Providing learning opportunities to all people, irrespective of sex, age, race, ethnicity, and persons with disabilities, migrants, indigenous peoples, children and youth, especially those in vulnerable situations

Heading with icons

For strong intentions that we want to grab the attention.

Icon colors: #CD001A
Font size: 5rem or 80px
Align: Center

To start the new section header

Icon colors: #CD001A
Font size: 2rem or 32px
Align: Left

Buttons

Main Button

Call to Action

Social media:

Call to Action with Background

Subscribe for Newsletter

Listing and tags

Using virtual reality to help...
Behavioral research has been testing perspective-taking approaches to change individuals’ attitudes and...
EdTech and the global learning...
We call for an evidence-based future for EdTech in low-income...
The Classroom: Face-to-Face vs. Virtual...
Know the characteristics of the all-terrain teacher and the advantages...
Little Kites
Little KITEs is set to become the largest Student IT...
REALIZING THE PROMISE: How can...
While there is no single education initiative that will achieve...

Form

Other template

Page hero section

Background image with blue overlay as a background.

Page Title

Example Paragraph
COVID-19, epidemics, natural disasters, armed conflicts and wars can cause the discontinuation of education, school dropouts and widen education gaps. They can simply prevent children from physically attending the schools or completely destroy education facilities.