Design Guide · Concept 02 — Nonprofit / Global
Editorial photojournalism,
with a working globe.
How Giant Abroad Fund was designed: a documentary visual system for an international nonprofit that earns trust through specificity, and a React Three Fiber globe as its signature technique.
01 — Palette
Newsprint, paper, and one field-map accent
Primary surface for the hero, accountability section, and caption bars. Near-black, slightly warm — newsprint ink, not pure #000.
Page ground. Warm and paper-like, so photography with muted earth tones sits naturally on it.
The only bright color on the site. Reserved for map pins, rule lines, data bars, and the donate action — the way a field map marks positions.
Secondary text, metadata, and graticule lines. Reads like faded field-notebook ink.
02 — Typography
A magazine serif and a caption face
Newsreader — display & longform
- Source
- next/font/google, variable weights, roman + italic
- Why
- An editorial serif drawn for on-screen news text. It gives headlines the gravity of a magazine feature, and its italic carries the reportorial voice — used for emphasis in headlines, never for decoration.
- Where
- All headings, dispatch stories, and body copy. Set tight (tracking-tight, leading 1.05) at display sizes.
Archivo Narrow — Captions, Labels, Data
- Source
- next/font/google, weights 400–700
- Why
- Condensed grotesques are the native typeface of photo captions and map legends. Set uppercase with wide letterspacing (0.14em), it reads as annotation — metadata written on top of the record, not part of it.
- Where
- Photo caption bars, dispatch numbers, statuses, impact figures, nav, buttons, and every coordinate or date on the site.
03 — Signature technique
A React Three Fiber globe, drawn like a chart instead of a photo
Points, not textures
The sphere is ~1,400 points placed by Fibonacci distribution, over a khaki graticule at 30° intervals. No satellite imagery — it reads as a cartographer’s instrument, matching the ledger-and-fieldnotes tone of the rest of the site.
Pins that point somewhere real
Each project’s latitude and longitude is converted to a 3D position. Pins pulse in signal red-orange; clicking one scrolls to its dispatch and highlights the card. The globe is navigation, not ornament.
Degrades on purpose
The canvas loads client-side with a quiet fallback, honors prefers-reduced-motion by pausing auto-rotation, and every pin has a DOM twin in the hero legend — so keyboard and screen-reader users get the same wayfinding.
04 — Design rationale
Why it looks the way it looks
Documentary, not brochure
Nonprofit sites default to soft gradients, smiling stock photos, and vague verbs. This design borrows instead from photo essays and field reporting: numbered dispatches, coordinates, caption bars, reconciliation dates. Specificity is the aesthetic — and for an org that leads with transparency, specificity is also the argument.
One accent, used like a map marker
Signal red-orange appears only where a cartographer would use it: to mark a position, underline a datum, or flag an action. Everything else is ink, bone, and khaki. Restraint is what makes the accent read as information rather than decoration.
Captions do the credibility work
Every photograph carries an ink caption bar with place, subject, and date, set in condensed uppercase. It is the visual grammar of photojournalism — an implicit claim that someone stood there with a camera and wrote down what they saw.
The globe is the org chart
A global fund's honest 'about us' is a map. The interactive globe makes the portfolio spatial: four pulsing pins, four dispatches, one click from position to story. It carries the National Geographic energy without a single satellite texture or stock photo of Earth.
Compare this with its sibling nonprofit concept, Flatwater Collective — warm storybook illustration for a local community org. Same sector, opposite register. That contrast is the point of the portfolio.
Back to the site