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.
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.
Half Column with Multi colors:
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:
Important Number
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
- Situation in Asia-Pacific
For strong intentions that we want to grab the attention.
Icon colors: #CD001A
Font size: 5rem or 80px
Align: Center
- Our Latest Updates
To start the new section header
Icon colors: #CD001A
Font size: 2rem or 32px
Align: Left
Buttons
Call to Action with Background
Subscribe for Newsletter
Listing and tags
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.