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:

Helvetica Neue Substitutions: Helvetica, Arial, sans-serif
Consolas and other fonts used in our Logos

Standard Logos:

Fundraiser Logos:

OLD Color Palette:

BROWN IS – #663300 – RGB/CMYK Translation >>
TAN IS – #cc9966 – RGB/CMYK Translation >>
CREAM IS – #ffffcc – RGB/CMYK Translation>>
GREEN IS – #006633 / rgb(0,102,51) – http://www.colorhexa.com/006633
ORANGE IS – #d4631f / rgb(212,99,31) – http://www.colorhexa.com/d4631f
PURPLE IS – #330066 / rgb(51,0,102) – http://www.colorhexa.com/330066
BLUE IS – #2a2f46/ rgb(42,47,70) – http://www.colorhexa.com/2a2f46
RED IS – #ad0700 / rgb(173,7,0) – http://www.colorhexa.com/ad0700

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)