Styleguide
Design Atoms + Components
TYPE SCALE: Headers
Slogan
Used for Page Banners (the biggest promotion on the page)
Typeface: Montserrat Extra Bold (800)
Page Heading (Heading XL)
Used for Page Titles (what the page is about)
Typeface: Montserrat Extra Bold (800)

Page Section Heading (H1)

Used for Page Section Titles (outline of contents)
Typeface: Montserrat Extra Bold (800)

Sub-section Heading (H2)

Used for Page Titles (what the page is about)
Typeface: Montserrat Bold (700)

News Headline (H3)

Used for News Article Titles (for components) or sub section headers inside rich text blocks
Typeface: Arial Bold (700)

Subheading (H4)

Used for News Article Subtitle (for components) or sub sub section headers inside rich text blocks
Typeface: Arial Normal (400)

Disclaimer (H5)
Used for Disclaimers for dialogue boxes (for communicating required user input), Milestone Sidebar Headers, etc.
Typeface: Montserrat Extra Bold (800)

CAtegory Name (H6)
Used for Category Names or Filter Tags (for components)
Typeface: Arial Bold (700)

Combo class used for Featured or Special Category Names or Filter Tags (for components)
Typeface: Georgia Bold Italic (700)

TYPE SCALE: BODY COPY

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Body Copy + Large

Combo class used for Header descriptions
Typeface: Georgia Normal (400)

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Body Copy + Medium

Combo class used for Header descriptions
Typeface: Georgia Normal (400)

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Body Copy

Used for Header descriptions
Typeface: Georgia Normal (400)

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Body Copy + Small

Combo class used for Header descriptions
Typeface: Georgia Normal (400)

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Body Copy + Tiny

Combo class used for Captions and Milestone Sidebar Text
Typeface: Georgia Normal (400)

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Body Copy + De-emphasized

Combo class used for Header descriptions
Typeface: Georgia Normal (400)

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country. Read More

Read More Link

Used for Hyperlinks within rich text blocks or links within descriptions
Typeface: Georgia Bold Italic (700)

Brand Colors
PBSP Blue
HEX: #004B8F
HSL: 209. 100. 28

Blue 15
HEX: #00294E
HSL: 209. 100. 15

Blue 22
HEX: #003C73
HSL: 209. 100. 22

Blue 40
HEX: #006BCC
HSL: 209. 100. 40

Blue 89
HEX: #C7E4FF
HSL: 209. 100. 89

Blue 95
HEX: #E3F2FF
HSL: 209. 100. 95
PBSP Green
HEX: #45B748
HSL: 122. 45. 49

Green 15
HEX: #153716
HSL: 122. 45. 15

Green 22
HEX: #1F5120
HSL: 122. 45. 22

Green 40
HEX: #1CB01F
HSL: 122. 53. 40

Green 75
HEX: #9DE19F
HSL: 122. 53. 75

Green 90
HEX: #D8F3D9
HSL: 122. 53. 90
Black
HEX: #000000
HSL: 0. 0. 0.

Acid Black
HEX: #23262A
HSL: 209. 10. 15

Dim Grey
HEX: #5C6670
HSL: 209. 10. 40

Silver
HEX: #B9C0C5
HSL: 209. 10. 75

Gainsboro
HEX: #E0E3E6
HSL: 209. 10. 89

White Smoke
HEX: #F1F2F4
HSL: 209. 10. 95
Icons
Member Companies
Families Reached
New Projects
Health
Education
Member Companies
Families Reached
New Projects
Health
Education
Environment
Livelihood
Become a Partner
Donate
Join Our Team
Environment
Livelihood
Become a Partner
Donate
Join Our Team
Buttons
PRIMARY
Used for Headers and most everywhere on the site.
SECONDARY
Used to denote the second or alternate option the user may take; it should contrast but relate to the primary button.
SPECIAL
Used for Special or Featured calls-to-action, on forms, on the footer, or to contrast from the main action we want the user to take.
Forms
CONTACT FORM
Used for typical contact forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Standard Hero Header
Pre-Title
PBSP Celebrates 50 Years in Service

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Pre-Title
PBSP Celebrates 50 Years in Service

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Standard Hero

Header component used for most pages, except News Articles and Milestones
The image frame on the right side follows the orientation of the photo uploaded

Full Width Hero Header
Celebrating 50 years
Philippine Business for Social Progress is the largest business-led NGO at the forefront of strategic corporate citizenship and business sector leadership contributing to sustainable development and poverty reduction.

Full Width Hero

Header component used for very special pages only, such as the Milestones.
The image uploaded should ideally be in landscape orientation to fill the entire width of the screen.
*The text alignment only looks off-center in this Styleguide but it will look properly centered when applied to a page.

news Article Hero
Category Name
December 25, 2021
PBSP Celebrates 50 Years in Service

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  Read More

News Article Hero

Header component used for News Article pages.
The image frame on the right side has to be in landscape orientation to fit the thumbnail.

Info Page Hero
Pre-Title
PBSP Celebrates 50 Years in Service

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Info Page Hero

Header component used for text-only pages such as Privacy Policy, Whistle Blower Policy, etc.

Section Headers

Our Accomplishments

50 Years at the Nexus of Business and Communities

Section Header Centered

Page section header component used to break the layout monotony with a center-aigned text break

Promo Banner
Pre-Title
PBSP Celebrates 50 Years in Service

In 1970, fifty Filipino businessmen signed a Statement of Commitment and formed the Philippine Business for Social Progress (PBSP), an acknowledgement of the business sector's responsibility to the progress and development of the country.  

Promo Banner

A component used for promoting seasonal Calls-to-Action such as donating to typhoon-specific relief operations, etc.
The image frame on the right side follows the orientation of the photo uploaded

People Card
PEOPLE CARD
Used for Team and Board of Trustees pages.
Manuel V. Pangilinan
PBSP Chairman
Chairman of PLDT, Inc.
OPTION CARD
Used for Donation page options; similar to pricing table.
MasterCard, Visa, JCB, Paymaya, Gcash

via QR Codes
PRIMARY XS
News Card
NEWS ARTICLE CARD
Used for News article snippets on the Home page and the News page. News articles appear chronologically, with the latest story at the front row.
Category
Dec 25, 2021
We are raising funds to assist families affected by Typhoons Rolly and Ulysses

When Typhoons Rolly and Ulysses hit the country, millions of people were affected and thousands of families were displaced...  Read More

FEATURED NEWS ARTICLE CARD
Used for news article that you want the users to see regardless of when it was originally posted.
Infographic Card
STATIC INFOGRAPHIC CARD
Used to highlight statistics.
Families Reached
89,214
Families Reached
CLICKABLE INFOGRAPHIC CARD
Used as a jump-off point to a subsection of the main menu or page.
Education
Education
Our Education program helps poor and disadvantaged children and youth to complete basic and secondary education.
Magazine Card
MAGAZINE CARD
Used for Publications
#17
Challenging Ourselves to 
Do More
Dec 25, 2020
Standard Rich Text
Used for News Articles, Milestone Expanded Pages, or anywhere you want to have a dropcap on the first letter.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Type your caption here.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.
Used for Legal Notices such as Privacy Policy, Whistle Blower Policy, Cookie Policy, etc.

Donate
Donate