Style Guide

Colors

All the colours which make up the UI

Main UI Colours

Primary 1

Primary 2

Neutrals

Black

Dark Grey

Mid Grey

Beige

White

Other

Light Red

Blue

Noto Sans

Display One

Heading one

Heading two

Heading three

Heading four

Heading five

Heading Six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Greyscale

Heading one

Heading two

Heading three

Heading four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Labels

Used within the headings etc

example with the bg on the span

Self Help Projects

Alerts

Used within the headings etc

New

Buttons

UI buttons and form submits

Button

Button with Icon

Button

Larger Button with Icons

Ghost Buttons

Button

Text Links

Discover More

Team Card

Used within the team page

Person Name

Job Role

As the visionary and the founder of Sethule Orphan’s Trust, l do not sit behind my desk, calling the shots; I play an active and pivotal role in the drive and objective of the organization. I ensure that all the executed projects are relevant to the mission and the vision of Sethule. Through implementing sustainability enabling schemes, I strive to improve the lives of orphans and vulnerable groups in the rural communities of Zimbabwe.

Project Card

Used within the project page

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.