A national literacy network · West Africa · concept edition
Forty-six chapters keep weekly reading circles alive across twelve countries — in the letters people actually speak.
Scroll, and each letterform fills like ink taking to paper — literacy, rising with the reader.
letterform i · of ivA — the first vowel
the letter every alphabet in the region opens with
letterform ii · of ivƐ — “open e”
read in Akan, Ewe, Fon and Baoulé
letterform iii · of ivŊ — “eng”
read in Dagbani, Wolof and Ga
letterform iv · of ivɔ — “open o”
read in Twi, Ewe and Mòoré
Four letters, one lesson: when the page holds the sounds you already speak, reading stops being a foreign country.
We believe a country learns to dream in the language it reads. The Literacy Circle gathers readers, teachers, market women, drivers, and children around one steady practice: forty minutes of reading, together, every week. Forty-six chapters keep the circle open across twelve West African countries — because when one more person learns to read, everyone near them stands a little taller.
Exactly sixty words, on purpose — short enough to recite before the books open, in any of the eight languages our chapters read in.
A simplified plate, hand-projected from real coordinates. Chapter cities are real; the network itself is the concept.
Programme one
Adult literacy, in company. Forty minutes a week, chairs pulled into a ring: a newspaper, a novel, a bus timetable — whatever the circle chooses. Neighbours teach neighbours, and nobody reads alone.
Every chapter · every week
Programme two
Mother tongue first. Children meet Ɛ and ɔ before they meet an exam — early-grade readers set in eight regional languages, so the first book a child finishes sounds like home.
8 languages of first instruction
Programme three
A library that visits. Crates of books rotate between chapters by tro-tro, taxi and ferry — two hundred titles a crate, restocked in the capital, signed out on paper cards.
On the road between chapters
We publish goals, not victories. The numbers below are the horizon this network is walking toward — stated plainly, so anyone can hold us to them.
500
reading circles meeting weekly across the network by 2030
12,000
adult learners a year finishing their first full book in the Open Circle
8
languages of first instruction kept in print for First Alphabets
60by ’30
chapters — growing the map from forty-six, border by border
Targets from the concept brief · goals, not reported results
A circle costs very little to keep open: a room that is already there, a leader with a small stipend, and books that arrive on time. Monthly pledges are what make the “on time” part true.
A concept demonstration: this form records pledge interest through Netlify Forms. No payment is requested or taken, and no real organization receives your details.
Your pledge of interest is recorded. If this were a live organization, a chapter coordinator would write to you within the week — for now, it simply proves the circle of a working form.
How this book was made
A design-thinking case study: the brief, the problem, the direction — and what was set aside.
This site answers a public request-for-quotation issued by a national literacy nonprofit: a single-page web presence for a volunteer reading network — its mission, its chapters, its programmes, and a way to give. The identity here, “The Literacy Circle — West Africa”, is a fictional composite built to that brief.
Concept project — adapted from a public RFQ. Frontend only; portals and dashboards shown are static UI demonstrations. Not affiliated with any real organization. Every figure on this page is a design target, not a reported result.
Literacy-nonprofit websites default to one of two failure modes: the pity register (stock photos of children, guilt-toned appeals) or the bureaucratic register (annual-report PDFs wearing a homepage). Both talk about readers. Neither feels like reading.
The reframe that unlocked the design: a literacy organization's website is itself a text. If the page behaves like a beautiful book — a cover, chapters, folios, a colophon — then simply using the site rehearses the pleasure the organization exists to spread.
Chosen: the book as interface. A centred measure, drop caps, chapter rules, aged-paper grain, and a signature moment where the alphabet itself — including Ɛ, Ŋ and ɔ from West African orthographies — rises with the reader's scroll.
Everything numeric on this page — 500 circles, 12,000 learners, eight languages, sixty chapters — is a target from the concept brief, stated as a goal. The demonstrated capability is the craft itself: that a one-page nonprofit site can hold Awwwards-level attention without a single photograph.
How this page was engineered — generously enough that another designer could reproduce it.
Designed and built by Hannah Kwakye, engineered with Fable 5 as the designer-engineer under her direction. The whole site is hand-authored static HTML, CSS and vanilla JavaScript — zero frameworks, zero libraries, zero external requests. Motion runs on one requestAnimationFrame loop plus IntersectionObserver; typography is Literata and Public Sans, self-hosted as woff2.
Every visual is code-drawn — an environment constraint the collection turned into a thesis. Here that meant: an SVG map plate, stroke-icon programme plates, an aged-paper grain made from an SVG turbulence filter in a data-URI, and a hero built from nothing but type.
Google's latin subset of Literata omits Ɛ, Ŋ and ɔ — the very letters this site is about. The fix is a second, 2 KB font slice containing only those glyphs, declared last with a narrow unicode-range so the browser reaches for it only when a West African letterform appears:
/* Ŋ ŋ Ɔ Ɛ ɔ ɛ — subset separately; declared last so it wins */ @font-face { font-family: 'Literata'; src: url('literata-glyphs.woff2') format('woff2'); unicode-range: U+14A-14B, U+186, U+190, U+254, U+25B; }
Each hero glyph is two stacked copies of the same character: an outlined one (-webkit-text-stroke, transparent fill) and a terracotta one clipped by a polygon whose top edge a scroll-driven custom property lowers, releasing the ink from the bottom up:
.glyph .fill {
clip-path: polygon(-6% calc((1 - var(--p, 0)) * 100%),
106% calc((1 - var(--p, 0)) * 100%),
106% 106%, -6% 106%);
}
// per frame: ink rises as the letter travels — 0 as its top clears
// the fold, 1 as its centre reaches the viewport's centre
const p = clamp((vh - rect.top) / (vh * 0.5 + rect.height * 0.5), 0, 1);
glyph.style.setProperty('--p', p);
Two hard-won details: the polygon's -6% overshoot keeps serifs and the Ŋ's descender hook from being shaved during the fill — and it is a polygon rather than inset() because a calc()-driven inset with negative side values silently fails to clip in some Chromium compositors. Under prefers-reduced-motion the clip is removed entirely; the letters simply stand, already full.
The map is an equirectangular projection done by hand: x = 24 + (lon + 18) × 34, y = 16 + (17.2 − lat) × 34. Forty-two real coastline coordinates from Saint-Louis to the Niger Delta are smoothed into quadratic curves through segment midpoints; national borders are dashed and deliberately suggestive; the Niger's long arc through the Sahel is drawn from its actual course. All 46 chapter nodes sit at real city coordinates.
Each node carries a pulsing halo staggered by a per-node animation-delay, so the network breathes rather than blinks. An IntersectionObserver removes the .live class off-screen — 46 infinite animations run only while you're watching them. The country legend filters by dimming non-matches; nodes are keyboard-focusable and announce themselves to a live-region caption.
Netlify, straight from a Git push: publish = ".", immutable one-year caching on /assets/*, conservative security headers, and Netlify Forms picking up the pledge form at build time. The /guide and /process routes exist as tiny meta-refresh stubs pointing back to these appendices, so the collection's route contract holds on a one-page site.