Distilled from n50project.org — real colors lifted from production CSS, real photography from N50's own asset library, and a free Manrope substitute for Pangram's PP Mori. Every token below has a one-to-one mapping with a value in the live site's stylesheet.
Vector reconstruction of the N50 mark exactly as it appears on N50's official Open Graph share card. Teal "N" + brand-blue "5" + a network-globe icon serving as the "0" — wrapped above and below by "The" and "Project" in heavy near-black sans. The mark-only variant strips the framing words for tight spaces (favicon, social avatar). Live n50project.org renders this wordmark inline as styled type (no shipped logo file).
A coalition palette: brand blue does most of the work — primary CTAs, links, the "5" in the wordmark. Teal is the second voice, used sparingly for the "N" and accent moments. Deep slate-navy carries gravity for footer + dark sections. Cream is the page surface — never pure white as default. Orange is reserved for true call-to-action heat (donate, urgent campaigns). All values lifted from the production CSS via grep.
N50 ships PP Mori across four weights — Book, Semi Bold, Extra Bold, and a regular cut. PP Mori is paid (Pangram). Manrope (Google) is the closest free analog: same geometric-humanist DNA, same tight metrics, same softened terminals. Display headlines lean heavy at 800–900 with negative letter-spacing for editorial impact. Eyebrows are tracked uppercase in a single weight. No serifs anywhere — the entire system is one type family.
A coalition of 250+ partners — telecoms, technology vendors, NGOs, universities, and policymakers — working together to extend broadband, devices, and digital skills to the people the internet has so far left behind.
Half the world is online. The other half — the next 3.9 billion — is not, and the gap is widening. The N50 Project exists to close it: by aggregating the demand, the capital, and the technical capacity of a global coalition, and pointing all of it at the communities that need it most. We don't run programs alone. We make programs possible.
Primary buttons are solid brand-blue with a 10px pill radius and uppercase Manrope. The arrow link is the soft alternative — used wherever a button would be too loud. Teal and warm-orange variants exist for the rare cases that need a second voice (teal for partner CTAs, orange for donate moments).
N50's signature treatment for the editorial thesis. Big stat numerals in brand blue, paired with one-line labels and tiny attribution. Use four-up on desktop, two-up on mobile. The strip is bordered top and bottom by hairlines. This is the pattern that does most of the work in the N50 visual language — every page should have one.
N50's distinctive ask is that it's a coalition — partner identity is core, not background. Logos render desaturated (greyscale + 55% opacity), restoring full color on hover. Six-up on desktop, three-up on mobile. Use on homepage, About page, and every program detail. Below: a mock with text-only logos to demonstrate the layout.
Pull-quote treatment for beneficiary or partner voice. Italic body in Manrope 500 with an oversized opening glyph in brand-soft. Left border in brand blue. Two themes: cream (default) and navy. Use sparingly — one per page max — to give a third-party voice center stage.
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.
Erin Bown-Anderson
Executive Director · The N50 Project
We brought 250+ organizations together to solve that problem. Now we're proving the model works at scale — country by country, classroom by classroom.
Daniel Gutwein
Founder · The N50 Project
Standard six-up grid for N50's program initiatives. Photo-led, white-on-cream, with a brand-soft border on hover. Eyebrow announces the initiative number; H3 is the program name; one paragraph of body; arrow-link CTA.
Devices, broadband, and a teacher-training stack landed in K-12 schools that the digital economy has so far missed.
Read the programEquitable access to devices, training, and online opportunity for women — designed with women's-rights NGOs and global telecoms.
Read the programLaptops, internet access, and continuing-education programming for refugees and internally-displaced learners worldwide.
Read the programReal students in real settings — dorm-room desks, makeshift classrooms, hands on actual hardware. Photojournalism, not stock. About half the library is monochrome; the rest is muted color. The two formats sit side-by-side without apology — N50 explicitly mixes them. Never sentimental, never staged.
Eight inline SVG icons lifted directly from n50project.org's production HTML — same path data, same proportions. Fill is currentColor so each glyph inherits the surrounding text color. The long-arrow at the front of the row is the signature CTA element used on every "learn more" link across the live site — every arrow link in this system should carry it. The remaining seven cover navigation, close, and the four social platforms N50 actually publishes to.
N50's quietest visual signature — a single 1px diagonal drawn corner-to-corner inside a small absolutely-positioned square. The live site uses 23 of these as section punctuation: tucked next to a row of initiative icons, stitched into the corners of a column block, marking transitions between content bands. Always 15% opacity, always 1px stroke, always inherit color from currentColor. Use sparingly — this is visual punctuation, not a border.
The diagonals quietly anchor the upper-left and lower-right of this band — visual punctuation, not a border. This is how the live N50 site uses them.
Every token is a CSS custom property on :root. Reference by var() — never hardcode hex in a component.
| Token | Value | Use |
|---|---|---|
--brand | #1c5d99 | Primary CTA, links, "5" in wordmark |
--brand-soft | #96bee3 | Network sphere icon, on-dark accents |
--brand-pale | #d6e5ef | Chip backgrounds, OG-card wash |
--accent-teal | #267e6e | "N" in wordmark, partner CTAs |
--accent-deep | #003429 | Deep teal — body copy on cream |
--accent-warm | #ff6900 | Donate-only orange CTA |
--ink | #0d0e07 | Primary text, "The Project" wordmark |
--ink-deep | #21405e | Footer + dark sections |
--bg | #f8f6f2 | Page background (cream, never pure white) |
--bg-pure | #ffffff | Card surfaces only |
--font-display | 'Manrope' | All headings (sub for PP Mori) |
--font-body | 'Manrope' | All body & UI |
--container | 1240px | Max content width |
--section | 120px | Vertical section padding |
See the system applied across three real digital-equity landing pages.
Volunteer, partner, or donate — three pathways into the coalition for individuals and organizations.
Open landingSix initiatives, six entry points — EdTech, HealthTech, Skills, WomenKind, AI, Displaced People.
Open landingTiered impact giving — from a single device for a learner up to a full program in a region.
Open landing