The N50 Project Source · n50project.org

A digital-equity design system, a homepage, three landing pages.

Real colors lifted from production CSS, real photography from N50's ShowIt CDN, free Manrope (Google) substitute for Pangram's PP Mori. The system below; a homepage and three landing pages built on it.

The system

Tokens, type, and components — extracted, not invented.

Twelve color swatches with real hex values, a complete type ramp on Manrope, three signature patterns (stat strip, partner strip, quote card), an initiative-card system, and the photo library that ties it all together.

Open the design system
#1c5d99
#96bee3
#d6e5ef
#267e6e
#003429
#ff6900
#0d0e07
#21405e
#f8f6f2
Homepage preview
Closing
the divide.
The homepage

Everything the system ships at full strength.

Hero, stat strip, mission band, six-up initiatives grid, four-step solutions feature, beneficiary quote card, story cards, partner-logo strip, and a final CTA. Same tokens, full beat.

Open the homepage

Three landing pages on the same system.

Click to open
Landing 01
Three pathways

Get Involved

A pathway-led page with three onboarding lanes (volunteer, partner, donor), a coalition stat strip, an honest FAQ, and a working application form.

Open landing
Landing 02
Six initiatives

Programs

Long-form program detail page covering all six initiatives (EdTech, HealthTech, Skills, WomenKind, AI, Displaced People) with metrics, photo stacks, and partner strip.

Open landing
Landing 03
100% to programs

Donate

A trust-led giving page with four tiered impact levels, a working donate form (frequency + amount toggles + direct-to-initiative selector), four promises, and verification badges.

Open landing