Instructions

Getting started

The site lives in the web folder of the nzinga-voice repository, on GitHub. Read its README first: it holds the method, the folder map and the page map. The untouched template is the reference for every page. Compare each Nzinga page with the template page side by side: only words, colours, logo and imagery may differ. If a page needs something the template page lacks, leave it out and say so.

Theme variables and dark mode

Colour comes from one stylesheet, nzinga/skin.css, loaded after the template's own CSS on every page. The template keeps its colours in CSS variables on the root, on theme-light and on theme-dark, so the skin overrides the variables and never edits the minified CSS. The page ground is white in light mode and near-black in dark mode, with near-black and near-white ink. Small accent text uses a deep olive in light mode and Volt in dark mode. Second headline lines and big figures use magenta, then Volt in dark. Filled pills are Volt with black text. If blue shows anywhere, find its class and add it to the right group.

Typography

Geist and Geist Mono stay as the template set them, for headings, body text, eyebrows and code. The Nzinga wordmark is never typed: it is drawn from outlines, so it looks the same everywhere. Words follow the house rules. Page titles use Title Case. Sentences are short and plain. The name is Nzinga or Nzinga Network. The four choices keep their exact names: Only me, Nzinga's models, Nzinga and approved partners, and Everyone. No numbers, quotes, people, customers or prices are invented.

Buttons and cards

Every button, card, chip, row and panel keeps its template markup and classes. Only its words and its link target change. Words go into the template's own text slots, one slot at a time, so a button that held two words still holds two. Cards that showed customer logos now name what Nzinga works with, as text: Gemma 3, Llama 3.1, Hugging Face, FLORES+, NTREX-128, Expo and Cloudflare. Buttons point at real pages: the demo, the tokenizer comparison, the design system, the partner calls or GitHub. Forms on this site send nothing; their buttons open GitHub or the demo instead.

Section components

Each page keeps every section the template page has, in the same order, with the same number of items. The content-fit rule keeps the layout honest. Each Nzinga text has the same role as the template text it replaces and fits the same space. Items of four words or fewer keep exactly the same word count. Longer items stay within fifteen percent of the template's count. Every list, grid, table and FAQ keeps the same number of items. Accepted exceptions are the four choices' fixed names, proper names in name strips and chips, numbers and code tokens, and image alt text, which describes the new image. Where the template shows a team, Nzinga shows roles, partners or principles, never invented people.

Slots

The words for each page live in one file, nzinga/content followed by the page name and .json, made from the page itself. The slots tool lists every text slot of a page in document order: the title and share descriptions, then every text node and every alt, placeholder, label and button value in the body, outside the shared navigation and footer. Each slot has an id, a role that names the element and its class, a from field holding the template text exactly, and a to field for the Nzinga text. Fill every to field with plain text; the tool escapes it. An empty set sign clears a slot. Link targets and data in markup go in hrefs and raw lists: a raw substring of the tag and its replacement. A generated content map shows every slot with its fit.

Applying a page

Run the content tool with the page name. It matches each slot in document order and writes the Nzinga text in place. It records what it wrote, so changing a to field and running it again replaces the text cleanly. It reports any slot it cannot find. Then run the foundation tool for the page, if the navigation or footer changed. Check the content map: every slot should fit the rule.

Pages and templates

Home 1 is the Nzinga home; Home 2 and Home 3 tell the same story as alternatives. The three product pages are the Nzinga Tokenizer, the Nzinga Network and the Nzinga App. Overview is the protocol. Pricing is Pay: members are paid per accepted minute, with a licence share, and partner licensing on request; no amount is shown. Customers and the five customer stories are languages. Integrations are the tools Nzinga works with. The blog is research. The changelogs are releases. Security covers privacy by design. About explains why Nzinga exists and its name. Careers and Job are partner calls. The three contact pages, sign in, create account and book a demo become contact, join, invite and demo pages. Style guide, Instructions, Licences, Privacy policy, 404 and 401 keep their roles, in Nzinga words.

Video and images

Every template image keeps its path, size and format, so its markup stays the same. The template's pixel-bloom images are recoloured onto Nzinga ramps. New images are procedural mosaics. Pixel portraits of people become cowrie mosaics. Product interface images are rendered as panels with real Nzinga figures. Pages may add new art under their own names. The Home 2 video becomes a still Nzinga poster, and its remote video source is dropped.

Inline SVG and the foundation

The foundation tool applies the shared changes to every page and can run on one page at a time. It is idempotent, so running it twice changes nothing. It removes the template's review and validator scripts and the template badge trigger. It links the colour skin after the template CSS. It puts the Nzinga navigation and footer in place from shared partials, keeping the template's current-page markers, its Products and Pages dropdowns and the giant footer wordmark. It swaps every other template logo, on the sign-in pages and the 401 page, for the cowrie and the drawn word. It turns the template's blue in inline SVG icons into the Nzinga mark colour, so icons follow light and dark mode. It points share images at the Nzinga share image, and every Lottie at the recoloured files. The cowrie comes from the app's own brand component: a shell with a seven-bar slit, cut out so the ground shows through. The wordmark outlines come from the design system. Favicons are the spectrum cowrie on black, at the template's file names and sizes. The Global Styles block on each page is left exactly as the template wrote it.

Lottie animations

The template's Lottie animations are recoloured by a small tool into the nzinga lottie folder: the same frames, timing and loops, with Nzinga colours, and a light and a dark file for each. Pages point at those files through the foundation, so the template's Lottie elements, wrappers and data attributes stay as they are. To change a colour, edit the tool and run it again.

Scroll interactions

Motion is the template's own and is never edited: its Webflow interactions and GSAP scroll animations still play once, when each element enters the view, and still respect Reduce motion. Because the words change and the markup does not, every heading reveal, fade, stagger, bar and step keeps working. Check it by scrolling. A page that is captured before scrolling shows sections in their starting state, so every check scrolls the whole page first, in small steps, and then waits for the reveals to finish. Each page is served over http from the built site, never opened as a file, so scripts, fonts and images load as they would online. The build copies the web folder to a dist folder, leaves out the tools, content files, partials and artwork sources, and adds a header that keeps search engines away. Verification uses Playwright at 1440 and 390 pixels wide, in light mode and in dark mode. Dark mode is tested by adding the theme-dark class to the page wrapper, as the theme switch does. Each run records page errors and any failed local request, and measures the page width to catch horizontal scroll. Anything that fails is fixed in the content file or reported, never patched in the page by hand.

Side by side, page by page

After the checks, each page gets a full-page screenshot next to the template page at the same width and theme. Only words, colours, logo and imagery may differ. Section order, spacing, the number of cards, rows and items, button sizes, icons and the footer must match. When a Nzinga text is longer than the template's and wraps onto a new line, it is cut back to fit the rule, not given more room. When a template image was a product screen, the Nzinga panel must sit in the same frame at the same size. The navigation dropdowns, the theme switch and the mobile menu are opened in both themes. Then the page thumbnails on the Overview page are captured again from the built pages, so the previews show the finished pages. Two people never edit the same page at once, and shared files, the skin, the partials and the tools, change only through one owner. Each change is described in plain words in its report: what changed, the slot counts and how many fit the rule, the screenshots, and anything that could not be sourced. Nothing is committed or deployed until those checks pass. Deploys go to Cloudflare Pages from one script, which builds first and refuses to run without its credentials.

Forms

Every form keeps its template fields and layout, with Nzinga labels, but nothing is sent anywhere. Each form stops its own submission, and its submit button becomes a plain button that opens GitHub, the demo or the join page. A note beside each form says so: contact us through GitHub. Fields never ask for an email address; where the template asked for one, the field asks for a GitHub username. Every template email address is removed from the pages, and no personal email address appears anywhere. The job form asks about language data: the language, a text sample, the script, the licence and how the text was gathered. The demo page shows the QR code that opens the app in Expo Go, with the demo sign-in: any phone number, code 482917 and any eight-character invite code. The join page explains invites: members start with three, earn one per accepted hour, and each code works once.

Titles and sharing

Every page has a Title Case title and a plain description, copied to its share tags. Share images point at the Nzinga share image. The built site sends a header that keeps it out of search engines, because it is a private preview. The name is always Nzinga. Favicons and the webclip are the spectrum cowrie on black, at the template's sizes.

Design system site

The full Nzinga design system, with the brand, colours, type, components and principles, is a separate site. The style guide page here documents the template's components in Nzinga colours and links to it.

Help and support

Questions about the site go through the nzinga-voice repository on GitHub. Open an issue with the page name and a screenshot.

Licences and releases

Fonts, data, the tokenizer's terms and the template licence are listed on the Licences page. Releases of the tokenizer, the network and the app are recorded on the Releases page.