Sections · v1.0

Every section pattern, in N50’s voice.

A reference page for the section types this design system implements — canonical patterns from the universal catalog plus the N50-only signature patterns (stat-strip, partner-strip, quote-card). Each pattern below renders a live, populated example using real photography from the N50 library and copy in N50’s editorial digital-equity register.

Catalog13 patterns
Signatures7 N50-only
Generic blocks10 patterns
Updated2026-05-07
Pattern · 01 announcement-bar

announcement-bar

Slim strip above the main nav. One sentence + optional CTA — used for time-sensitive moments like an annual report drop, a major partner launch, or a coalition convening.

Live render
New: The 2025 N50 Coalition Annual Report is live — 312K learners onboarded, 32 countries, and the data behind every claim. Read the report
Pattern · 03 hero-photo-led

hero-photo-led

Top-of-homepage. A real-fieldwork photo, dark scrim, and a 6–12 word display headline. N50’s photojournalism library carries this pattern naturally — never use stock.

Live render
Coalition of 250+ partner organizations

Closing
the divide.

Half the world is online. The other half — the next 3.9 billion — is not. The N50 Project exists to close the gap, country by country, classroom by classroom.

Pattern · 04 hero-centered

hero-centered

Typography-only hero, no photo. For the donate page, internal landings, or any page where an image would distract from a typographic ask.

Live render
Donate

100% to programs.
Always.

Every restricted gift is routed in full to the named program — devices, broadband, training, never overhead. Operating costs are funded separately by institutional partners. Audited annually, published publicly.

Pattern · 05 intro-statement

intro-statement

Single editorial paragraph block, often follows hero. State the org’s posture in 1–3 sentences. N50 leans editorial — one confident paragraph, not bulleted “value props.”

Live render

A coalition,
not an organization.

N50 is not a programs shop. We are a working group — an alliance of telecoms, technology vendors, NGOs, universities, and policymakers — who agreed that closing the digital divide is too big for any one of us to solve alone.

What we do is make the math work. We aggregate the demand, the capital, and the technical capacity of 250+ organizations and point all of it at the communities the digital economy has so far left behind.

Founded 2019 · Headquartered in Phoenix, AZ · Operating in 32 countries
Pattern · 06 stat-strip N50 signature

stat-strip .sig-stat-strip

Full-width row of 3–4 large impact figures — the editorial “thesis” after the hero. 96–144px Manrope 900 numerals in brand blue (or teal for variety), with a one-line label and tiny attribution source. Cream + navy variants.

Live render · cream variant
The problem we exist to solve
3.1B
people still offline today
ITU · 2024
250+
partner organizations in the coalition
N50 Annual Report · 2025
6
active initiatives across access pillars
EdTech · HealthTech · Skills
32
countries with active program work
Including AZ, AF, KE, ID, IN
Live render · navy variant
Coalition impact · FY2025
312K
learners onboarded across 32 countries
N50 program reporting
87
new partner organizations joined
Q1–Q4 2025
2.4M
volunteer hours contributed
All six initiatives
$0
overhead taken from restricted gifts
Independently audited
Pattern · 07 initiatives-grid Reframed from ministries-grid

initiatives-grid

Same field contract as ministries-grid in the canonical catalog — reframed for digital-equity nonprofits. Six-up grid of focused verticals, each with a photo, numbered eyebrow, name, one-paragraph description, and arrow-link CTA.

Pattern · 08 pathway-grid N50 signature

pathway-grid

Three-up “pick your lane” layout for the get-involved page. Each card carries an accent-color number (blue / teal / orange) so the three pathways read as visually distinct decisions.

Live render
Choose your lane

Volunteer · Partner · Donor

Pathway · 01

Volunteer your skills

Teach a class. Configure a router. Translate a training. Stand up a Wi-Fi mesh. We have a coalition partner who needs you this quarter.

  • Remote technical mentoring (4–8 hrs/month)
  • In-person training in a partner site
  • Translation & localization for AI tools
Apply to volunteer
Pathway · 02

Bring your organization in

If you run a telecom, a tech vendor, a foundation, an NGO, a research lab, or a public agency — there’s an existing N50 working group that needs your seat.

  • Technology & hardware partner
  • Implementing NGO partner
  • Research & measurement partner
Become a partner
Pathway · 03

Fund a learner today

A single laptop puts a student on the network for four years. A classroom kit serves 40 learners. A regional program touches 8,000.

  • $120 — one device for one learner
  • $2,400 — one classroom kit (40 learners)
  • $25,000 — one regional pilot
Donate today
Pattern · 09 solutions-feature N50 signature

solutions-feature

Half-photo, half-text split panel with a numbered checklist. Used to walk through process, methodology, or N50’s shared coalition playbook. Anchors a feature explanation without leaving the page.

Live render
How the coalition works

A shared playbook,
four times.

Every N50 initiative runs the same four-step model. The playbook is what makes a 250-organization coalition coordinate without becoming a committee.

  • 1
    Identify the gap — with on-the-ground partners, name the specific barrier (devices? bandwidth? skills? policy?) for a specific population.
  • 2
    Aggregate the supply — pool capital, hardware, software, training capacity, and policy expertise from coalition partners.
  • 3
    Run with local operators — deploy through the implementing partner closest to the community. We never replace local capacity.
  • 4
    Measure and publish — report wage lift, learning outcomes, and access metrics. If it didn’t move the number, we say so.
See the full model
Pattern · 10 story-prose

story-prose

Long-form about / founding-story narrative. 2–6 paragraphs of editorial body with an optional pull-quote highlight. Used on the about page and origin-story landings.

Live render
The story

The coalition began with a math problem.

In 2018, three founding partners — a global telecom, a US-based foundation, and a Phoenix education-policy lab — had each tried to close the digital divide on their own. Each had hit the same wall. Devices without bandwidth aren’t a program. Bandwidth without skills isn’t opportunity. Skills without devices is a workshop.

No single organization had all four levers at once. So no single organization could move the number.

The N50 Project was founded the next year as the answer to that math problem — an alliance designed from day one to pool levers, not to compete for them. Within twelve months the coalition had 40 partners. Within five years, 250+. The model is now copied; the original is still here.

What N50 learned in that first decade is that the digital divide isn’t a technology problem. It’s a coordination problem. The technology, the capital, and the will already exist somewhere on this planet. The work is putting them in the same room and pointing them at the same student.

Pattern · 11 principles-list Reframed from beliefs-list

principles-list

Same field contract as beliefs-list in the canonical catalog. Reframed for nonprofit voice — the org’s operating commitments enumerated. Used on the about page and trust-and-transparency landings.

Live render
Operating commitments

Six principles
we won’t bend on.

01

100% to programs, never overhead

Restricted gifts route in full to the named initiative. Operating costs are funded separately by institutional partners.

02

Local operators always lead

We never replace the implementing partner closest to the community. The coalition exists to amplify them, not substitute for them.

03

Measurement is non-negotiable

Every program has a defined metric and a public commitment to publish results — including when it didn’t work.

04

Coalition before brand

Partners get the credit. N50 takes the coordination work. The organizations doing the work on the ground are named, every time.

05

If we fail, we say so

Pilots that miss their target are published as retrospectives. The 2024 Bangladesh pilot retrospective is on our site, in full.

06

Audited annually, posted publicly

Big Four firm. Every March. Same data we share with our funders is the same data we share with anyone who asks.

Pattern · 12 events-list

events-list

Upcoming dates rendered as a date + title + 1-line context list. For partner summits, regional launches, annual report drops, coalition convenings.

Pattern · 13 stories-grid N50 signature

stories-grid

Three-up “from the field” story cards. Each carries a meta row (initiative + country), a photojournalism image, a name-and-stakes headline, and a one-paragraph pull. Used on the homepage and the stories index.

Pattern · 14 quote-card N50 signature

quote-card .sig-quote-card

Pull-quote treatment for beneficiary or partner voice — 1–3 sentences in italic Manrope 500, oversized brand-soft opening glyph, headshot + name + title + org attribution row. Cream + navy variants.

Live render · cream variant

My niece’s school got the Chromebooks last year. She’s reading two grade levels above where she started — and she taught my mother how to video-call her cousins in Manila on the same machine.

RA

Rowena Aguilar

Parent · Davao City, Philippines · EdTech for All beneficiary

Live render · navy variant

Technology should be a connection point, not a dividing line. The N50 coalition is the first time I’ve seen industry, government, and NGOs actually point at the same target with the same playbook.

EBA

Erin Bown-Anderson

Executive Director · The N50 Project

Pattern · 15 partner-strip N50 signature

partner-strip .sig-partner-strip

Monochrome logo wall for the 250+ coalition partners. Logos render desaturated by default; individual logos restore color on hover. N50’s distinctive ask is that it is a coalition — partner identity is core, not background.

Live render
Coalition partners

A working group of 250+ organizations — a sample

Pattern · 16 cta-band

cta-band

Full-bleed conversion section between content blocks. Photo background + dark scrim + display headline + 1–2 button row. Once per page maximum.

Live render
The next 3.9 billion are waiting

Pick the lever you want to pull.

Volunteer your skills. Bring your organization into the coalition. Or fund a learner today — a single laptop puts a student on the network for four years.

Pattern · 17 impact-tiers N50 signature

impact-tiers

Four-up giving-tier rail for the donate page. Each tier carries a Manrope 900 dollar figure and a one-line outcome statement (“1 device” / “1 classroom”). Featured tier flips to navy.

Live render
Pick your impact tier

From a single device to a country program

Tier 01
$120

One device, one learner

A managed Chromebook, four-year warranty, included connectivity, on-device AI tutor.

Tier 03
$25,000

One regional pilot

A full-vertical 12-month deployment in a single region — 8–12 schools, ~3,000 learners.

Tier 04
$250K+

One country program

Multi-year, named-sponsor program in a focus country. Quarterly reporting, on-site visits.

Pattern · 18 ways-to-give

ways-to-give

Donation methods enumerated as numbered cards, plus an optional allocation breakdown (where the money goes) and a tax-info legal strip. Used on the give page secondary to the form itself.

Live render
Ways to give

Four routes, one promise.

Where every $100 of restricted giving goes

68%
Devices & connectivity

Managed Chromebooks, routers, four-year warranty, included data plans for the regional implementing partner.

22%
Curriculum & training

Teacher coaching, learning platform licenses, on-device AI tutor, 90-day onboarding cohorts.

10%
Field operations & measurement

Implementing-partner staff time, monitoring & evaluation, reporting infrastructure. 0% goes to N50 overhead.

  • The N50 Project is a registered 501(c)(3) nonprofit
  • EIN 88-1234567 · Federal tax-deductible to the full extent allowed
  • Big Four annual audit posted publicly each March
  • Charity Navigator 4-Star · GuideStar Platinum
  • BBB Wise Giving · All 20 Standards Met
  • Independent program audit by Mathematica
Pattern · 19 closing-block

closing-block

Final editorial moment before the footer. A directive headline + 1–2 reassuring sentences + an optional phone or email line. Used at the bottom of every page that doesn’t already end on a CTA band.

Live render
One more thing

Still deciding where you fit?

Email a real person on the coalition team and we’ll route you to the right working-group lead within five business days. If your fit is clear we say so; if we need more, we ask one specific question — never a form letter.

Or call us: (602) 555-0150
Group · Generic content blocks

Page-builder-style blocks, in N50 voice.

Vertical-agnostic patterns — the kind that show up on any nonprofit, B2B, or higher-ed site. Implemented here in N50’s digital-equity language: large 20px radii, generous whitespace, brand-blue and accent-teal accents, real photography from the coalition library. Five static patterns and five interactive ones that share sections-blocks.js.

Pattern · 21 image-right-text-left Generic block

image-right-text-left

Two-column row, text left and image right. The default editorial layout for narrative beats — how-we-deliver, who-we-are, here’s-the-program. Pair with image-left-text-right for visual rhythm down the page.

Live render
How we deliver devices

From a shipping container to a learner’s hands in 28 days.

Every coalition-funded device moves through the same five-step pipeline — bulk procurement from a corporate partner, refurbishment and image-load at a regional hub, last-mile staging with a local NGO, in-person training delivery, and a six-month telemetry check-in. We publish the audit at every step.

It is not the cheapest model on paper. It is the one with the highest finish rate. After two years and 312,000 learners, our drop-off after month six sits at 4.8% — an order of magnitude below the sector average.

Chichire learning hub · Eastern Province, Zambia · March 2026
Pattern · 22 image-left-text-right Generic block

image-left-text-right

Flipped variant of image-right-text-left. Image left, text right. Same field contract; alternate it down the page to keep the eye moving.

Live render
Building digital skills together

Training is the lever. Devices are just the wedge.

Hardware drops without skills training fail. We learned that the hard way in 2019 — and rebuilt the program around a 16-week curriculum delivered by a vetted local trainer, tested against an outcome-rubric we open-sourced for any partner that wants to use it.

Every learner who completes the program leaves with a verifiable digital portfolio, a job-ready skill-set, and a six-month support cohort they can keep texting after the class is over. That last piece — the cohort — is what makes the wage data move.

Pattern · 23 faq-section Generic block

faq-section

Question-and-answer block, expanded list (not collapsible). Use on partnership, getting-started, and policy pages where readers actually want every answer in front of them.

Live render
Frequently asked

Six questions partners ask first.

If you’re thinking about joining the coalition — as a funder, a delivery partner, or a corporate device sponsor — these are the answers we end up giving on the first call. We put them up here so the call can move further.

01

How do partners join the coalition?

Two paths. Funders sign a one-page MOU and route to a designated initiative; delivery partners go through a 30-day field-fit interview to confirm operational capacity. Both paths are documented; we don’t do verbal-only commitments.

02

What does a single device actually cost?

Fully-loaded, $148: $84 hardware (refurbished enterprise-grade), $22 logistics, $34 first-year curriculum and trainer support, $8 telemetry. Every partner sees the unit-economic breakdown before signing.

03

Where do you operate today?

32 countries across sub-Saharan Africa, South Asia, Southeast Asia, Latin America, and the Pacific. The active country list and the in-progress pilot list are both posted on the partners page and updated quarterly.

04

Do you take in-kind device donations?

Yes — under specific conditions. Devices must be refurbishable to current OS support, in batches of 100 or more, and shipped to one of our four regional hubs. Anything below that bar costs more to process than to procure new.

05

What does measurement actually look like?

Every learner cohort is measured at 30 days, 90 days, six months, and one year against a fixed outcome rubric: device-uptime, skills-completion, employment or schooling status, and self-reported income change. Raw data is open to coalition members.

06

How is the coalition governed?

A 12-seat board with rotating terms drawn from operating partners, funders, and an independent measurement chair. Bylaws are posted; minutes are summarized within ten business days; the annual report carries the financial audit.

Still have questions? Email the partnerships team
Pattern · 24 three-card Generic block

three-card

Three equal cards in a row — the canonical “three pillars” section. Cream surface, 20px radii, brand-blue iconography, gentle hover lift.

Live render
Three pillars

Access, skills, solutions.

The whole coalition operating model collapses to three nouns. Every initiative we run is a different recipe of the same three ingredients — and every partner contributes to at least one.

Access

A working device in a learner’s hands, on a network they can afford, in a place they trust. The literal floor — without it, nothing else moves.

Programs in this pillar

Skills

Sixteen weeks, a vetted local trainer, an open-source curriculum, and a six-month support cohort. The piece that decides whether the device produces a wage lift or sits in a drawer.

Programs in this pillar

Solutions

Turnkey software stacks — translation, tutoring, telehealth, accessibility — designed once with a partner, then packaged for any coalition operator who needs it. No reinvented wheels.

Programs in this pillar
Pattern · 25 accordion-v1 Generic block · interactive

accordion-v1 list-style

Full-width rows, hairline dividers, brand-blue plus indicator. The editorial accordion — for long-form FAQs, partnership terms, or any list where each item is text-heavy. Single-open by default; switch to data-mode="multi" to open many at once.

Live render
Partnership program

How partner organizations join.

The five most common questions we field from a prospective delivery or funding partner — with the actual answers, not the marketing answers.

A two-page MOU, plus a one-page outcome rubric. The MOU commits you to a 12-month operating window, a named in-country lead, and a quarterly reporting cadence. The rubric defines exactly what we measure and at what intervals. Both are renegotiated — or ended — at month twelve.

What the MOU does not commit you to: brand co-marketing, co-funding, or any exclusivity beyond the named geography. We hate exclusivity clauses; we don’t use them.

You name a target cohort size, an outcome target, and a delivery window. We model the unit-economics, source devices through one of three corporate procurement partners, and stage the shipment through the nearest regional hub. You’ll see a per-device cost-out-the-door before any check is written.

You do. The coalition keeps a non-identifying outcome record for cross-program comparison; everything else — learner records, attendance, qualitative notes — lives in your systems and stays in your country. We publish the methodology, not the data.

We say so — in the annual report, in the partner debrief, and to the funder. Then we run a structured post-mortem with you and either re-tool, re-scope, or shut the pilot down. We have ended programs publicly before; we will do it again.

Yes. Most partners specialize. A telecom may join only on access; a workforce-training NGO may join only on skills; a software company may contribute only a packaged solution. The coalition exists to compose those specializations — not to force every partner to do all three.

Pattern · 26 accordion-v2 Generic block · interactive

accordion-v2 card-style

Each item in a bordered 20px-radius card with hover lift. Use when items carry more weight — an initiative deep-dive, a compare-the-options block, or a section where each entry is its own “moment.”

Live render
Initiative deep-dives

Four programs, in their own words.

Click any card for the program brief — the operating model, current geography, and where the next pilot is headed.

Devices, broadband, and a teacher-training stack landed in K-12 schools that the digital economy has so far missed. We pair every classroom kit with a six-month coaching program for the teacher and a two-year warranty on the hardware. 312,000 learners onboarded since 2022.

Active in 14 countries; new pilot launching in Eastern DRC this quarter with three coalition partners and a regional Ministry of Education co-sign.

Telehealth infrastructure and clinician training extended to rural communities where the nearest specialist is six hours away. We provide the hardware, the connectivity contract, the EHR integration, and a 90-day clinician onboarding cohort. The local clinic owns and operates the program from day 91.

A 16-week curriculum delivered by a vetted local trainer against an outcome rubric we open-sourced. Every learner leaves with a verifiable digital portfolio, a job-ready skill-set, and a six-month peer cohort. Median wage lift across the 2024 cohort: $114/month.

Turnkey AI tooling — translation, tutoring, accessibility — pre-integrated for coalition operators that need it. Designed once with a corporate partner, packaged with documentation, then handed off to any operator that wants to deploy. Twenty-eight orgs running production deployments today.

Pattern · 27 tab-section-v1 Generic block · interactive

tab-section-v1 horizontal

Tabs along the top, content below. Used for “by audience” sections — same page tells the donor story and the partner story without forcing two separate pages. Active tab marked with a thick brand-blue underline.

Live render
For every audience

Pick the lane that fits you.

Four ways to engage with the coalition. Same operating model, different on-ramps.

Fund a learner, a classroom, a country.

Every dollar lands at a named cohort, audited annually, posted publicly. We don’t pool. Your gift to a Skills for All cohort in Phnom Penh moves only there — and the wage data lands back in your inbox at month twelve.

Tiers begin at $148 (one device, one learner) and scale to $1.4M (one country program, three years).

Donate
Pattern · 28 tab-section-v2 Generic block · interactive

tab-section-v2 vertical

Tab rail on the left, panel on the right. More navigation-y than v1 — use it for long-form initiative content where each tab is its own extended section. The rail uses the same number/label pattern as initiatives-grid.

Live render
Initiatives in detail

Four programs, four pages, one rail.

Each tab is its own program brief — field operations, geography, current learners, and the next milestone.

EdTech for All

K-12 device delivery paired with a six-month teacher coaching program and a two-year hardware warranty. We pick schools the digital economy has so far missed and stay until the program is locally-run.

Active in: 14 countries · Learners onboarded: 312,000 since 2022 · Next milestone: Eastern DRC pilot launch, Q3 2026.

Read the program brief
Pattern · 29 slider-v1 Generic block · interactive

slider-v1 image gallery

Large rounded image frame (20px radii), brand-blue circular arrow buttons, blue dot indicators below. Field photography — one country, one caption, one moment per slide. Touch-swipe enabled on mobile.

Live render
Programs in the field

Five countries, five moments.

A small slice of the coalition’s field work this quarter — chosen by our regional leads, not by a marketing brief.

Zambia · Eastern Province

The first cohort of forty-six learners walked into the Chichire hub on a Tuesday in March.

Cambodia · Phnom Penh

Skills for All cohort 14 wrapped its second week — same trainer, same curriculum, same outcome rubric.

Indonesia · Sulawesi

For WomenKind microenterprise cohort — eighteen women, four village clusters, one shared portfolio platform.

Kenya · Turkana County

EdTech for All landed thirty-two devices and a refurbished router into a school the grid still hasn’t reached.

Pakistan · Islamabad

Displaced People program — continuing high school for Afghan refugees over a satellite link, two hours a day.

Pattern · 30 slider-v2 Generic block · interactive

slider-v2 testimonial

Quote-led carousel — one testimonial per slide with circular photo, attribution, and role. No arrow buttons by design (cleaner editorial feel) — brand-blue dots only.

Live render
In their own words

Four voices from the coalition.

Partner leads, learner alumni, donors — not selected for sentiment, selected for specificity.

The MOU was two pages. The outcome rubric was one. We knew exactly what we were on the hook for and exactly what would be measured. That alone was unusual — everyone else hands you a forty-page deck and a vibe.

Amani Okello Country Lead · EdTech for All Kenya

I finished the Skills cohort in November. By March I was earning enough to keep my younger brother in school. The cohort — the WhatsApp group of all of us — is still texting; that’s the part that mattered.

Sopheap Chan Skills for All alumna · Phnom Penh

We’ve funded a lot of digital-equity programs. The N50 coalition is the first one that sent us a wage-lift number at month twelve, with the methodology, with the raw data exportable, and with a footnote about the cohort that didn’t finish.

Daniel Reyes Program Officer · Verda Foundation

The HealthTech program left us with a working clinic, not a pilot binder. Day ninety-one we owned it; the coalition shifted to telemetry-only and we ran the program. That handoff was the whole point.

Dr. Mariama Diop Clinic Director · Saint-Louis, Senegal
End of catalog

That’s every section,
in N50’s voice.

The patterns above are the building blocks of every page on the n50project.org site. To explore tokens, components, and individual primitives instead, visit the design system reference.

View design system See it in context