Designed for a small nonprofit. Built to a large standard.
An inside look at the typography, accessibility, performance, and security decisions behind upliftincorporated.org — and why each one matters for the families we serve.
Uplift Incorporated is a small, all-volunteer charitable foundation that has been mentoring youth and awarding scholarships in Madison County, Mississippi for two decades. The website you are reading was built to one principle: donors and families should feel the same care online that they feel in person. Every choice on this site — from the serif typeface to the cookieless analytics — was made in service of that goal.
What follows is a candid walk through the design system, the accessibility decisions, the performance numbers, and the privacy and security posture. We hope it shows that a regional nonprofit doesn't have to settle for template-grade work to look and feel like an institution worth trusting with a planned gift.
Two typefaces. Twenty years of service.
Type does the heavy lifting on a nonprofit site. We chose two families — Fraunces for serif voice and Inter for everything functional — and gave each one a specific job.
Why Fraunces
A modern, variable-axis serif designed by Phaedra Charles and Undercase Type. It carries the warmth of a classic book face but its higher-contrast strokes and disciplined italics read as contemporary, not nostalgic. For a nonprofit that has served a community for twenty years, that balance of warmth and authority is the whole brief.
Why Inter
Open-source, exhaustively hinted at small sizes, and tuned for screens. We use Inter for body copy, navigation, and forms because it disappears — readers see the words, not the typography. That's the right posture for a font that has to survive at 11px on a phone in a coat pocket.
Plum and gold. Restrained on purpose.
The palette uses two anchor colors with three supporting neutrals. Deep plum carries weight and seriousness. Gold carries celebration and warmth. Cream holds everything together without ever calling attention to itself.
Contrast as default, never as an afterthought.
Every text/background pairing on the site exceeds WCAG AA contrast for body copy (4.5:1) and AAA for headlines (7:1). Gold-on-plum, the brand's signature, lands at 6.8:1.
Gold appears only when something deserves attention.
Donate buttons. The dollar amounts on the impact stats. The Charity Navigator verification link. Used everywhere it would lose its meaning; used sparingly so it keeps it.
Built for everyone who needs us.
This is the section the agency portfolios skip. We didn't.
Keyboard navigation
Every interactive element is reachable by Tab. Focus states use a 3px gold ring with 4px offset — visible, on-brand, never removed. The board flip-tiles respond to Enter and Space identically to mouse click, and announce themselves with aria-label="Flip to read bio".
Skip link
Every page begins with a hidden-until-focused skip link that jumps screen reader users past the navigation directly to #main. It's the single highest-value accessibility feature most sites omit.
Reduced motion respected
If a visitor's OS has prefers-reduced-motion: reduce set, all GSAP entrance animations, the hero word rotator, and the parallax effect are disabled. Content appears in its final state instantly. No motion, no apologies.
Semantic HTML
One <h1> per page. Proper <nav>, <main>, <article>, <section> structure. Every form input has an associated <label>. Every image has alt text — descriptive where it adds meaning, empty where it's decoration.
Touch targets sized for thumbs
Buttons and links meet the 44×44px iOS Human Interface Guidelines minimum tap area. The Donate floating action button is even larger so it's reachable while holding a phone one-handed.
Video testimonials with controls
Every video on the stories page has native controls, doesn't autoplay, and uses lazy-loaded posters so the page isn't 30MB before someone presses play. Captions are the next thing on the roadmap.
The site, in numbers.
Measurements from upliftincorporated.org running on Netlify, January 2026.
Fast on a phone in rural Mississippi.
The median visitor to this site is on a 4G connection and an iPhone three generations old. We built the site for that visitor first.
WebP with JPEG fallback
Every photograph is served as WebP first, with a JPEG <source> fallback for older browsers. The hero photo of our 2026 scholarship winners is 108 KB in WebP and 189 KB in JPEG — about half the size of an unoptimized phone export.
Critical CSS inlined
The above-the-fold styles for typography, layout, and the navigation are inlined in the <head> of every page so the browser can paint without waiting for an external stylesheet. The full stylesheet is preloaded in parallel.
Fonts preconnected and swapped
preconnect hints establish a TLS handshake to fonts.gstatic.com before the font is even requested. font-display: swap means body text appears immediately in the system fallback while Fraunces and Inter load in the background.
Lazy loading where it matters
Every off-screen image uses loading="lazy". The 10 student testimonial videos use preload="none" on the video element and load only a poster image until the visitor presses play. The hero photo is the only image fetched eagerly.
Restrained craft, not theater.
Motion is meaningful on this site, never decorative. Six specific moments earn the GSAP + ScrollTrigger weight.
Stat counters animate from zero on first view.
$0 climbs to $70K. 0+ years climbs to 20+. The numbers are earned, not typed.
Hero photograph parallax — 4 percent of viewport height.
Just enough to add dimension as you scroll past. Hardware-accelerated via will-change: transform.
Featured testimonial cards stagger in.
Three videos rise into view with a 140ms gap between each. The eye reads them in sequence.
Timeline draws itself.
The about-page timeline of milestones — 2005 founded, 2008 first gala, today — reveals one item at a time as the visitor scrolls.
Partner logos land in sequence.
The six institution logos (Madison County Schools, Jackson Public Schools, Tougaloo, JSU, Hinds, MINACT) stagger in with an 80ms cascade. Visual rhythm, not visual noise.
Board bios flip on hover, on tap, and on focus.
Three input modalities, one consistent motion. Touch users tap. Mouse users hover. Keyboard users Tab + Enter. All three flip the same way.
What you give us, we protect.
This site does not sell, share, or rent your data. It does not need to. Here is how that posture is enforced in code.
Cookieless analytics
We use Plausible, an open-source, EU-hosted analytics service that identifies visits via a stateless daily-rotating hash. No persistent identifier, no cross-site tracking, no advertising profile. GDPR, CCPA, and PECR compliant by construction.
Strict Content Security Policy
The site ships a CSP that allowlists only the domains it actually needs: cdnjs for the GSAP library, PayPal for the donation flow, Plausible for analytics, FormSubmit for contact form delivery, Google Maps for the contact page. Everything else is blocked.
HSTS with preload
The HTTPS Strict Transport Security header has a one-year max-age and includes subdomains. Browsers will refuse to talk to upliftincorporated.org over plain HTTP for a full year after the first visit.
Frame ancestors locked
frame-ancestors 'self' prevents our site from being embedded in iframes on third-party domains — a clickjacking defense most nonprofit sites overlook.
Honeypot on the contact form
A hidden form field that humans never see and bots always fill. Plus FormSubmit's anti-spam layer on top. Real submissions arrive cleanly; bots disappear silently.
No third-party iframes for video
Testimonial videos are self-hosted MP4s served from the same origin as the page. No YouTube embed, no Vimeo embed, no third-party cookies. The visitor's view of a scholarship recipient stays between them and us.
What an institution publishes openly.
Trust on a nonprofit site is not a marketing exercise. It is a structural one.
EIN published, not gated
Our Federal Tax ID — 72-1600793 — appears in the footer of every page, in the Planned Giving information panel, and inside the suggested bequest language. We don't make a donor's advisor email us for it.
Independently verified
The Charity Navigator link in every page footer routes directly to the public profile for our EIN. Donors and DAF managers can verify our IRS status, classification, and revocation history in two clicks.
Donor Bill of Rights
The full text of the AFP / AHP / CASE / Giving Institute Donor Bill of Rights is published on a dedicated page — not buried in a privacy policy, not summarized. Ten rights, by name.
Planned giving + tribute giving pages
Two dedicated pages cover legacy gifts and memorial gifts — six tax-advantaged paths to give, with the legal language an estate attorney needs, and contact paths an advisor needs.
No stock photos. No fake quotes.
Every face on this site is a real person who said yes to being on it. Every quote was earned, not invented.
Ten student video testimonials, edited from raw footage.
Original interview tape from the 2026 Talent Hunt event was cut into ten individual student testimonials, color-corrected, and posted with proper consent. The featured three on the home page rotate over time so different voices lead.
Real board photographs in flip-tiles.
Each board member has a photograph, a published bio, a credentials list, and an organization-level role. No silhouette placeholders. No "name pending" stubs.
Real partner logos with permission.
Six partner institutions — Madison County Schools, Jackson Public Schools, Tougaloo College, Jackson State University, Hinds Community College, and MINACT — are presented in a band of equal-weight tiles. Brands intact, used in good faith.
The hero photograph is the 2026 cohort.
Three scholarship winners. Real names on real checks. Real chairman. Real photographer. It is not a stock image of "diverse youth" pulled from a library.
Built for the next twenty years.
If this site convinces you that Uplift Incorporated is worth your support, the work has done its job.