Friends of Ngong Road

We empower Nairobi children living in poverty to transform their lives through education and support, leading to employment.

Style Guide

Standard Color Palette:

  • BROWN (Banner) – #a25439 – rgb(162, 84, 57)
  • LIGHT BROWN (Live Nav) – #c56747 – rgb(197, 103, 71)
  • BURNT ORANGE (Banner) – #e26648 – rgb(226, 102, 72)
  • RED (Alert, Accents) – #aa101a – rgb(170, 16, 26)
  • TAN (Rollover Nav) – #c99d61 – rgb(201, 157, 97)
  • Karibu Loo Red (do not use for FoNR/NRCF) – #c3000a – rgb(195, 0, 10)

Standard Headings in FoNR Theme:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
Preformatted No Style

Just Bold Text Heading

Normal Paragraph Text

Quotations look like this

Language:

Use American English if under the FoNR logo.  Use British English under the NRCF or KLL logos. 

Standard Sizes:

  • Images should not exceed 2048×2048
  • Featured images must be at least 1200×450. (If they are smaller than that unexpected results will occur. If larger they will be cropped automatically.)

Standard Fonts:

Standard Logos:

Fundraiser Logos:

Venmo QR Code

OLD Color Palette:

Mailing Address For Packages:

100 1st St. S
#581308
Minneapolis, MN 55458

Button Styles

1. Call to Action Button

Purpose: For critical actions like donations.

Style: .btn-primary

Example:

Donate Now 
      <a href="#" class="btn-primary">Donate Now</a>

2. Learn More Button

Purpose: Guides users to more info.

Style: .btn-secondary

Example:

Learn More 
      <a href="#" class="btn-secondary">Learn More</a>

3. Submit Button

Purpose: For form submissions.

Style: .btn-submit

Example:

      <button class="btn-submit" type="submit">Submit</button>

4. Alert Button

Purpose: For warnings and important alerts.

Style: .btn-alert

Example:

Important Update 
      <a href="#" class="btn-alert">Important Update</a>

Button CSS Styles

/* Call to Action Button (Primary) */
.btn-primary {
    background-color: #aa101a; /* Red */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #a25439; /* Darker brown on hover */
}

/* Learn More Button (Secondary) */
.btn-secondary {
    background-color: #c99d61; /* Tan */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: #c56747; /* Light brown on hover */
}

/* Submit Button (Forms) */
.btn-submit {
    background-color: #e26648; /* Burnt Orange */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background-color: #c99d61; /* Tan on hover */
}

/* Alert Button (Warning) */
.btn-alert {
    background-color: #aa101a; /* Red */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-alert:hover {
    background-color: #c3000a; /* Karibu Loo Red (Darker) */
    color: white;
}

Student/Sponsor Portal

get_featured_image_markup – preferred dimensions are 300px X 300px when setting a student photo as portrait in WePix (to maintain aspect ratio in the portal)